T-CREATOR

Mermaid 矢印・接続子チートシート：線種・方向・注釈の一覧早見

Mermaid 矢印・接続子チートシート：線種・方向・注釈の一覧早見

Mermaid で図を描く際、矢印や接続子の種類が多くて迷うことはありませんか。実線、破線、太線、双方向など、様々なバリエーションがあり、どの記法を使えばよいか分からなくなることがあるでしょう。

この記事では、Mermaid の矢印・接続子の記法を体系的に整理し、すぐに使えるチートシートとしてまとめました。線の種類、方向、注釈の付け方を網羅的に解説します。

矢印・接続子早見表

以下は、Mermaid でよく使う矢印・接続子の一覧です。必要な記法をすぐに見つけられるよう、表形式でまとめました。

基本パターン一覧

#種類記法見た目用途
1実線---A --- B方向なし接続
2実線右向き-->A --> B右向きフロー
3実線左向き<--A <-- B左向きフロー
4実線双方向<-->A <--> B双方向フロー
5破線-.-A -.- B方向なし推奨
6破線右向き-.->A -.-> B右向き推奨
7破線左向き<-.-A <-.- B左向き推奨
8破線双方向<-.->A <-.-> B双方向推奨
9太線===A === B方向なし強調
10太線右向き==>A ==> B右向き強調
11太線左向き<==A <== B左向き強調
12太線双方向<==>A <==> B双方向強調
13注釈付き実線--text-->A --text--> Bラベル付きフロー
14注釈付き破線-.text.->A -.text.-> Bラベル付き推奨
15注釈付き太線==text==>A ==text==> Bラベル付き強調

線種別クイックリファレンス

#線種記法用途
1実線---確定的なフロー、標準的な関係
2破線-.-条件付きフロー、推奨関係
3太線===強調、重要なフロー

方向別クイックリファレンス

#方向記法説明
1矢印なし---方向性のない接続
2右向き-->左から右への流れ
3左向き<--右から左への流れ
4双方向<-->相互の関係

長さ調整リファレンス

#長さ記法用途
1短い->ノード間を近づける
2標準-->通常の間隔
3長い--->ノード間を離す
4より長い---->さらに間隔を広げる

背景

Mermaid における接続子の重要性

Mermaid は、テキストベースで図を描画できる便利なツールです。フローチャート、シーケンス図、クラス図など、様々な図を Markdown 内で表現できます。

これらの図において、ノード間の関係を表現するのが 接続子（矢印・線） の役割です。接続子の種類によって、以下のような意味の違いを表現できます。

  • 実線と破線: 確定的な関係か、推奨や仮の関係か
  • 矢印の向き: データや制御の流れの方向
  • 太さ: 強調や重要度の違い
  • 注釈: 接続の条件や説明

以下の図は、接続子が図の意味をどう変えるかを示しています。

mermaidflowchart LR
  nodeA["ノードA"] -->|実線矢印| nodeB["ノードB"]
  nodeC["ノードC"] -.->|破線矢印| nodeD["ノードD"]
  nodeE["ノードE"] ==>|太線矢印| nodeF["ノードF"]

markdown```mermaid
flowchart LR
  nodeA["ノードA"] -->|実線矢印| nodeB["ノードB"]
  nodeC["ノードC"] -.->|破線矢印| nodeD["ノードD"]
  nodeE["ノードE"] ==>|太線矢印| nodeF["ノードF"]
```

図の要点:

  • 実線は確定的なフロー、破線は条件付きや推奨フロー、太線は強調を表します。
  • 矢印の種類を使い分けることで、図の情報量が格段に増します。

接続子の種類と記法の多様性

Mermaid では、以下のような多様な接続子が用意されています。

#カテゴリ例
1線の種類実線、破線、太線
2矢印の向き右、左、上、下、双方向
3注釈ラベル付き
4線の長さ短い、標準、長い

これらを組み合わせることで、数十種類の接続子を表現できますが、その分記法を覚えるのが大変です。

