graphviz

Graphviz DOT 図ジェネレーター

重要： コードフェンスの識別子には ```graphviz ではなく、```dot を使用してください。

クイックスタート： digraph（有向グラフ）または graph（無向グラフ）を選択 → 属性（形状、色、ラベル）を指定してノードを定義 → -> または -- で接続 → レイアウトを設定（rankdir、間隔）→ ```dot フェンスで囲みます。デフォルトは上から下（rankdir=TB）です。クラスタ名は cluster_ で始め、セミコロンを使用してください。

---

重要な構文ルール

ルール 1：クラスタの命名

❌ subgraph backend { }      → Won't render as box
✅ subgraph cluster_backend { }  → Must start with cluster_

ルール 2：スペースを含むノード ID

❌ API Gateway [label="API"];    → Invalid ID
✅ "API Gateway" [label="API"];  → Quote the ID
✅ api_gateway [label="API Gateway"];  → Use underscore ID

ルール 3：エッジ構文の違い

digraph: A -> B;   → Directed arrow
graph:   A -- B;   → Undirected line

ルール 4：属性の構文

❌ node [shape=box color=red]    → Missing comma
✅ node [shape=box, color=red];  → Comma separated

ルール 5：HTML ラベル

✅ shape=plaintext for HTML labels
✅ Use < > not " " for HTML content

---

よくある問題

問題	解決方法
ノードが重なっている	nodesep と ranksep を大きくする
レイアウトが適切でない	rankdir を変更するか、{rank=same} を追加する
エッジが交差している	splines=ortho を使用するか、ノードの順序を調整する
クラスタが表示されない	名前が cluster_ で始まっている必要があります
ラベルが表示されない	引用符のエスケープを確認する

---

出力形式

```dot
digraph G {
    [diagram code]
}
```

---

関連ファイル

高度なレイアウト制御や複雑なスタイル設定については、以下のリファレンスを参照してください。

• syntax.md — レイアウト制御（rankdir、splines、rank）、HTML ラベル、エッジのスタイル、クラスタのサブグラフ、レコード形式のノード