# Visualize Graph

> GraphDB可視化エージェント - RyuGraphデータベースの内容をMermaid/DOT/HTML形式で可視化。/visualize-graph [出力パス] で呼び出し。

- Skill: `wfukatsu/visualize-graph` (Agent Skill)
- Install (CLI): `npx skillmds add wfukatsu/visualize-graph`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wfukatsu/visualize-graph/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wfukatsu (https://skillmd.com/u/wfukatsu)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/wfukatsu/visualize-graph

---


# 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: 環境確認

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

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

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

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

```bash
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)

```mermaid
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)

```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: フィルタリングオプション

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

```bash
# ドメインでフィルタ
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: 画像変換（オプション）

```bash
# 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: 全体グラフの可視化

```bash
/visualize-graph ./reports/graph/visualizations
```

### 例2: 特定ドメインのみ

```bash
/visualize-graph --domain Audit
```

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

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

## 関連スキル

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