課題

記法の複雑さと記憶の困難さ

Mermaid の接続子記法は、直感的でない部分が多く、以下のような課題があります。

記号の組み合わせが覚えにくい

矢印の記法は、ハイフン -、ドット .、イコール = などの記号を組み合わせて表現します。例えば、以下のような違いがあります。

markdown```mermaid
// 実線矢印
A --> B

// 破線矢印
A -.-> B

// 太線矢印
A ==> B
```

記法の特徴:

  • ハイフンは実線を表します。
  • ドットは破線を表します。
  • イコールは太線を表します。

このように、記号と線種の対応を覚える必要があります。

方向指定のバリエーション

矢印の方向も、記号の組み合わせで表現します。

markdown```mermaid
// 右向き
A --> B

// 左向き
A <-- B

// 双方向
A <--> B
```

方向指定のルール:

  • > は右向き矢印を示します。
  • < は左向き矢印を示します。
  • 両方組み合わせると双方向になります。

長さの調整

線の長さも、ハイフンやドットの数で調整できますが、覚えにくいです。

markdown```mermaid
// 短い
A -> B

// 標準
A --> B

// 長い
A ---> B
```

長さ調整の原則:

  • 記号を増やすほど線が長くなります。
  • 図のレイアウト調整に便利ですが、意味的な違いはありません。

以下の図は、記法の複雑さを視覚化したものです。

mermaidflowchart TB
  syntax["接続子記法"] --> line["線の種類"]
  syntax --> direction["矢印の向き"]
  syntax --> label["注釈"]
  syntax --> length["線の長さ"]

  line --> solid["実線: ---"]
  line --> dotted["破線: -.-"]
  line --> thick["太線: ==="]

  direction --> right["右: -->"]
  direction --> left["左: <--"]
  direction --> both["双方向: <-->"]

markdown```mermaid
flowchart TB
  syntax["接続子記法"] --> line["線の種類"]
  syntax --> direction["矢印の向き"]
  syntax --> label["注釈"]
  syntax --> length["線の長さ"]

  line --> solid["実線: ---"]
  line --> dotted["破線: -.-"]
  line --> thick["太線: ==="]

  direction --> right["右: -->"]
  direction --> left["左: <--"]
  direction --> both["双方向: <-->"]
```

図で理解できる要点:

  • 接続子記法は 4 つの要素（線種、向き、注釈、長さ）の組み合わせです。
  • 各要素に複数の選択肢があり、覚えることが多いのが課題です。

ドキュメント不足と情報の分散

公式ドキュメントはありますが、全パターンを網羅した一覧表が少なく、必要な記法を探すのに時間がかかります。また、日本語の情報も限られています。

解決策

接続子チートシートの体系化

ここでは、Mermaid の接続子を体系的に整理し、すぐに使える形でまとめます。

線の種類による分類

線の種類は、大きく 3 つに分類できます。

#線種記法用途
1実線---確定的なフロー、標準的な関係
2破線-.-条件付きフロー、推奨関係
3太線===強調、重要なフロー

実線の使用例:

markdown```mermaid
// 標準的なフロー
flowchart LR
  start["開始"] --> process["処理"]
  process --> finish["終了"]
```

解説:

  • 実線は、通常の処理フローを表すのに使います。
  • 最も基本的な接続子で、迷ったら実線を使いましょう。

破線の使用例:

markdown```mermaid
// 条件付きフロー
flowchart LR
  task["タスク"] -.->|推奨| optional["オプション処理"]
  task --> required["必須処理"]
```

解説:

  • 破線は、必須でない関係や推奨事項を表します。
  • 設計図で「将来的に追加予定」などを示すのにも便利です。

太線の使用例:

markdown```mermaid
// 重要なフロー
flowchart LR
  input["入力"] ==> important["重要処理"]
  input --> normal["通常処理"]
```

解説:

  • 太線は、特に重要なフローを強調します。
  • セキュリティチェックやエラーハンドリングなど、注目させたい部分に使います。

