Mermaidのフローチャートを書くには：方向、ノード、矢印。

方向

1行目で図の種類と方向を指定します。flowchartと、古いgraphのどちらも使えます。

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

ページの幅に収まる短い流れにはLR、長い流れにはTDを選びます。

ノードの形

ノードは、IDと、そのあとに括弧で囲んだテキストで書きます。括弧の種類で形が決まります。

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

括弧のないノードは、IDがそのまま表示されます。ノードはあとでIDだけで再び指定できるので、形とテキストは1回だけ書けば済みます。

リンクとラベル

リンクは2つのノードをつなぎます。矢印の形が、つながりの種類を表します。

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• -->は矢印、---は矢じりのない線
• -.->は点線の矢印、==>は太い矢印
• -->|label|または-- label -->でリンクにテキストを付ける
• A --> B & Cは1つのノードから複数にリンクし、A --> B --> Cはリンクをつなげる

ノードにもっと余裕が必要なときは、---->のようにハイフンを足してリンクを長くします。

サブグラフ

サブグラフは、ノードをラベル付きの枠にまとめます。subgraphで始まり、endで終わります。

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

括弧の中の言葉がタイトルで、その前の言葉がリンク先に指定できるIDです。サブグラフの中に独自のdirection LRの行を書けますが、中のノードが外にリンクしていると、その方向は無視されます。

完全な例

まとめとして、分岐、戻りのループ、グループ化した手順を含む小さなリリースの流れを示します。

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

上から読みます。スタジアム形が開始、ひし形が質問、ラベル付きの矢印が答え、2つのノードを囲む枠がレビューです。分岐を質問、矢印をその答えとして名前を付けると、説明なしで読めるフローチャートになります。

コメントとスタイル

%%で始まる行はコメントで、描画されません。ノードに色を付けるには、クラスを定義して適用します。

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

スタイルは控えめにしましょう。たいていのフローチャートは、色が少ないほうが読みやすく、ライトテーマとダークテーマで見え方が変わることもあります。

よくある間違い

• 小文字のendをノードのテキストに使うと、図が崩れます。Endと書くか、テキストを引用符で囲みます。
• リンクのすぐ後ろで、oやxで始まるノードID（A---oBなど）は、円やバツのリンクとして読まれます。スペースを入れるか、大文字にします。
• ラベルの中の特殊文字。括弧やコロンはダブルクォートで囲む必要があります：A["Save (draft)"]。
• 1行目がない。flowchart TDがないと何も描かれません。
• ノードが多すぎる。30個の四角があるフローチャートは読みにくくなります。分割するか、サブグラフを使います。

図が失敗すると、Mermaidがエラーメッセージを表示し、テキストはファイルに残るので修正できます。

描画する

GitHubはMarkdownファイルのMermaidブロックを描画し、DotMDも同様に、オフラインで、ページに合わせたライトまたはダークテーマで描きます。エディタではInsert → Diagramで動作するフローチャートがドキュメントに挿入され、プレビューが入力に合わせて描き直されます。同じガイドで、シーケンス図、クラス図、状態遷移図、ER図、ガント図も扱っています。フェンスの構文については、Markdownのコードブロックをご覧ください。

Mermaidのフローチャートに関するよくある質問

その他の質問