mermaid

Mermaid 図ビジュアライザー

クイックスタート： 図の種類（フローチャート／シーケンス／状態／クラス／ER／ガント／マインドマップ）を特定 → ノードを図形で定義 → 矢印で接続 → ```mermaid フェンスで囲みます。デフォルトは上から下（TD）です。graph より flowchart を使用してください。Unicode に対応しています。

---

重要な構文ルール

ルール 1：リスト構文の競合

❌ [1. Item]     → "Unsupported markdown: list"
✅ [1.Item]      → Remove space after period
✅ [① Item]      → Use circled numbers ①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item]    → Use parentheses

ルール 2：サブグラフの命名

❌ subgraph AI Agent Core    → Space without quotes
✅ subgraph agent["AI Agent Core"]  → ID with display name
✅ subgraph agent            → Simple ID only

ルール 3：サブグラフ内でのノード参照

❌ Title --> AI Agent Core   → Reference display name
✅ Title --> agent           → Reference subgraph ID

ルール 4：ノードテキスト内の特殊文字

✅ ["Text with spaces"]       → Quotes for spaces
✅ Use #quot; instead of "    → Avoid quotation marks
✅ Use #lpar;#rpar; for ()    → Avoid parentheses

ルール 5：graph より flowchart を使用

❌ graph TD      → Outdated
✅ flowchart TD  → Supports subgraph directions, more features

---

よくある問題

問題	解決策
図がレンダリングされない	対応する閉じ括弧や引用符がない箇所を確認します
リスト構文エラー	[1. Item] ではなく [1.Item] を使用します
サブグラフの参照に失敗する	表示名ではなく ID を使用します
混み合いすぎている	複数の図に分割します
接続線が交差する	レイアウトの方向を変えるか、不可視のエッジ ~~~ を使用します

---

出力形式

```mermaid
[diagram code]
```

---

関連ファイル

図の種類ごとの構文や高度な機能については、以下のリファレンスを参照してください。

• syntax.md — 14 種類以上のすべての図に関する詳細な構文：フローチャートの図形、シーケンス図のアクター、クラスの関係、状態遷移、ER 図のカーディナリティ、ガントのタスクなど