矢印の方向による分類

矢印の向きは、以下のパターンがあります。

#方向記法説明
1矢印なし---方向性のない接続
2右向き-->左から右への流れ
3左向き<--右から左への流れ
4双方向<-->相互の関係

矢印なしの使用例:

markdown```mermaid
// 関連性のみを示す
flowchart LR
  nodeA["ノードA"] --- nodeB["ノードB"]
```

解説:

  • 矢印なしは、方向性のない単純な関連を表します。
  • クラス図の関連関係などに使います。

右向き矢印の使用例:

markdown```mermaid
// 左から右への流れ
flowchart LR
  user["ユーザー"] --> app["アプリ"]
  app --> db["データベース"]
```

解説:

  • 右向きは最も一般的な矢印です。
  • 時系列や処理の流れを表現します。

左向き矢印の使用例:

markdown```mermaid
// 右から左への流れ
flowchart LR
  db["データベース"] <-- app["アプリ"]
```

解説:

  • 左向きは、逆方向のフローを示します。
  • レスポンスや戻り値などを表現する際に使います。

双方向矢印の使用例:

markdown```mermaid
// 相互通信
flowchart LR
  client["クライアント"] <--> server["サーバー"]
```

解説:

  • 双方向は、相互にやり取りがある関係を示します。
  • API 通信や双方向バインディングなどに使います。

注釈の付け方

接続子にラベルを付けることで、関係性の詳細を説明できます。

markdown```mermaid
// 注釈付き矢印
flowchart LR
  nodeA["ノードA"] -->|"条件: X > 0"| nodeB["ノードB"]
  nodeB -.->|推奨| nodeC["ノードC"]
  nodeC ==>|重要| nodeD["ノードD"]
```

注釈の記法:

  • | または |"..."| で囲んでテキストを追加します。
  • 日本語や記号を含む場合は |"..."| を使います。
  • 注釈は矢印の中央に表示されます。

注釈の配置パターン:

markdown```mermaid
// 注釈の位置
flowchart TB
  A["A"] -->|上| B["B"]
  C["C"] -->|中央| D["D"]
  E["E"] -->|下| F["F"]
```

解説:

  • 注釈は自動的に矢印の中央に配置されます。
  • 縦方向のフローでは、注釈が矢印の横に表示されます。

長さの調整

線の長さは、記号の繰り返しで調整できます。

#長さ記法用途
1短い->ノード間を近づける
2標準-->通常の間隔
3長い--->ノード間を離す
4より長い---->さらに間隔を広げる

長さ調整の使用例:

markdown```mermaid
// 長さの違い
flowchart LR
  A["A"] -> B["B"]
  C["C"] --> D["D"]
  E["E"] ---> F["F"]
  G["G"] ----> H["H"]
```

解説:

  • ハイフンを増やすほど線が長くなります。
  • レイアウトの微調整に便利ですが、図が複雑になるので使いすぎに注意です。

全パターン一覧表

以下は、よく使う接続子の組み合わせをまとめた一覧表です。

#種類記法見た目用途
1実線---A --- B方向なし接続
2実線右向き-->A --> B右向きフロー
3実線左向き<--A <-- B左向きフロー
4実線双方向<-->A <--> B双方向フロー
5破線-.-A -.- B方向なし推奨
6破線右向き-.->A -.-> B右向き推奨
7破線左向き<-.-A <-.- B左向き推奨
8破線双方向<-.->A <-.-> B双方向推奨
9太線===A === B方向なし強調
10太線右向き==>A ==> B右向き強調
11太線左向き<==A <== B左向き強調
12太線双方向<==>A <==> B双方向強調
13注釈付き実線--text-->A --text--> Bラベル付きフロー
14注釈付き破線-.text.->A -.text.-> Bラベル付き推奨
15注釈付き太線==text==>A ==text==> Bラベル付き強調

表の活用方法:

  • 必要な接続子を表から探して、記法をコピーして使いましょう。
  • よく使うパターンをブックマークしておくと便利です。

