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

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

## レーン

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

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

![Design と Engineering の 2 本のレーン。一方の Sketch ステップが、他方の Build ステップにつながっています。](/diagrams/swimlane/lanes.svg)

## 方向

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

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

![Engineering というレーンに Alpha と Beta の 2 ステップが、左から右に並んでいます。](/diagrams/swimlane/direction.svg)

## レーンをまたぐ作業

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

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

![Frontend レーンの Click ステップが、Handle と Save を持つ Backend レーンを指しています。](/diagrams/swimlane/crossing.svg)

## レーンの中の形状

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

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

![Engineering レーンに Build 箱と Cache の円柱があり、Ready とラベルされたひし形を持つ Operations レーンを指しています。](/diagrams/swimlane/shapes.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。