mermaid-syntax-reference

name	mermaid-syntax-reference
description	Official Mermaid diagram syntax reference covering every diagram type (flowchart, sequence, class, state, ER, gantt, git graph, mindmap, and 24 more). Use whenever writing, editing, or debugging any Mermaid diagram, even if the user doesn't say "mermaid" and just describes wanting a flowchart/sequence diagram/ER diagram/etc., or pastes a code block starting with a diagram keyword like flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gitGraph.
summary	mermaid-jsの全図種（32種）の公式構文リファレンス。references/配下に図種ごとの公式Markdownを格納し、SKILL.mdは対応表とキーワード逆引きに徹する設計。

📊 Mermaid 構文リファレンス

本スキルは、Mermaid（mermaid-js）が公式にサポートする全ダイアグラム種別の構文リファレンスです。各図種の詳細な構文・オプション・記述例は references/ 配下の公式Markdownファイルに1図種1ファイルで格納されています。SKILL.md本体は各ファイルへの案内（目次）に徹し、詳細はリファレンスファイルを読んで確認してください。

🔍 目次

1. 🎯 使い方
2. 📂 図種一覧とリファレンスファイル対応表
3. 🧭 図種の選び方に迷ったら
4. ✍️ 作成・トラブルシューティングの心得

---

🎯 使い方

1. ユーザーの依頼（「フローチャートを書きたい」「このmermaidのシーケンス図がエラーになる」等）から対象の図種を特定する。
2. 下表で該当する references/*.md を特定し、そのファイルを読み込む。
3. ファイル内の構文・予約語・既知の注意点（例: flowchartの end 予約語問題）に厳密に従ってコードを書く／修正する。
4. 表にない図種や、表の説明だけでは判断できない場合も、まず references/examples.md（複数図種の実例集）や近い図種のファイルを確認してから判断する。

📂 図種一覧とリファレンスファイル対応表

リファレンスファイル	図種	開始キーワード	概要
references/flowchart.md	フローチャート	flowchart / graph	ノードとエッジによる汎用図。分岐・部分グラフ・スタイリングを扱う最頻出の図種
references/sequenceDiagram.md	シーケンス図	sequenceDiagram	アクター間のメッセージのやり取りと順序を表現
references/classDiagram.md	クラス図	classDiagram	UMLクラス図。継承・関連・メソッド・可視性を表現
references/stateDiagram.md	ステート図	stateDiagram-v2	状態遷移図。複合状態・並行状態・履歴状態を扱う
references/entityRelationshipDiagram.md	ER図	erDiagram	エンティティと関係、カーディナリティを表現
references/gantt.md	ガントチャート	gantt	スケジュール・タスクの依存関係・進捗を表現
references/pie.md	円グラフ	pie	割合の可視化
references/gitgraph.md	Gitグラフ	gitGraph	ブランチ・コミット・マージの履歴を可視化
references/mindmap.md	マインドマップ	mindmap	階層的なアイデアの整理
references/timeline.md	タイムライン	timeline	時系列イベントの表現
references/quadrantChart.md	象限チャート	quadrantChart	2軸による分類・優先度マトリクス
references/sankey.md	サンキー図	sankey-beta	フロー量の可視化
references/xyChart.md	XYチャート	xychart-beta	棒グラフ・折れ線グラフ
references/block.md	ブロック図	block-beta	自由配置のブロックと結線

🧭 図種の選び方に迷ったら

• ユーザーが図種名を明言していない場合、依頼内容の性質から対応表の「概要」列を頼りに近い図種を推測し、「〇〇図として書きます」とユーザーに一言添えてから進める。
• 既存のmermaidコードを修正する依頼では、コード冒頭のキーワード（```flowchart sequenceDiagramなど。YAML frontmatter---` がある場合はその直後の行）で対応表を逆引きする。
• 表にないバリエーション（例: 図種名の後ろに -beta が付く新しめの構文）に遭遇したら、まず該当ファイルを読み、それでも解決しない場合は references/examples.md や公式サイト（https://mermaid.ai/open-source/syntax/）を確認する。

✍️ 作成・トラブルシューティングの心得

構文の正しさだけでなく、図としての読みやすさ・保守しやすさも意識する。

• 図種の決定: ユーザーの依頼内容（表現したい関係性が「順序」なのか「階層」なのか「時系列」なのか等）から最も適した図種を先に決める。ユーザーが図種を指定していても、内容的に別の図種の方が適切な場合は代替案を提案してよい。
• ノードID・ラベルの命名: ノードIDは意味のある英数字にし、表示ラベルは日本語で分かりやすく記述する（例: id A[受注] であって id A[A] にしない）。
• 可読性のためのスタイリング: 図が複雑になる場合はclassDefやサブグラフでグルーピングし、色分けや方向指定（TD/LR等）で視線の流れを整理する。
• 複雑な箇所のコメント: ノード数や分岐が多く一見して意図が読み取りにくい部分には、mermaidコード内に %% コメントで意図を残す。
• 巨大な図の分割提案: 1つの図にすべてを詰め込むと可読性が落ちる場合、複数の図に分割することを提案する（例: 全体像のフローチャート＋詳細のシーケンス図）。
• 構文エラーのトラブルシューティング: エラーが出た場合は、まず対応するリファレンスファイルの予約語・既知の落とし穴（例: flowchartのend問題、ノード名の先頭文字問題）を確認してから修正する。それでも解決しない場合はreferences/examples.mdや近い図種のファイルの記述例と照合する。
• ラベル内の改行と特殊文字: ラベル内の改行は \n ではなく <br/> を使う（レンダラーによっては \n が文字列のまま表示される・無視される）。括弧・スペース・特殊記号を含むラベルは全体をダブルクォートで囲む（例: state "open (保有中)" as open、A --> B : "条件 (詳細)<br/>追加情報"）。

Source: https://github.com/mermaid-js/mermaid (develop branch, packages/mermaid/src/docs/syntax/) — 取得日 2026-07-24