以下の図は、主要な接続子パターンを視覚的に比較したものです。

mermaidflowchart TB
  subgraph solid["実線グループ"]
    s1["A"] --- s2["B"]
    s3["C"] --> s4["D"]
    s5["E"] <--> s6["F"]
  end

  subgraph dotted["破線グループ"]
    d1["G"] -.- d2["H"]
    d3["I"] -.-> d4["J"]
    d5["K"] <-.-> d6["L"]
  end

  subgraph thick["太線グループ"]
    t1["M"] === t2["N"]
    t3["O"] ==> t4["P"]
    t5["Q"] <==> t6["R"]
  end

markdown```mermaid
flowchart TB
  subgraph solid["実線グループ"]
    s1["A"] --- s2["B"]
    s3["C"] --> s4["D"]
    s5["E"] <--> s6["F"]
  end

  subgraph dotted["破線グループ"]
    d1["G"] -.- d2["H"]
    d3["I"] -.-> d4["J"]
    d5["K"] <-.-> d6["L"]
  end

  subgraph thick["太線グループ"]
    t1["M"] === t2["N"]
    t3["O"] ==> t4["P"]
    t5["Q"] <==> t6["R"]
  end
```

図で理解できる要点:

  • 3 つのグループ（実線、破線、太線）それぞれに、矢印なし・単方向・双方向があります。
  • 実際の図で見ると、線種と方向の違いが明確に分かります。

具体例

フローチャートでの使用例

実際のフローチャートで、様々な接続子を組み合わせた例を見てみましょう。

ログイン処理フロー

以下は、ログイン処理のフローチャートです。

mermaidflowchart TB
  start["ログイン開始"] --> input["ID/パスワード入力"]
  input --> validate["入力検証"]
  validate -->|有効| auth["認証処理"]
  validate -->|無効| error["エラー表示"]
  error --> input
  auth ==>|認証成功| success["ホーム画面"]
  auth -.->|認証失敗| retry["リトライ確認"]
  retry -->|"リトライ回数 < 3"| input
  retry -->|"リトライ回数 >= 3"| lock["アカウントロック"]
  lock --> finish["処理終了"]
  success --> finish

markdown```mermaid
flowchart TB
  start["ログイン開始"] --> input["ID/パスワード入力"]
  input --> validate["入力検証"]
  validate -->|有効| auth["認証処理"]
  validate -->|無効| error["エラー表示"]
  error --> input
  auth ==>|認証成功| success["ホーム画面"]
  auth -.->|認証失敗| retry["リトライ確認"]
  retry -->|"リトライ回数 < 3"| input
  retry -->|"リトライ回数 >= 3"| lock["アカウントロック"]
  lock --> finish["処理終了"]
  success --> finish
```

フローの解説:

  • 実線矢印は通常の処理フローを表します。
  • 太線矢印（==>）は認証成功という重要なフローを強調しています。
  • 破線矢印（-.-> ）は、失敗時の推奨フローを示しています。
  • 注釈付き矢印で条件分岐を明確にしています。

エラーハンドリングパターン

エラー処理の流れを接続子で表現した例です。

mermaidflowchart LR
  api["API呼び出し"] --> check["レスポンス確認"]
  check -->|"ステータス: 200"| normal["正常処理"]
  check -.->|"ステータス: 400"| validation["バリデーションエラー"]
  check -.->|"ステータス: 500"| server["サーバーエラー"]
  check ==>|"ステータス: 401"| auth["認証エラー"]

  validation --> log["ログ記録"]
  server --> log
  auth ==> logout["強制ログアウト"]

  log --> retry["リトライ判定"]
  retry -->|可能| api
  retry -->|不可| abort["処理中断"]

