メインコンテンツへスキップ

Mermaid 11.15.0

Mermaid スイムレーン図の書き方・早見表

Mermaidにネイティブのスイムレーンはありません。担当ごとのサブグラフで近似します。メッセージにはシーケンス図、インフラのグループにはarchitecture-betaを選びます。

Mermaidフローチャートエディターで作成 →

クイックスタート

担当ごとのサブグラフを作り、異なる担当の処理をidでつなぎます。

Mermaid
エディターで開く → 
flowchart LR
  subgraph author ["著者"]
    direction TB
    A["下書き"] --> B["修正"]
  end
  subgraph reviewer ["レビュー担当"]
    direction TB
    C["確認"] --> D["承認"]
  end
  A --> C
  C --> B
  B --> D

読み込み中…

構文リファレンス

構文リファレンス
構文意味
flowchart LR / flowchart TBflowchartを使います。swimlaneは有効な図のキーワードではありません。
subgraph laneId ["Role"] / end担当ごとに処理をまとめます。レーンとノードのidを分けます。
direction TB / direction LR内部方向を指定します。外部接続で上書きされる場合があります。
A --> B / A -->|Handoff| B担当間の処理をつなぎ、受け渡しにラベルを付けます。
laneA --> laneB / A ~~~ Bサブグラフ間や非表示の接続で順序に影響できますが、座標は固定できません。
style laneId fill:#f5f5f5,stroke:#a1a1a1サブグラフの背景と枠を直接指定します。
classDef / class A name / A:::name処理ノードに再利用するスタイルを付けます。
%% / accTitle: / accDescr:コメントとアクセシビリティ用の説明です。他のflowchart構文も利用できます。

担当ごとの構造

各処理は一つの担当に属します。グループと処理のidを分けます。グループ全体をつなぐ方が内部方向を維持しやすくなります。

Mermaid
エディターで開く → 
flowchart LR
  subgraph writer ["執筆者"]
    direction TB
    A["構成"] --> B["下書き"]
  end
  subgraph editor ["編集者"]
    direction TB
    C["レビュー"] --> D["承認する"]
  end
  writer --> editor

読み込み中…

レーン間の受け渡し

処理間の辺は正確な受け渡しを示しますが、サブグラフが全体の方向を継承する場合があります。

Mermaid
エディターで開く → 
flowchart TB
  subgraph requester ["依頼者"]
    direction LR
    A["提出"] --> B["回答"]
  end
  subgraph approver ["承認担当"]
    direction LR
    C["評価"] --> D["承認"]
  end
  A -->|依頼| C
  C -->|変更| B
  B --> D

読み込み中…

背景とスタイル

styleはレーン、classDefは処理に使います。文字と枠を読みやすくし、色は担当名を補うものと考えます。

Mermaid
エディターで開く → 
flowchart LR
  subgraph drafting ["執筆"]
    A["書く"]:::action
  end
  subgraph checking ["確認作業"]
    B["レビュー"]:::action
  end
  A --> B
  style drafting fill:#f5f5f5,stroke:#a1a1a1
  style checking fill:#d3e5ff,stroke:#0070f3
  classDef action fill:#ffffff,stroke:#171717,color:#171717

読み込み中…

固定しないレーンの間隔

rankSpacingで受け渡し、nodeSpacingで処理間の距離を調整します。順序、幅、位置はMermaidが決めます。長い工程は図を分けましょう。

Mermaid
エディターで開く → 
---
config:
  flowchart:
    nodeSpacing: 40
    rankSpacing: 70
---
flowchart LR
  subgraph drafting ["執筆"]
    A["書く"]
  end
  subgraph review ["レビュー"]
    B["確認"]
  end
  A --> B

読み込み中…

よくある間違い

swimlaneから始める

flowchartから始め、サブグラフを作ります。

誤った構文（下に修正例があります）

swimlane
  Author --> Reviewer
Mermaid
エディターで開く → 
flowchart LR
  subgraph author ["著者"]
    A["下書き"]
  end
  subgraph reviewer ["レビュー担当"]
    B["確認"]
  end
  A --> B

読み込み中…

幅が等しくなると考える

グループは内容に合わせて広がります。非表示の接続でも固定の格子は作れません。

制約

  • 順序と幅の制御は間接的で、配置によってノードが並べ替えられます。
  • レーン間の接続は内部方向を上書きする場合があります。
  • 長い工程は受け渡しが増えて読みにくくなります。
  • architecture-betaはインフラ、シーケンス図はメッセージ用です。どちらもネイティブのスイムレーンではありません。

よくある質問 (FAQ)

Mermaidに専用のスイムレーンはある？
ありません。この早見表はflowchartのサブグラフで近似しています。
幅をそろえて固定できる？
専用の設定はありません。内容とレイアウトが幅を決めます。
シーケンス図を選ぶのはどんな場合？
誰がどのメッセージをどの順序で送るかが中心の場合です。