Mermaid記法チートシート【2026年版】図の種類と書き方一覧

Mermaidは、テキストからフローチャートやシーケンス図などを生成する記法です。図の内容をコードとして保存できるため、Gitで差分を管理したり、AIに修正を依頼したりしやすい特徴があります。

この記事は、個別機能を詳しく説明する記事ではなく、作りたい図に合う記法を選ぶための総合チートシートです。詳しい線・ノード・ガントチャートの設定は、各専門記事へリンクします。

Mermaidの基本形

すべての図は、最初に図の種類を宣言し、その下へ内容を書きます。

flowchart LR
    A[入力] --> B[処理] --> C[出力]

flowchart: 図の種類
LR: 左から右へ配置
A・B・C: ノードID
[入力]: 画面に表示するラベル
-->: 矢印

コメントは%%から行末までです。

%% この行は図に表示されない

未知のキーワードやスペルミスは図を壊す一方、一部の設定ミスは無視されることがあります。表示されたから正しいと判断せず、設定が反映されているかも確認します。

図の種類を選ぶ早見表

作りたいもの	宣言	向いている用途
フローチャート	`flowchart`	手順、分岐、業務フロー
シーケンス図	`sequenceDiagram`	API通信、会話、時系列の相互作用
クラス図	`classDiagram`	クラス、属性、継承関係
状態遷移図	`stateDiagram-v2`	状態とイベント
ER図	`erDiagram`	データベース設計
ガントチャート	`gantt`	日程、依存関係、進捗
マインドマップ	`mindmap`	アイデアや論点の階層化
タイムライン	`timeline`	出来事の時系列整理
Gitグラフ	`gitGraph`	ブランチとコミット
円グラフ	`pie`	構成比

Mermaidにはこのほか、Kanban、XY Chart、Block Diagram、Architectureなどもあります。対応状況はMermaidを表示するサービスのバージョンに左右されます。

フローチャート

手順や判断の流れにはflowchartを使います。

flowchart LR
    A[調査] --> B{根拠は十分?}
    B -->|はい| C[執筆]
    B -->|いいえ| A
    C --> D[公開前確認]

方向は次から選べます。

TBまたはTD: 上から下
BT: 下から上
LR: 左から右
RL: 右から左

線・矢印・点線はMermaidの線・矢印まとめ、テキストはMermaidのテキスト設定、形はMermaidのノード形状で詳しく説明しています。

シーケンス図

複数の登場人物やシステム間のやり取りを、上から下の時間順で表します。

sequenceDiagram
    participant U as ユーザー
    participant A as アプリ
    participant S as API
    U->>A: 検索する
    A->>S: データを要求
    S-->>A: 結果を返す
    A-->>U: 画面に表示

リクエストとレスポンス、認証フロー、担当者間のやり取りを説明するときに向いています。

クラス図

オブジェクト指向設計のクラス、属性、メソッド、関係を表します。

classDiagram
    direction LR
    class Article {
      +String title
      +String status
      +publish()
    }
    class Author {
      +String name
    }
    Author "1" --> "many" Article : writes

コードの全詳細を写すより、設計判断に必要なクラスと関係へ絞ると読みやすくなります。

状態遷移図

1つの対象が、イベントによってどの状態へ移るかを表します。

stateDiagram-v2
    direction LR
    [*] --> 下書き
    下書き --> レビュー中
    レビュー中 --> 下書き : 差し戻し
    レビュー中 --> 公開済み : 承認
    公開済み --> [*]

記事、注文、申請、ユーザーアカウントなど、状態を持つものに向いています。

ER図

データベースのエンティティと関係を表します。

erDiagram
    direction LR
    AUTHOR ||--o{ ARTICLE : writes
    ARTICLE ||--o{ REVISION : has
    AUTHOR {
      int id
      string name
    }
    ARTICLE {
      int id
      string title
      string status
    }

||--o{のような記号は、1対多などのカーディナリティを表します。

ガントチャート

タスクの日程と依存関係にはganttを使います。

gantt
    title 記事制作
    dateFormat YYYY-MM-DD
    section 制作
    構成 :outline, 2026-08-17, 2d
    初稿 :draft, after outline, 3d
    公開判断 :milestone, release, after draft, 0d

休日除外、進捗色、目盛りなどはMermaidガントチャートの作り方で詳しく説明しています。

マインドマップ

中心テーマから論点を枝分かれさせます。

mindmap
  root((AIツールの評価))
    できること
      入力
      出力
    制約
      料金
      精度
      セキュリティ
    検証
      公式資料
      実行結果

関係の方向や複雑な依存関係より、アイデアの階層を整理したいときに向いています。

タイムライン

出来事を時系列で並べます。

timeline
    title 記事の更新履歴
    2022 : 初版公開
    2024 : 情報確認
    2026 : 全面更新

日付ごとの作業期間を表すならガントチャート、歴史や変更履歴を並べるだけならタイムラインが分かりやすいです。

Gitグラフ

ブランチ、コミット、マージの流れを表します。

gitGraph
    commit id: "start"
    branch feature
    checkout feature
    commit id: "draft"
    checkout main
    merge feature
    commit id: "release"

詳しい書き方はMermaid GitGraph入門も参照してください。

円グラフ

少数の項目の構成比を示します。

pie showData
    title 記事制作時間
    "調査" : 35
    "執筆" : 40
    "確認" : 25

項目が多い場合や値の差が小さい場合は、棒グラフなど別の表現も検討します。Mermaidで円グラフを描く方法もあります。

色やテーマを変える

現在の公式ドキュメントでは、図の先頭にYAML frontmatterを置いて設定できます。

---
config:
  theme: base
  themeVariables:
    primaryColor: "#dbeafe"
    primaryBorderColor: "#2563eb"
---
flowchart LR
    A[調査] --> B[執筆] --> C[確認]