markdown```mermaid
flowchart LR
  api["API呼び出し"] --> check["レスポンス確認"]
  check -->|"ステータス: 200"| normal["正常処理"]
  check -.->|"ステータス: 400"| validation["バリデーションエラー"]
  check -.->|"ステータス: 500"| server["サーバーエラー"]
  check ==>|"ステータス: 401"| auth["認証エラー"]

  validation --> log["ログ記録"]
  server --> log
  auth ==> logout["強制ログアウト"]

  log --> retry["リトライ判定"]
  retry -->|可能| api
  retry -->|不可| abort["処理中断"]
```

パターンの活用:

  • 正常系は実線で表現しています。
  • エラー系は破線で区別しています。
  • 特に重要な認証エラーは太線で強調しています。

シーケンス図での使用例

シーケンス図でも、矢印の種類を使い分けることができます。

API 通信シーケンス

mermaidsequenceDiagram
  participant User as ユーザー
  participant App as アプリ
  participant API as API サーバー
  participant DB as データベース

  User->>App: データ要求
  App->>API: GET /data
  API->>DB: SELECT クエリ
  DB-->>API: 結果セット
  API-->>App: JSON レスポンス
  App-->>User: 画面表示

  Note over User,DB: 実線矢印は同期通信を示す

  User--)App: 非同期イベント
  App--)API: POST /event

  Note over User,API: 破線矢印は非同期通信を示す

markdown```mermaid
sequenceDiagram
  participant User as ユーザー
  participant App as アプリ
  participant API as API サーバー
  participant DB as データベース

  User->>App: データ要求
  App->>API: GET /data
  API->>DB: SELECT クエリ
  DB-->>API: 結果セット
  API-->>App: JSON レスポンス
  App-->>User: 画面表示

  Note over User,DB: 実線矢印は同期通信を示す

  User--)App: 非同期イベント
  App--)API: POST /event

  Note over User,API: 破線矢印は非同期通信を示す
```

シーケンス図の矢印記法:

  • -> は実線矢印（同期メッセージ）を表します。
  • --> は破線矢印（応答メッセージ）を表します。
  • --) は破線矢印（非同期メッセージ）を表します。

エラー時のシーケンス

mermaidsequenceDiagram
  participant Client as クライアント
  participant Server as サーバー
  participant Logger as ログサーバー

  Client->>Server: リクエスト送信
  Server->>Server: 処理実行

  alt 正常系
    Server-->>Client: 200 OK
  else エラー発生
    Server->>Logger: エラーログ送信
    Logger-->>Server: 送信完了
    Server-->>Client: 500 Error
  end

  Note over Client,Logger: alt-else で条件分岐を表現

markdown```mermaid
sequenceDiagram
  participant Client as クライアント
  participant Server as サーバー
  participant Logger as ログサーバー

  Client->>Server: リクエスト送信
  Server->>Server: 処理実行

  alt 正常系
    Server-->>Client: 200 OK
  else エラー発生
    Server->>Logger: エラーログ送信
    Logger-->>Server: 送信完了
    Server-->>Client: 500 Error
  end

  Note over Client,Logger: alt-else で条件分岐を表現
```

条件分岐の表現:

  • alt ブロックで正常系とエラー系を分けています。
  • 実線と破線を使い分けて、リクエストとレスポンスを区別しています。

クラス図での使用例

クラス図では、クラス間の関係を矢印で表現します。

関連と依存の表現

mermaidclassDiagram
  class UserService {
    +getUser()
    +createUser()
  }

  class User {
    +id
    +name
    +email
  }

  class Database {
    +query()
    +execute()
  }

  class Logger {
    +log()
    +error()
  }

  UserService --> User : 使用
  UserService --> Database : 依存
  UserService ..> Logger : 利用
  User --> Database : 保存先

markdown```mermaid
classDiagram
  class UserService {
    +getUser()
    +createUser()
  }

  class User {
    +id
    +name
    +email
  }

  class Database {
    +query()
    +execute()
  }

  class Logger {
    +log()
    +error()
  }

  UserService --> User : 使用
  UserService --> Database : 依存
  UserService ..> Logger : 利用
  User --> Database : 保存先
```

