# Mermaid 泳道图速查表

一个流程按负责人分成几条泳道。

## 泳道

一条泳道就是一个子图，子图的标题就是泳道的名字。

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

![两条泳道 Design 和 Engineering，其中一条里的 Sketch 步骤连着另一条里的 Build 步骤。](/diagrams/swimlane/lanes.svg)

## 方向

和流程图同一个关键字：LR 让泳道横着走，TB 把它们竖着叠起来。

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

![一条叫 Engineering 的泳道装着两个步骤 Alpha 和 Beta，从左到右排开。](/diagrams/swimlane/direction.svg)

## 跨泳道的工作

两条泳道之间的箭头是一次交接。图讲的是这次交接，不是泳道本身。

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

![一条 Frontend 泳道里的 Click 步骤指向 Backend 泳道，后者装着 Handle 和 Save。](/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 原生，不经过浏览器。