Mermaid記法チートシート for Qiita

Last updated at 2026-02-24Posted at 2026-02-24

Mermaid記法チートシート for Qiita

안녕하신게라！パナソニックコネクト株式会社クラウドソリューション部の加賀です。

ドキュメント作成や設計で欠かせない Mermaid の記法をまとめました。
特に利用頻度の高いフローチャートとシーケンス図を詳細に解説し、その他の多様な図表は辞書的に使えるチートシート（コピペ用サンプルと公式ドキュメントのリンク） としてまとめています。

バージョンについて
Qiitaで使用中のMermaidバージョンは記事更新時点（2026/02/24）で v11.12.1 です。

Mermaidの最新機能（Beta機能含む）や一部の機能は、Qiita上では正しくレンダリングされない可能性があります。
なるべく公式アップデートに追従して記事更新を続けていく所存ではありますが、必ずしも最新情報となっていない点についてはご了承ください。
修正・指摘・加筆依頼など、コメントや編集リクエストを頂けると嬉しいです。

Mermaidとは？

パワーポイントやExcel方眼紙で図を書くことに消耗していませんか？
「矢印がずれる」「修正時のレイアウト調整が面倒」「Gitで差分管理ができない」……
そんな悩みから解放してくれるのが Mermaid です。

Mermaidは テキストコードを図に変換する ツール・ライブラリの名称です。

テキストエディタだけで完結
重たい作図ツールを起動する必要もなく、画像ファイルをドキュメントに貼り付ける必要もありません。
Gitで管理しやすい
テキストのみのため、図の差分（Diff）が明確です。
多くのプラットフォームがサポート
Qiitaだけでなく、GitHub, GitLab, Notion, VS Code拡張機能、どこでもプレビューできます。

エンジニアとしての設計業務だけでなく、プレゼン資料作成などでも役立つ強力なツールです。
ぜひこの機会に、"Drawing as Code" の快適さを体験してみてください。

共通シンタックス

コードブロック
必ず
```
```mermaid
（コード）
``` 
```
で囲みます。（「Markdown記法チートシート」を参照）
コメントアウト
%% より後ろはコメントとなります。
アクセシビリティ
accTitle: タイトル, accDescr: 説明 を記述することで、スクリーンリーダー向けのテキストを提供できます。
```
```mermaid
flowchart TD
    accTitle: 処理フロー
    accDescr: 開始から終了までの流れを説明しています。
    Start --> End
```
```
スタイリング
基本的に各図専用の構文がありますが、SVG属性（fill, stroke）を指定できる場合もあります。

プレビューと公開後の表示
プレビューと公開後の表示が微妙に異なる場合があります。複雑な図は限定公開や下書きのプレビューで、全体公開前に確認することをお勧めします。

1. フローチャート (Flowchart)

処理の流れやアルゴリズムを表現します。（筆者の経験上）最も使用頻度が高い図です。
📖 公式ドキュメント

1-1. 基本構文

コード

flowchart LR
    Start([開始]) --> Proc1[処理1]
    Proc1 --> Check{判定}
    Check -->|Yes| Proc2[処理2]
    Check -->|No| End
    Proc2 --> End([終了])

プレビュー

方向指定
最初に TD (上から下) や LR (左から右) を指定します。
ノード
ID["テキスト"] の形式で記述します。囲む括弧によって形状が変わります。
接続
--> などでつなぎます。途中にテキストを入れることも可能です。

1-2. ノードの形状

よく使われるノードの形状と用途を、Mermaidで実際に描写したリストです。
ノードの中に それを表示するための括弧の書き方 を記載しています。

コード

