Mermaid記法の基本まとめ【初心者向け】

ブログにフローチャートを埋め込めるMermaid記法について、1年とちょっと前に記事にしました。

チャート化することで話の展開が可視化されます。以前は多用していこうと思っていたのですが、最近はあまり使えていません。

使わなくなると、基本的な文法もすっかり忘れています。

覚えておきたい基本項目をまとめました。

Mermaidとは？
最初に覚えるべき図の種類
基本：フローチャート記法
練習方法・おすすめの環境

Mermaidとは？

テキストで図（フローチャート、シーケンス図など）を描ける記法。
Markdownと一緒に使える（ブログやNotion、GitHubで活用可）

最初に覚えるべき図の種類

図の種類	用途	宣言方法
フローチャート	処理の流れを視覚化	`graph TD` または `graph LR`
シーケンス図	登場人物間のやり取り（時間軸に沿って）	`sequenceDiagram`
ガントチャート	タスクとスケジュールの視覚化	`gantt`
クラス図	クラスやオブジェクトの関係（UML的な用途）	`classDiagram`

基本：フローチャート記法

図の向き指定

graph TD → 上から下（Top Down）
graph LR → 左から右（Left to Right）

ノード（要素）の書き方

形状	記法	例
四角	`A[テキスト]`	`A[開始]`
丸（楕円）	`A(テキスト)`	`A(開始)`
ダイヤ（判断）	`A{条件}`	`A{OK?}`
テキストのみ	`A>テキスト]`	`A>終了]`

矢印の書き方

矢印 → -->
矢印にラベル → -- ラベル -->

フローチャート例

mermaidコード

graph TD
A[スタート] --> B{条件分岐}
B -- Yes --> C[処理1]
B -- No --> D[処理2]
C --> E[終了]
D --> E

graph TD
A[スタート] --> B{条件分岐}
B -- Yes --> C[処理1]
B -- No --> D[処理2]
C --> E[終了]
D --> E

シーケンス図の例

mermaidコード

sequenceDiagram
    participant ユーザー
    participant サーバー

    ユーザー->>サーバー: リクエスト送信
    サーバー-->>ユーザー: レスポンス返却

sequenceDiagram
    participant ユーザー
    participant サーバー

    ユーザー->>サーバー: リクエスト送信
    サーバー-->>ユーザー: レスポンス返却

ガントチャートの例

mermaidコード

gantt
    title プロジェクト進行
    dateFormat  YYYY-MM-DD
    section 企画
    タスクA :a1, 2025-03-24, 3d
    タスクB :after a1, 2d

%%{init: {"gantt": {"axisFormat": "%m/%d"}}}%%
gantt
    title プロジェクト進行
    dateFormat  YYYY-MM-DD
    section 企画
    タスクA :a1, 2025-03-24, 3d
    タスクB :after a1, 2d

日付が重なって全く見えませんね。