フローチャート
flowchart TD
A[開始] --≷ B{条件?}
B -- はい --≷ C[処理1]
B -- いいえ --≷ D[処理2]
C --≷ E[終了]
D --≷ E[終了]概要
Mermaidは、テキスト記法で図表を定義し、ブラウザでSVGとして描画するツールです。フローチャート、シーケンス図、クラス図、ER図、ガント、マインドマップ、タイムライン、ジャーニーなど多数対応。コードレビューしやすく、差分管理や自動生成と相性が良いのが強みです。
✍️ エディタ
🖼️ プレビュー
基本
- 開始行に種類を宣言：
flowchart TD/sequenceDiagram/classDiagramなど。 - ノード・エッジをテキストで記述（例：
A --≷ B）。[]や()で形状を変えられます。 - ファイル管理は
.mmd拡張子にするか、Markdown内のコードブロックに記述。 - Webでは
mermaid.min.jsを読み込み、mermaid.initialize()後にmermaid.render()で描画します。
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel:'strict' });
// 文字列から描画
async function draw(id, code){
const { svg } = await mermaid.render(id, code);
document.querySelector('#preview').innerHTML = svg;
}
</script>基礎
ノード形状の例
A[四角] --≷ B(丸)
B --≷ C{ひし形}
C --≷ D[[スタジアム]]
D --≷ E[(円柱)]スタイル
flowchart LR
A[開始]:::start --≷ B[処理]
classDef start fill:#2ecc71,stroke:#1e8449,color:#fff;
linkStyle 0 stroke:#2ecc71,stroke-width:2px;応用
- CIで
mmdc（mermaid-cli）を使い、SVG/PNGをビルド成果物として出力。 - バックエンドで仕様から図を自動生成（例：ER図をスキーマから作成）。
- ドキュメントサイト（Docusaurus / MkDocsなど）でMarkdownに埋め込み。
発展
- テーマカスタム：
mermaid.initialize({ themeVariables: { primaryColor: '#...' } }) - 巨大図の分割・再利用：テンプレート化し
include代替としてビルド段で結合。 - アクセシビリティ：SVGの
title/desc付与、コントラスト配慮。
最新情報
Mermaidの更新は比較的活発です。新しい図種・テーマ・セキュリティ設定の変更が行われることがあります。運用前に リリースノート と ドキュメント を確認し、バージョンを固定（@10 など）するのがおすすめです。
目的
- 設計意図を コードの近く に置き、レビューで議論可能にする。
- 差分（git）で変更の理由と影響範囲を追跡。
- 非デザイナーでも図を素早く共有、再現性の高いドキュメントに。
仕事の現場
- アーキテクチャ図・API時系列・業務フロー・DB設計レビュー。
- 社内ポータルやナレッジベース（Confluence/Notion/GitHub Wiki）。
- ADR（Architecture Decision Record）に図を添付。
そのほかの記法と比較
| ツール | 特徴 | 利点 | 注意点 |
|---|---|---|---|
| Mermaid | JSでSVG描画、Markdownと相性◎ | 導入が容易、図種が豊富 | 巨大図のパフォーマンス、細密レイアウトは工夫 |
| PlantUML | サーバ/Java実行で画像生成 | 表現力が高い、UMLが充実 | 実行環境が必要、SVGの最適化は別途 |
| Graphviz (DOT) | レイアウト最適化が強力 | 階層・有向グラフが美しい | 学習コスト、Web直描画は工夫 |
| D2 | YAML風で読みやすい | 自動レイアウト・モダン | 運用実績/図種は要確認 |
知っておくといい
知識
- 図種ごとの文法（
flowchart/sequenceDiagram/…）。 - テーマとセキュリティレベル（
securityLevel:'strict'推奨）。 - エスケープ：
\"など。
技能
- 図を分割し 粒度 を揃える（1図1目的）。
- CIで
mmdcによる静的書き出し。
用語
- レイアウト方向：
TD/LR/BT/RL - クラス定義：
classDef/class
ルール
- レビューできるサイズに保つ（画面内で全体像）。
- 凡例・注釈を明示、色に意味を持たせすぎない。
例
シーケンス図
sequenceDiagram
participant U as User
participant W as Web
participant S as Server
U->>W: ページ要求
W->>S: API /items
S--≷>W: JSON
W--≷>U: HTMLレンダリングクラス図
classDiagram
class User {
+id: int
+name: string
+login() bool
}
class Article {
+id: int
+title: string
+authorId: int
}
User <|-- Admin
User "1" --o "*" Article : writes状態遷移図
stateDiagram-v2
[*] --≷ Draft
Draft --≷ Review: 送信
Review --≷ Approved: 承認
Review --≷ Draft: 差戻し
Approved --≷ [*]ER 図
erDiagram
USERS ||--o{ ARTICLES : writes
USERS {
int id PK
string name
}
ARTICLES {
int id PK
string title
int author_id FK
}ガントチャート
gantt
title リリース計画
dateFormat YYYY-MM-DD
section 企画
要件定義 :done, des1, 2025-08-01, 2025-08-07
section 開発
実装 :active, des2, 2025-08-08, 10d
テスト : des3, after des2, 5d
section 提供
リリース : des4, after des3, 2d円グラフ
pie title ブラウザシェア
"Chrome" : 63
"Safari" : 20
"Firefox" : 4
"その他" : 13マインドマップ
mindmap
root((Mermaid))
図表
フロー
シーケンス
ER
利点
テキストで管理
レビューしやすい
差分が見えるタイムライン
timeline
title プロジェクト里程標
2025-08-01 : 計画開始
2025-08-10 : 実装開始
2025-08-20 : テスト
2025-08-30 : リリースユーザージャーニー
journey
title ECサイト購入体験
section 訪問
検索から来訪: 3: User
section 検討
カート投入: 2: User
レビュー確認: 3: User
section 購入
決済: 2: User
完了メール受信: 1: User関連リンク
- 公式ドキュメント・リポジトリ（Mermaid）
- mermaid-cli（自動ビルド向け）
- 各種静的サイトジェネレータのMermaidプラグイン
より具体的に
SVGを書き出して配布物へ組み込み
- このページのエディタで図を作成してプレビュー。
- 「SVGダウンロード」で保存。
- SVGをそのままWeb/スライド/資料へ貼り付け。