flowchart TD
    %% 基本記号
    N1["処理/プロセス<br />[ ]"]
    N2("開始/終了<br />( )")
    N3{"判定<br />{ }"}
    N4{{"条件準備<br />{{ }}"}}

    N5[("データベース<br />[( )]")]
    N6(("結合子<br />(( ))"))
    N7(["開始/終了<br />([ ])"])
    N8[["サブルーチン<br />[[ ]]"]]

    N9[/"入(出)力<br />[/ /]"/]
    N10[\"出(入)力<br />[\\ \\]"\]
    N11[/"優先操作<br />[/ \\]"\]
    N12[\"手作業<br />[\\ /]"/]

    %% ショートハンド構文による追加記号（一部）
    Ex1@{ shape: dbl-circ, label: "停止<br />dbl-circ" }
    Ex2@{ shape: curv-trap, label: "画面表示<br />curv-trap" }
    Ex3@{ shape: notch-rect, label: "帳票<br />notch-rect" }
    Ex4@{ shape: doc, label: "ドキュメント<br />doc" }
    Ex5@{ shape: notch-pent, label: "ループ制限<br />notch-pent" }

プレビュー

1-3. 線の種類 (エッジ)

矢印の形や線の種類を用途に合わせて使い分けます。文字数を増やすと線が長くなります。

コード

flowchart TD
    %% 基本の線とテキスト追加 (パイプ記法)
    A[矢印] --> B[実線] -->|テキスト| E[文字]
    A ==> C[太線] ==>|テキスト| E
    A -.-> D[点線] -.->|テキスト| E

    %% 特殊な線と記号
    F[実線] --- G[双方向] <--> J[記号]
    F === H[損失/拒否] x--x J
    F -.- I[集約/包含] o--o J

プレビュー

テキストの追加

線の上に文字を乗せる記法は主に2パターンあります。
どの線種でも統一して書ける パイプ記法 | | が覚えやすくておすすめです。

パイプ記法 (推奨)
- A -->|テキスト| B
- A ==>|テキスト| B
線に埋め込む
- A -- テキスト --> B
- A -. テキスト .-> B

エッジのアニメーション

矢印に対し別途ショートハンド構文 @{ ... } を使用することで、CSSを書かずにエッジのアニメーション設定が可能です。データの流れなどを視覚的に目立たせて表現するのに役立ちます。
fastとslowの２つのみ指定可能です。錯視図を作る場合を除き、多用しない方が良いと思います。

コード

flowchart LR
    A[ブラウザ] anim1@----->|リクエスト| B[WebServer]
    B anim2@=====>|レスポンス| A

    anim1@{ animation: slow }
    anim2@{ animation: fast }

プレビュー

1-4. サブグラフ (グループ化)

subgraph を使うことで、ノードをグループごとに枠で囲むことができます。
システム境界（クライアント／サーバ）や、処理のまとまりを表現するのに便利です。

基本的な使い方

subgraph ID [タイトル] ～ end で囲みます。

コード

flowchart LR
    subgraph Client [クライアント]
        App[ブラウザ]
    end

    subgraph Server [サーバ]
        API[API Gateway] --> DB[(DB)]
    end

    App --> API

プレビュー

レイアウトの注意点

subgraph 内で direction を指定した場合、外部からの接続方法によってレイアウトが崩れることがあります。
以下の例では、左右どちらも direction LR (左から右) を指定していますが、片側は内部ノードに直接線を引いているため、設定が無視されています。※全体の方向（TD）に強制されてしまっています。

コード

flowchart TD
    root[入力]

    %% 成功 (グループへ接続)
    subgraph Good [レイアウト維持 OK]
        direction LR
        A1[左] --> A2[右]
    end
    root --> Good

    %% 失敗 (内部ノードへ接続)
    subgraph Bad [レイアウト崩れ NG]
        direction LR                %% この指定が無視される
        B1[左] --> B2[右]
    end
    root --> B1

プレビュー

1-5. スタイリング (Style / Class)

個別に色を変える style と、CSSのように一括適用する classDef があります。
📖 公式ドキュメント (Styling)

使用できる主なプロパティは fill, stroke, stroke-width, color, stroke-dasharray などです（SVG準拠）。

コード

flowchart LR
    A[Normal] --> B[Important]
    B --> C[Error]
    C --> D[Success]

    %% 個別指定
    style B fill:#f9f,stroke:#333

    %% クラス定義
    classDef error fill:#f00,color:#fff,stroke:#333
    classDef success fill:#0f0,color:#000

    %% クラス適用
    class C error
    class D success

