Mermaid 流程图速查表

方向

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

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

一张从左到右的流程图，三个分别标着 Start、Middle 和 End 的方框由箭头相连。

节点形状

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

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

一张五个节点相连的流程图，每个形状都不同：矩形、圆角框、跑道形、子程序和数据库圆柱。

圆形和棱角形

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

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

斜着的那四种

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

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

一排四个流程图节点：一个右倾的平行四边形、一个左倾的平行四边形、一个梯形和一个倒梯形。

箭头类型

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

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

给边加标签

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

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

一个标着 Start 的节点带出两根箭头：一根标着 Yes 通向 Continue，一根标着 No 通向 Stop。

串联与连线长度

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

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

一排三个方框由从左到右的箭头串起来，右边更远处还有第四个方框，用一根更长的箭头连着。

归进子图

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

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

两个分组框 Backend 和 Frontend。Backend 装着一个连到数据库圆柱的 API 框，Frontend 装着一个连到该 API 的 UI 框。

给节点上样式

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

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

标签里的 Markdown

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

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

图标

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

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

一张从左到右的流程图，三个方框分别标着 User、Server 和 Database，每个标签前面都有一枚小小的 Font Awesome Free 图标：一个人、一台服务器机架和一个数据库圆柱。 — Icons: Font Awesome Free, CC BY 4.0