# Mermaid 流程图速查表

方框、箭头和分支——大多数人说到 Mermaid 时指的那种图。

## 方向

第一行决定流向：TD 和 TB 一样，LR 和 RL 是横着走。

```mermaid
flowchart LR
  A[Start] --> B[Middle] --> C[End]
```

![一张从左到右的流程图，三个分别标着 Start、Middle 和 End 的方框由箭头相连。](/diagrams/flowchart/direction.svg)

## 节点形状

你敲的方括号就是你会得到的形状。这五种是 Mernyx 画成日常方框的。

```mermaid
flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]
```

![一张五个节点相连的流程图，每个形状都不同：矩形、圆角框、跑道形、子程序和数据库圆柱。](/diagrams/flowchart/shapes.svg)

## 圆形和棱角形

日常那组的其余部分：圆形、判断菱形、六边形和斜切形。

```mermaid
flowchart LR
  A((Circle)) --> B(((Double circle)))
  B --> C{Diamond}
  C --> D{{Hexagon}}
  D --> E>Asymmetric]
```

![一张五个节点相连的流程图，分别画成圆形、双圈、菱形、六边形和不对称形。](/diagrams/flowchart/shapes-round.svg)

## 斜着的那四种

平行四边形和梯形。正斜杠往一边歪，反斜杠往另一边歪。

```mermaid
flowchart LR
  A[/Parallelogram/] --> B[\Alternate\]
  B --> C[/Trapezoid\]
  C --> D[\Inverted/]
```

![一排四个流程图节点：一个右倾的平行四边形、一个左倾的平行四边形、一个梯形和一个倒梯形。](/diagrams/flowchart/shapes-slanted.svg)

## 箭头类型

连接两个节点有四种写法：实线、虚线、开放线和粗线。

```mermaid
flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]
```

![左边一个节点用实线箭头、虚线箭头、开放线和粗箭头分别连到右边四个节点。](/diagrams/flowchart/edges.svg)

## 给边加标签

有两种写法。标签长的时候，竖线那种读起来更顺。

```mermaid
flowchart LR
  A[Start] -->|Yes| B[Continue]
  A -- No --> C[Stop]
```

![一个标着 Start 的节点带出两根箭头：一根标着 Yes 通向 Continue，一根标着 No 通向 Stop。](/diagrams/flowchart/edge-labels.svg)

## 串联与连线长度

节点可以串在一行里，多写的短横线会把节点推得更远。

```mermaid
flowchart LR
  A[One] --> B[Two] --> C[Three]
  B ----> D[Further away]
```

![一排三个方框由从左到右的箭头串起来，右边更远处还有第四个方框，用一根更长的箭头连着。](/diagrams/flowchart/chaining.svg)

## 归进子图

子图是包住里面缩进节点的、带标签的框。

```mermaid
flowchart TB
  subgraph Backend
    API[API] --> DB[(Database)]
  end
  subgraph Frontend
    UI[UI] --> API
  end
```

![两个分组框 Backend 和 Frontend。Backend 装着一个连到数据库圆柱的 API 框，Frontend 装着一个连到该 API 的 UI 框。](/diagrams/flowchart/subgraph.svg)

## 给节点上样式

style 改一个节点；classDef 给样式起名，好反复用。

```mermaid
flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet
```

![两个方框由箭头相连。右边的框填成珊瑚色，左边的框填成浅灰。](/diagrams/flowchart/styling.svg)

## 标签里的 Markdown

用反引号把标签包起来，文字就可以加粗、斜体或用代码样式。

```mermaid
flowchart LR
  A["`**Bold** text`"]
  B["``inline code``"]
```

![两个方框，一个标签是加粗文字，另一个标签里是等宽的行内代码。](/diagrams/flowchart/markdown-labels.svg)

## 图标

Font Awesome Free，用 Mermaid 的写法：名字写在标签里，Mernyx 画出字形。认不出的图标会留下一个图标宽的空白，而不是让整张图失败。

```mermaid
flowchart LR
  A([fa:fa-user User]) --> B([fa:fa-server Server])
  B --> C([fa:fa-database Database])
```

![一张从左到右的流程图，三个方框分别标着 User、Server 和 Database，每个标签前面都有一枚小小的 Font Awesome Free 图标：一个人、一台服务器机架和一个数据库圆柱。](/diagrams/flowchart/icons.svg)

Icons: Font Awesome Free, CC BY 4.0

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。