Mermaidの仕組み
Mermaidは軽量なテキスト定義を解析し、ブラウザでSVGダイアグラムを生成します。数行のテキストを書くだけで、レイアウト、間隔、スタイリングを自動的に処理します。
例えば、3ステップのフローチャートはこのように書きます：
graph LR
A[Write code] --> B[Push to GitHub]
B --> C[Deploy]Mermaid構文によるシンプルな左から右へのフローチャート
Mermaidが対応するダイアグラムタイプ
Mermaidは開発者が最もよく使うダイアグラムタイプをカバーしています：
フローチャート
graph TD（上から下）またはgraph LR（左から右）を使って、プロセスフロー、意思決定ツリー、システムアーキテクチャ図を作成できます。ノードは矩形、角丸矩形、ダイアモンド（意思決定）、シリンダー（データベース）、円などの形状を使えます。
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Ship it]
B -->|No| D[Debug it]
D --> Bシーケンス図
シーケンス図は時間の経過とともにアクター間のインタラクションをモデル化します。APIフロー、認証シーケンス、マイクロサービス通信のドキュメント化に最適です。
sequenceDiagram
Browser->>Server: GET /api/data
Server->>Database: SELECT * FROM items
Database-->>Server: rows
Server-->>Browser: 200 OKエンティティ関係（ER）図
ER図はデータベースのテーブルとその関係を記述します。MermaidのerDiagram構文はカーディナリティ記法とインライン属性定義をサポートしています。
ガントチャート
ガントチャートはセクション、タスク、期間、依存関係を含むプロジェクトタイムラインを表示します。スプリント計画、製品ローンチロードマップ、リリーススケジュールに役立ちます。
その他のタイプ
Mermaidはクラス図（UML）、マインドマップ、円グラフ、状態図なども対応しています。対応タイプは各リリースで増え続けています。
開発者がMermaidを使う理由
LucidchartやDraw.ioなどの描画ツールは優れていますが、プルリクエストでdiffやレビューが難しいバイナリファイルを生成します。Mermaidのダイアグラムはプレーンテキストで保存されるため、次の利点があります：
バージョン管理 – ダイアグラムをコードと一緒にコミットし、Gitで全ての変更を追跡できます。
ドキュメントサイト – GitHub、GitLab、Notion、多くのWikiがMarkdownのコードブロック内でMermaidをネイティブレンダリングします。
スピード – ダイアグラムの更新は図形を並べ替えるのではなく、テキストを編集するだけです。
ポータビリティ – ベンダーロックインなしに、いつでもSVGまたはPNGでエクスポートできます。
Mermaidを始める方法
Mermaidを試す最速の方法は、ブラウザでライブエディタを開くことです。インストール不要です。Diagram.RSは無料でプライバシーに配慮したMermaidエディタです。左側にMermaid構文を貼り付けるか入力すると、右側でリアルタイムにダイアグラムが更新されます。
mermaid npmパッケージを含めて自分のプロジェクトにMermaidを組み込むこともできますし、GitHub Flavored MarkdownのコードブロックでMermaidを使うこともできます。GitHubはMermaidを自動的にレンダリングします。