Mermaidの線・矢印・点線まとめ【コピペ例つき】

Mermaidのフローチャートでは、ノード間の記号を変えるだけで、実線・点線・太線・矢印を使い分けられます。

よく使う書き方を先にまとめると、次のとおりです。

最小のコードはこちらです。

flowchart LR
    A[開始] --> B[確認]
    B -.-> C[任意の処理]
    B ==> D[重要な処理]
    C --> E[完了]
    D --> E

線と矢印の基本

通常の矢印

flowchart LR
    A[開始] --> B[終了]

処理や情報が進む方向を示す、最も基本的な記法です。

矢印なしの線

flowchart LR
    A[サービスA] --- B[共通データ]

方向ではなく、関連や接続だけを示したいときに使います。

点線と点線矢印

flowchart LR
    A[必須処理] -.- B[補足]
    B -.-> C[任意処理]

• -.-: 矢印なしの点線
• -.->: 点線の矢印

任意処理、参照関係、例外ルートなど、主経路と区別したい関係に向いています。

太線と太線矢印

flowchart LR
    A[通常] === B[重要]
    B ==> C[最重要の処理]

• ===: 矢印なしの太線
• ==>: 太線の矢印

太線を多用すると逆に重要度が伝わりにくくなるため、強調箇所へ絞ります。

双方向・丸・バツの矢印

双方向矢印

flowchart LR
    A[クライアント] <--> B[API]

リクエストとレスポンス、同期、相互参照などを表せます。

丸付き・バツ付き

flowchart LR
    A[処理] --o B[保留]
    A --x C[中止]

丸やバツの意味はMermaid側で固定されているわけではありません。凡例やラベルを添え、図の中で意味を統一してください。

線の途中にラベルを入れる

最も読みやすいのは|ラベル|を使う方法です。

flowchart LR
    A{ログイン成功?} -->|はい| B[ダッシュボード]
    A -->|いいえ| C[エラー表示]

次の形式でも書けます。

flowchart LR
    A -- 承認 --> B
    B -. 差し戻し .-> C
    C == 再確認 ==> A

記号の位置が分かりにくくなった場合は、最初の|ラベル|形式へ戻すと修正しやすくなります。

線を長くする

Mermaidでは、記号を増やすと最低限またぐ階層数を増やせます。

flowchart LR
    A --> B
    A ----> C

ただし、最終的な長さはレイアウトエンジンが全体を見て決めます。記号を増やしても、ピクセル単位の長さを直接指定するわけではありません。

線を直角にする

検索されることの多い「直角の線」は、フローチャートのcurveをstep系へ変更して作ります。現在の公式設定方法では、図の先頭にYAML frontmatterを置けます。

---
config:
  flowchart:
    curve: step
---
flowchart LR
    A[入力] --> B[確認]
    B --> C[出力]

候補にはstep、stepBefore、stepAfterがあります。環境によってfrontmatterへ対応していない場合は、埋め込み側のMermaid設定でflowchart.curveを指定してください。

線の色と太さを変える

linkStyleは、線がコード内で定義された順番を0から数えて指定します。

flowchart LR
    A --> B
    B --> C
    C --> D

    linkStyle 0 stroke:#2563eb,stroke-width:3px
    linkStyle 1 stroke:#f59e0b,stroke-width:3px,stroke-dasharray:5 5

上の例では、最初の線が0、2本目が1です。線を途中へ追加すると番号が変わるため、大きな図ではスタイル指定箇所をまとめて管理します。

見えない線で配置を整える

~~~は線を表示せず、ノード間の配置関係だけを作ります。

flowchart LR
    A[左] ~~~ B[中央]
    B --> C[右]

便利ですが、見えない依存関係が増えるとコードを理解しにくくなります。まずTB・LRなど全体方向や、サブグラフで解決できないか確認してください。

よくあるエラー

endで図が壊れる

公式ドキュメントでは、ノードに小文字のendを使うとフローチャートが壊れる場合があると注意されています。Endへ変えるか、ラベルを引用符で囲みます。

flowchart LR
    A --> B["end"]

o・xから始まるノード名で終端が変わる

A---oBは、oBというノードではなく丸付きの線として解釈されます。スペースを入れるか、ノードIDを大文字から始めます。

flowchart LR
    A --- Ops

点線のラベルで構文エラーになる

記号と文章の組み合わせが分からなくなったら、A -.->|ラベル| Bの形を使います。

graph LR;
    A -.->|任意| B

公式エディタでは動くのにNotionなどで動かない

サービスに組み込まれたMermaidのバージョンや許可設定が異なる可能性があります。Mermaid Live Editorでコードを確認し、埋め込み先が対応している構文へ絞ってください。

まとめ

まず覚える記法は次の4つです。

• 通常の矢印: -->
• 矢印なし: ---
• 点線矢印: -.->
• 太線矢印: ==>

その後、ラベル、双方向、長さ、curve: stepによる直角線を必要に応じて追加すると、図を複雑にしすぎず表現を増やせます。

フローチャート全体の作り方はMermaidフローチャート入門、ノード形状はMermaidのノード形状まとめも参照してください。

参考資料

• Mermaid公式: Flowcharts Syntax
• Mermaid公式: Configuration
• Mermaid Live Editor