クラス図の矢印記法:

  • --> は関連（Association）を表します。
  • ..> は依存（Dependency）を表します。
  • 実線は強い結びつき、破線は弱い結びつきを示します。

継承と実装の表現

mermaidclassDiagram
  class Animal {
    <<interface>>
    +eat()
    +sleep()
  }

  class Mammal {
    <<abstract>>
    +breathe()
  }

  class Dog {
    +bark()
  }

  class Cat {
    +meow()
  }

  Animal <|.. Mammal : 実装
  Mammal <|-- Dog : 継承
  Mammal <|-- Cat : 継承

markdown```mermaid
classDiagram
  class Animal {
    <<interface>>
    +eat()
    +sleep()
  }

  class Mammal {
    <<abstract>>
    +breathe()
  }

  class Dog {
    +bark()
  }

  class Cat {
    +meow()
  }

  Animal <|.. Mammal : 実装
  Mammal <|-- Dog : 継承
  Mammal <|-- Cat : 継承
```

継承関係の記法:

  • <|-- は継承（Inheritance）を表します。
  • <|.. は実装（Realization）を表します。
  • 矢印の向きは、子クラスから親クラスへ向けます。

状態図での使用例

状態図では、状態遷移を矢印で表現します。

注文状態の遷移

mermaidstateDiagram-v2
  [*] --> Created : 注文作成
  Created --> Confirmed : 確認
  Confirmed --> Shipped : 出荷
  Shipped --> Delivered : 配達完了
  Delivered --> [*] : 完了

  Created --> Cancelled : キャンセル
  Confirmed --> Cancelled : キャンセル
  Cancelled --> [*] : 終了

  Shipped --> Returned : 返品
  Delivered --> Returned : 返品
  Returned --> Refunded : 返金
  Refunded --> [*] : 終了

markdown```mermaid
stateDiagram-v2
  [*] --> Created : 注文作成
  Created --> Confirmed : 確認
  Confirmed --> Shipped : 出荷
  Shipped --> Delivered : 配達完了
  Delivered --> [*] : 完了

  Created --> Cancelled : キャンセル
  Confirmed --> Cancelled : キャンセル
  Cancelled --> [*] : 終了

  Shipped --> Returned : 返品
  Delivered --> Returned : 返品
  Returned --> Refunded : 返金
  Refunded --> [*] : 終了
```

状態遷移の表現:

  • --> で状態の遷移を示します。
  • : の後にトリガーとなるイベントを記述します。
  • [*] は開始・終了状態を表します。

以下の図は、接続子の使い分けパターンを整理したものです。

mermaidflowchart TB
  purpose["接続子の選び方"] --> flow["フローの種類"]
  flow --> normal["通常フロー<br/>→ 実線矢印"]
  flow --> optional["オプション<br/>→ 破線矢印"]
  flow --> critical["重要フロー<br/>→ 太線矢印"]

  purpose --> relation["関係性の種類"]
  relation --> directed["方向あり<br/>→ 矢印付き"]
  relation --> undirected["方向なし<br/>→ 矢印なし"]
  relation --> bidirectional["双方向<br/>→ 双方向矢印"]

  purpose --> context["文脈情報"]
  context --> labeled["条件・説明あり<br/>→ 注釈付き"]
  context --> plain["シンプル<br/>→ 注釈なし"]

markdown```mermaid
flowchart TB
  purpose["接続子の選び方"] --> flow["フローの種類"]
  flow --> normal["通常フロー<br/>→ 実線矢印"]
  flow --> optional["オプション<br/>→ 破線矢印"]
  flow --> critical["重要フロー<br/>→ 太線矢印"]

  purpose --> relation["関係性の種類"]
  relation --> directed["方向あり<br/>→ 矢印付き"]
  relation --> undirected["方向なし<br/>→ 矢印なし"]
  relation --> bidirectional["双方向<br/>→ 双方向矢印"]

  purpose --> context["文脈情報"]
  context --> labeled["条件・説明あり<br/>→ 注釈付き"]
  context --> plain["シンプル<br/>→ 注釈なし"]
```

