smithery/wfukatsu

visualize-graph

GraphDB可視化エージェント - RyuGraphデータベースの?

Installation

$ npx skills add smithery/wfukatsu --skill visualize-graph

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery/wfukatsu.

npx skills add smithery/wfukatsu

Browse all from smithery/wfukatsu

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,449 B
  • docs SUMMARY.md 185 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

GraphDB Visualizer Agent

RyuGraphデータベースの内容を可視化し、Mermaid図やインタラクティブHTMLとして出力するエージェントです。

目的

このエージェントは以下の機能を提供します:

  1. Mermaid図生成 - ノードとリレーションをMermaid形式で可視化
  2. DOT形式出力 - Graphviz用のDOT形式で出力
  3. インタラクティブHTML - D3.jsを使ったインタラクティブグラフ
  4. フィルタリング - 特定のドメインやノードタイプでフィルタ

前提条件

  • Python 3.9+
  • ryugraph パッケージ
  • pandas パッケージ
  • (オプション)graphvizパッケージ(DOT → PNG変換用)
  • (オプション)mermaid-cli(Mermaid → PNG変換用)

実行プロンプト

あなたはGraphDBを可視化する専門家エージェントです。以下の手順で可視化を実行してください。

Step 1: 環境確認

# データベースの存在確認
ls -la knowledge.ryugraph

# ryugraph がインストールされているか確認
source .venv/bin/activate && python -c "import ryugraph; print('OK')"

Step 2: 可視化スクリプトの実行

可視化スクリプトを実行してグラフを生成します:

source .venv/bin/activate && python scripts/visualize_graph.py \
  --db-path ./knowledge.ryugraph \
  --data-dir ./reports/graph/data \
  --output-dir ./reports/graph/visualizations \
  --format all

Step 3: 出力形式

Mermaid形式 (graph.mmd)

graph LR
    subgraph "Identity Domain"
        User[User]
        UserService[UserService]
    end

    subgraph "Audit Domain"
        AuditSet[AuditSet]
        AuditSetService[AuditSetService]
    end

    User -->|BELONGS_TO| Identity
    AuditSet -->|BELONGS_TO| Audit
    AuditSetService -->|REFERENCES| AuditSet

DOT形式 (graph.dot)

digraph G {
    rankdir=LR;
    node [shape=box];

    subgraph cluster_identity {
        label="Identity Domain";
        User;
        UserService;
    }

    User -> Identity [label="BELONGS_TO"];
}

インタラクティブHTML (graph.html)

D3.jsを使用したフォースレイアウトグラフ。ノードのドラッグ、ズーム、検索機能を提供。

Step 4: フィルタリングオプション

特定のデータのみを可視化:

# ドメインでフィルタ
python scripts/visualize_graph.py --db-path ./knowledge.ryugraph --domain Audit

# ノードタイプでフィルタ
python scripts/visualize_graph.py --db-path ./knowledge.ryugraph --node-type Entity

# レイアウト変更
python scripts/visualize_graph.py --db-path ./knowledge.ryugraph --layout TB

Step 5: 画像変換(オプション)

# Mermaid → PNG/SVG
mmdc -i graph.mmd -o graph.png
mmdc -i graph.mmd -o graph.svg

# DOT → PNG/SVG (Graphviz)
dot -Tpng graph.dot -o graph.png
dot -Tsvg graph.dot -o graph.svg

コマンドオプション

オプション 説明 デフォルト
--db-path RyuGraphデータベースパス ./knowledge.ryugraph
--data-dir CSVデータディレクトリ ./reports/graph/data
--output-dir 出力ディレクトリ ./reports/graph/visualizations
--format 出力形式 (mermaid/dot/html/all) all
--domain フィルタするドメイン なし(全て)
--node-type フィルタするノードタイプ なし(全て)
--layout レイアウト (LR/TB/RL/BT) LR

出力ファイル

reports/graph/visualizations/
├── graph.mmd           # Mermaid形式
├── graph.dot           # DOT形式(Graphviz)
├── graph.html          # インタラクティブHTML
├── graph.png           # PNG画像(mmdc使用時)
├── graph.svg           # SVG画像
├── domain-audit.mmd    # ドメイン別Mermaid
├── domain-identity.mmd
└── summary.md          # 可視化サマリー

エラーハンドリング

  • RyuGraphデータベースが存在しない場合 → エラーメッセージを表示し、/build-graph の実行を提案
  • CSVデータディレクトリが空の場合 → --data-dir の指定を確認し、/build-graph でデータ生成を提案
  • Mermaid/DOT変換でエラーが発生した場合 → /fix-mermaid でシンタックスエラーを修正
  • mmdc/Graphvizがインストールされていない場合 → 画像変換をスキップし、テキスト形式(.mmd/.dot)のみ出力
  • ノード数が多すぎてHTML描画が重い場合 → --domain や --node-type でフィルタリングを提案

使用例

例1: 全体グラフの可視化

/visualize-graph ./reports/graph/visualizations

例2: 特定ドメインのみ

/visualize-graph --domain Audit

例3: エンティティ間の関係のみ

/visualize-graph --node-type Entity --rel-type REFERENCES

関連スキル

  • /build-graph - GraphDBを構築
  • /query-graph - GraphDBを探索
  • /render-mermaid - Mermaid図を画像に変換