Mermaidフローチャートの基本 — 構文、ノード、矢印

Mermaidフローチャートとは？

フローチャートはMermaidで最もよく使われるダイアグラムタイプです。ノード（図形）をエッジ（矢印）でつなぎ、プロセス、意思決定ツリー、ワークフローを表現します。Mermaidを使えば、数行のテキストを書くだけでフローチャートを作成できます。

方向キーワード

すべてのフローチャートは、レイアウトを制御する方向キーワードで始まります：

キーワード	方向
TB または TD	上から下
BT	下から上
LR	左から右
RL	右から左

ノードの形状

Mermaidは複数のノード形状をサポートしており、それぞれ独自の括弧構文があります：

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C -->|Yes| D[[Subroutine]]
    C -->|No| E[(Database)]
    D --> F((Circle))

• [text] — 四角形（処理ステップ）
• (text) — 角丸四角形（開始/終了）
• {text} — ひし形（分岐）
• [[text]] — サブルーチン
• [(text)] — シリンダー（データベース）
• ((text)) — 円

矢印の種類

エッジはノードを接続し、さまざまなスタイルで表現できます：

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

• --> 実線矢印
• --- 実線（矢印なし）
• -.-> 点線矢印
• ==> 太線矢印
• -->|text| ラベル付き矢印

完全な例

flowchart TD
    Start([Start]) --> Input[/Get user input/]
    Input --> Validate{Is input valid?}
    Validate -->|Yes| Process[Process data]
    Validate -->|No| Error[Show error message]
    Error --> Input
    Process --> Output[/Display result/]
    Output --> End([End])

この例は、複数のノード形状とラベル付き分岐を使った典型的なフォームバリデーションフローを示しています。平行四辺形（/text/）は入出力操作に使用されます。