図で理解できる要点:

  • 接続子の選択は、フローの種類、関係性、文脈の 3 つの観点から判断します。
  • それぞれの観点で最適な記法を選ぶことで、分かりやすい図になります。

実践的なチートシート

実務でよく使う接続子パターンを、用途別にまとめました。

データフロー図

markdown```mermaid
// データの流れを示す
flowchart LR
  input["入力"] --> process["処理"]
  process --> output["出力"]
  process -.->|ログ| logger["ロガー"]
  process ==>|エラー| error["エラーハンドラ"]
```

活用シーン:

  • データパイプラインの設計
  • ETL 処理の可視化
  • 処理フローの説明

条件分岐パターン

markdown```mermaid
// 条件による分岐
flowchart TB
  check["条件チェック"]
  check -->|"条件A"| pathA["処理A"]
  check -->|"条件B"| pathB["処理B"]
  check -->|"その他"| pathC["デフォルト処理"]
  pathA --> merge["結果統合"]
  pathB --> merge
  pathC --> merge
```

活用シーン:

  • ビジネスロジックの分岐
  • 権限チェックフロー
  • エラーハンドリング

並列処理パターン

markdown```mermaid
// 並列実行
flowchart TB
  start["開始"] --> fork["分岐"]
  fork --> task1["タスク1"]
  fork --> task2["タスク2"]
  fork --> task3["タスク3"]
  task1 --> join["統合"]
  task2 --> join
  task3 --> join
  join --> finish["完了"]
```

活用シーン:

  • マルチスレッド処理
  • 並列 API 呼び出し
  • バッチ処理の分散

ループパターン

markdown```mermaid
// ループ処理
flowchart LR
  init["初期化"] --> condition["条件判定"]
  condition -->|継続| process["処理実行"]
  process --> update["状態更新"]
  update --> condition
  condition -->|終了| finish["ループ終了"]
```

活用シーン:

  • 繰り返し処理の説明
  • リトライロジック
  • ポーリング処理

まとめ

Mermaid の矢印・接続子は、線の種類、方向、注釈の組み合わせで多様な表現が可能です。本記事では、以下の内容をまとめました。

押さえるべきポイント

  1. 線の種類は 3 つ

    • 実線（---）: 確定的なフロー
    • 破線（-.-）: 条件付き・推奨フロー
    • 太線（===）: 重要なフロー

  2. 矢印の方向は 4 パターン

    • 矢印なし（---）: 方向性のない接続
    • 右向き（-->）: 左から右への流れ
    • 左向き（<--）: 右から左への流れ
    • 双方向（<-->）: 相互関係

  3. 注釈で意味を明確化

    • |ラベル| または |"ラベル"| で条件や説明を追加
    • 複雑な分岐では注釈が必須

  4. 長さで レイアウト調整

    • ハイフンの数で線の長さを調整
    • 図の見やすさを向上

使い分けの原則

接続子を選ぶ際は、以下の質問を自分に問いかけましょう。

  • この関係は確定的か、それとも条件付きか？ → 実線 or 破線
  • 方向性はあるか？ → 矢印の有無
  • 強調したいフローか？ → 太線
  • 条件や説明が必要か？ → 注釈の追加

これらを意識することで、読み手に伝わりやすい図が作成できます。

実践のコツ

  1. シンプルに始める: 最初は実線矢印だけで描き、必要に応じて破線や太線を追加しましょう。
  2. 一貫性を保つ: 同じ図内では、同じ意味の関係には同じ接続子を使いましょう。
  3. 注釈を活用する: 複雑な条件は、注釈で明示すると分かりやすくなります。
  4. チートシートを手元に: 本記事の一覧表をブックマークして、必要な時にすぐ参照できるようにしましょう。

Mermaid の接続子をマスターすることで、ドキュメントの質が格段に向上します。本チートシートを活用して、効果的な図解を作成してください。

関連リンク

Mermaidの記事Mermaid

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る