プレビュー

1-6. リンク (Interaction) ※Qiita一部未対応

ノードをクリックして別のページに飛ばすことができます。

Qiita上のリンクについて
リンク先はMermaid図内での展開となるため、別タブで開く等に利用することは出来ません。
サンプルコードとしては動作しますが、リンク先を見せたいという意図での用途は限られます。

コード

flowchart LR
    A[ドキュメント] --> B{確認}
    click A "https://mermaid.ai/open-source/syntax/flowchart.html#minimum-length-of-a-link" _blank

プレビュー

1-7. アイコン・画像の挿入

AWSなどのクラウド構成図を描く際に便利な、アイコン埋め込み機能です。
ショートハンド構文 @{ ... } を使用します。

ポイント
画像の縦横比崩れを防ぐため、constraint: "on" を指定するのが基本です。
アイコンサイズは h (高さ) で指定することで、大き過ぎず都合が良くなります。
コード

flowchart LR
    %% 基本: 高さ64px + アスペクト比維持
    Web@{ img: "https://api.iconify.design/logos:aws-ec2.svg", h: 64, constraint: "on", label: "Web Server" }
    
    %% 応用: 位置指定 (左上に配置)
    DB@{ img: "https://api.iconify.design/logos:aws-rds.svg", h: 64, constraint: "on", label: "Database<br />(Postgresql)" }
    
    Web <--> DB

プレビュー

画像調整のポイント

@{ ... } の中にはカンマ区切りでオプションを指定できます。

オプション	説明	例
`img`	画像のURL	`"https://..."`
`label`	ノードに表示するテキスト	`"Server"`
`w` / `h`	幅 / 高さ（ピクセル）	`64`
`constraint`	アスペクト比を維持するか	`"on"` (推奨)
`pos`	ラベル配置位置	`"t"` (上), `"b"` (下)

constraint: "on" を忘れると、ノードのサイズに合わせて画像が無理やり引き伸ばされることがあります。

Font Awesomeについて
一般的な直書き fa:fa-user はQiitaでは表示されません。代わりにUnicode絵文字（👤）を使用するか、前述の画像埋め込みを使用してください。

Tips / 矢印の干渉を防ぐ (Subgraphの活用)

アイコンを大きくすると、矢印がアイコンに被ったり、接続位置が不自然になることがあります。
その場合、ノードを subgraph で囲み、サブグラフ同士を接続する ことで、スッキリとした見た目にできます。

コード

flowchart LR
    subgraph Client [クライアント]
        PC@{ img: "https://api.iconify.design/heroicons:computer-desktop.svg", h: 64, constraint: "on", label: "PC" }
    end
    
    subgraph Server [サーバ]
        EC2@{ img: "https://api.iconify.design/logos:aws-ec2.svg", h: 64, constraint: "on", label: "EC2" }
    end

    %% ノード(Client/Server内のPC/EC2)ではなく、サブグラフ同士をつなぐ
    Client --> Server

プレビュー

2. シーケンス図 (Sequence Diagram)

オブジェクト間の相互作用を時系列で表現します。API通信フローや処理手順の記述に最適です。
📖 公式ドキュメント

2-1. 基本構文

コード

sequenceDiagram
    autonumber
    participant U as User
    participant C as Client
    participant S as Server

    U ->> C: ログイン操作
    activate C
    C ->> S: 認証リクエスト
    activate S
    S -->> C: 認証成功 (Token)
    deactivate S
    C -->> U: Home画面表示
    deactivate C

プレビュー

autonumber
メッセージに通し番号を振ります。
participant
登場人物を定義します。 as でエイリアス（別名）をつけられます。
activate/deactivate
ライフラインの活性化（棒）を表示します。

2-2. 参加者の種類 (Actor / Participant)

デフォルトの四角形は participant、人型アイコンを使いたい場合は actor を使用します。
その他にも、用途に合わせたアイコン（シェイプ）を指定できます。
※Mermaid v11.12.1時点では participant 名前 @{ "type": "種類" } の形式で指定するのが確実です。

