Mermaid スイムレーン図のチートシート

責任ごとに 1 本ずつ割り振った処理。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

レーン

レーンはサブグラフで、サブグラフのタイトルがレーン名になります。

swimlane-beta TB
  subgraph Engineering
    a[Build]
  end
  subgraph Design
    b[Sketch]
  end
  b --> a

フローチャートと同じキーワードです。LR はレーンを横に並べ、TB は縦に積みます。

swimlane-beta LR
  subgraph Engineering
    a[Alpha]
    b[Beta]
  end
  a --> b

2 本のレーンのあいだの矢印は引き継ぎです。図が語っているのはレーンではなく、その引き継ぎです。

swimlane-beta TB
  subgraph Frontend
    ui[Click]
  end
  subgraph Backend
    api[Handle]
    db[Save]
  end
  ui --> api
  api --> db

ノード形状はフローチャートのものと同じです。箱、円柱、ひし形。

swimlane-beta TB
  subgraph Engineering
    a[Build]
    b[(Cache)]
  end
  subgraph Operations
    c{Ready?}
  end
  a --> c