コード

sequenceDiagram
    actor A as actor
    participant B as participant
    participant boundary@{ "type": "boundary" }
    participant control@{ "type": "control" }

    participant entity@{ "type": "entity" }
    participant database@{ "type": "database" }
    participant collections@{ "type": "collections" }
    participant queue@{ "type": "queue" }

    A ->> B: Request

プレビュー

2-3. メッセージ線の種類

矢印の形状を変えることで、同期・非同期などを表現し分けます。

コード

sequenceDiagram
    participant A
    participant B
    participant C

    A -> B: ->
    B --> C: -->
    A ->> B: ->>
    B -->> C: -->>
    A -x B: -x
    B --x C: --x
    A -) B: -)
    B --) C: --)
    A <<->> B: <<->>
    B <<-->> C: <<-->>

プレビュー

2-4. 複合フラグメント (Loop, Alt, Opt)

条件分岐や繰り返しを表現します。

コード

sequenceDiagram
    participant A
    participant B

    loop 3回リトライ
        A ->> B: Ping
    end

    alt 成功
        B -->> A: Pong
    else 失敗
        B -->> A: Timeout
    end

    opt オプション機能
        A ->> B: 追加データ送信
    end

プレビュー

2-5. ノート (Note)

図中に補足説明（付箋）を追加できます。配置位置は left of, right of, over で指定します。

構文
Note [位置] of [対象]: テキスト
位置
- left of Node 対象の左側
- right of Node 対象の右側
- over NodeA, NodeB AとBを跨ぐ（単体指定も可）
改行
テキスト内で <br /> を記述すると改行できます。
コード

sequenceDiagram
    participant User
    participant API
    participant DB

    Note left of User: ユーザは<br />未ログイン状態
    User ->> API: データ取得リクエスト
    
    Note over API, DB: 内部ネットワーク内での通信
    API ->> DB: クエリ実行
    
    Note right of DB: ※キャッシュがある場合は<br />DBアクセスをスキップ
    DB -->> API: 結果返却
    
    API -->> User: JSONデータ

プレビュー

ここから先（第3章以降）は、辞書的に使える簡易サンプル集です。
各図の用途と基本構文を掲載しています。

3. ガントチャート (Gantt Chart)

プロジェクトのスケジュールや工程管理を視覚化します。
📖 公式ドキュメント

コード

gantt
    title プロジェクト進捗
    dateFormat  YYYY-MM-DD
    excludes weekends

    section 企画
    要件定義       :done,    des1, 2024-04-01, 2024-04-05
    基本設計       :active,  des2, 2024-04-06, 5d

    section 開発
    DB設計         :crit,    dev1, after des2, 3d
    実装           :         dev2, after dev1, 5d

プレビュー

4. クラス図 (Class Diagram)

システムの構造やクラス間の関係を記述します。
📖 公式ドキュメント

<|-- 汎化/継承 (Generalization/Inheritance)
*-- コンポジション (Composition)
o-- 集約 (Aggregation)
コード

classDiagram
    User <|-- Admin
    User *-- Address

    class User {
        +String name
        +login()
    }

    class Admin {
        +manageUsers()
    }

    class Address {
        +String city
    }

プレビュー

5. 状態遷移図 (State Diagram)

オブジェクトの状態変化（ステートマシン）を表現します。
📖 公式ドキュメント
[*] は開始点または終了点を表します。

コード

stateDiagram-v2
    [*] --> 待機中
    待機中 --> 実行中 : 開始
    実行中 --> 完了 : 正常終了
    実行中 --> エラー : エラー発生
    エラー --> 待機中 : リトライ
    完了 --> [*]

プレビュー

6. ER図 (Entity Relationship Diagram)

データベースのエンティティ間の関係を定義します。
📖 公式ドキュメント

|| 1対1
|{ 1対多
o| 0または1
o{ 0または多
コード

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains

    USER {
        string email
        string password
    }

    ORDER {
        int id
        string status
    }

プレビュー

7. マインドマップ (Mindmap) ※Qiita未対応

アイデアの整理や階層構造を視覚的に表現します。
📖 公式ドキュメント
インデントによって階層を定義します。

Qiita上の表示について
QiitaではRootのみレンダリングは行われますが、意図したレイアウトとして正しく表示されません。
今後の改善に期待して記法だけ載せておきますが、プレビューには外部ツール等の利用も検討してください。

コード

mindmap
  root((Mermaid))
    Flowchart
      方向
      ノード形状
    Sequence Diagram
      参加者
      メッセージ
    Gantt Chart
      タスク
      日程

プレビュー

(Qiitaでは表示されません)

8. 円グラフ (Pie Chart)

データの比率をシンプルに表現します。
📖 公式ドキュメント

コード

pie title 使用言語比率
    "Python" : 40
    "TypeScript" : 30
    "Go" : 20
    "Rust" : 10

プレビュー

9. タイムライン (Timeline)

歴史やロードマップなど、時系列のイベントを表現します。
📖 公式ドキュメント

コード

timeline
    title 開発ロードマップ
    2024 Q1 : 要件定義 : プロトタイピング
    2024 Q2 : MVP開発
    2024 Q3 : 正式リリース

プレビュー

10. ユーザ・ジャーニー (User Journey)

ユーザの行動フローと感情レベルを可視化します。
📖 公式ドキュメント
数値が高いほどポジティブな状態を示します。

コード

journey
    title ユーザの1日
    section 朝
      起床: 3: Me
      朝食: 4: Me, Cat
    section 通勤
      満員電車: 1: Me
      仕事開始: 5: Me

プレビュー

11. Gitグラフ (Git Graph)

Gitのコミット履歴やブランチ戦略を模擬的に描画します。
📖 公式ドキュメント
commit, branch, checkout, merge などのコマンドを使用します。

コード

gitGraph
   commit tag:"v1.0.0"
   branch develop
   checkout develop
   commit
   branch feature
   checkout feature
   commit
   checkout develop
   commit
   merge feature
   commit
   checkout main
   merge develop tag:"v1.1.0"

プレビュー

12. ブロック図 (Block Diagram)

システムアーキテクチャなどを箱と線で表現するシンプルな図です。
📖 公式ドキュメント

Beta機能
block-beta は仕様変更となる可能性があります。

コード

block-beta
  columns 3
  doc>"Document"]:3
  space down1<[" "]>(down) space
  block:Group1
    node1
    node2
  end
  node3
  doc --> node1
  Group1 --> node3

プレビュー

13. 4象限チャート (Quadrant Chart)

2軸のマトリクス図を作成します。
📖 公式ドキュメント

コード

quadrantChart
    title "優先順位マトリクス"
    x-axis "低コスト" --> "高コスト"
    y-axis "低価値" --> "高価値"
    quadrant-1 "重点的に取り組む"
    quadrant-2 "すぐやる"
    quadrant-3 "後回し"
    quadrant-4 "検討"
    "タスク A": [0.3, 0.6]
    "タスク B": [0.45, 0.23]
    "タスク C": [0.57, 0.69]
    "タスク D": [0.78, 0.34]
    "タスク E": [0.40, 0.34]
    "タスク F": [0.35, 0.78]

プレビュー

14. XYチャート (XY Chart)

棒グラフや折れ線グラフを作成します。
📖 公式ドキュメント

コード

xychart-beta
    title "売上推移"
    x-axis ["睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月", "葉月", "長月", "神無月", "霜月", "師走"]
    y-axis "売上 (万円)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

プレビュー

15. カンバンボード (Kanban) ※Qiita一部未対応

タスク管理などに使えるカンバンボードを作成できます。
📖 公式ドキュメント

Qiita上の表示について
Qiitaでレンダリングは行われますが、意図したレイアウトとして正しく表示されません。
今後の改善に期待して記法だけ載せておきますが、プレビューには外部ツール等の利用も検討してください。

コード

kanban
  Todo[未対応]
    [リサーチ]
    [設計書の作成]
  InProgress[処理中]
    [コーディング]
  Done[完了]
    [環境構築]

プレビュー

16. アーキテクチャ図 (Architecture Diagram)

クラウド構成図などをシンプルに記述できます。
📖 公式ドキュメント

Beta機能
architecture-beta は仕様変更となる可能性があります。

コード

architecture-beta
    group api(cloud)[API Layer]
    service db(database)[Database] in api
    service server(server)[Server] in api

    db:L -- R:server

プレビュー

17. サンキーダイアグラム (Sankey Diagram)

流量や遷移を可視化する図です。
📖 公式ドキュメント

Beta機能
sankey-beta は仕様変更となる可能性があります。

コード

sankey-beta
PV,Users,5000
Users,Click,2000
Click,Conversion,500
Users,Drop,3000
Click,Drop,1500

プレビュー

18. パケット図 (Packet Diagram)

ネットワークパケットの構造を可視化します。
📖 公式ドキュメント

Beta機能
packet-beta は仕様変更となる可能性があります。

コード

packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"

プレビュー

19. 設定・テーマ変更 (Directives)

%%{init: ...}%% を記述することで、テーマや設定をカスタマイズできます。

テーマ設定について
Qiitaは標準でライト/ダークモード切り替えに対応しています。
記事側でテーマを固定（'theme': 'dark'等）すると、閲覧者の設定と矛盾して見づらくなる可能性があるため、基本的には指定不要です。特定の色味にしたい場合のみ使用してください。

テーマの変更（ダークモードなど）

%%{init: {'theme': 'dark'}}%%
flowchart LR
    A[Dark Theme] --> B[OK]

フォントサイズ等の調整

%%{init: {'themeVariables': {'fontSize': '20px'}}}%%
flowchart TD
    A[Large Font]

まとめ

Mermaidを使うと、ドキュメントと図を同じファイルで管理でき、修正もテキストエディタだけで完結します。

References

お断り
記事内容は個人の見解であり、所属組織の立場や戦略・意見を代表するものではありません。
あくまでエンジニアとしての経験や考えを発信していますので、ご了承ください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Mermaid記法 チートシート for Qiita

Mermaid記法 チートシート for Qiita

Mermaidとは？

共通シンタックス

1. フローチャート (Flowchart)

1-1. 基本構文

1-2. ノードの形状

1-3. 線の種類 (エッジ)

テキストの追加

エッジのアニメーション

1-4. サブグラフ (グループ化)

基本的な使い方

レイアウトの注意点

1-5. スタイリング (Style / Class)

1-6. リンク (Interaction) ※Qiita一部未対応

1-7. アイコン・画像の挿入

画像調整のポイント

Tips / 矢印の干渉を防ぐ (Subgraphの活用)

2. シーケンス図 (Sequence Diagram)

2-1. 基本構文

2-2. 参加者の種類 (Actor / Participant)

2-3. メッセージ線の種類

2-4. 複合フラグメント (Loop, Alt, Opt)

2-5. ノート (Note)

3. ガントチャート (Gantt Chart)

4. クラス図 (Class Diagram)

5. 状態遷移図 (State Diagram)

6. ER図 (Entity Relationship Diagram)

7. マインドマップ (Mindmap) ※Qiita未対応

8. 円グラフ (Pie Chart)

9. タイムライン (Timeline)

10. ユーザ・ジャーニー (User Journey)

11. Gitグラフ (Git Graph)

12. ブロック図 (Block Diagram)

13. 4象限チャート (Quadrant Chart)

14. XYチャート (XY Chart)

15. カンバンボード (Kanban) ※Qiita一部未対応

16. アーキテクチャ図 (Architecture Diagram)

17. サンキーダイアグラム (Sankey Diagram)

18. パケット図 (Packet Diagram)

19. 設定・テーマ変更 (Directives)

まとめ

おすすめの執筆環境

References

Mermaid記法チートシート for Qiita

Mermaid記法チートシート for Qiita