文档

Mermaid 流程图写法入门

用方框、判断节点与带标签的箭头,画出从上到下或从左到右的流程图;并说明常用形状、箭头样式、subgraph 分组,以及让标签保持可读的写作建议。

滚轮缩放 · 拖拽平移

流程图描述过程。步骤放在方框里,箭头表示顺序,菱形用来问「是或否」。

先选方向

  • flowchart TD — 从上到下(适合短路径)
  • flowchart LR — 从左到右(适合横向流水线)

也可以写 flowchart TB,和 TD 意思相同。

给节点起名并连线

每个节点先写 id,再在括号里写读者看到的文字:

flowchart LR
  A[收集] --> B[审阅]
  B --> C[发布]

A、B、C 是 id。[] 里的文字才是展示内容。要连回某个节点时,复用同一个 id。

常用形状

形状 写法 适合
矩形 A[步骤] 普通动作
圆角 A([开始]) 开始或结束
菱形 A{问题?} 判断
胶囊 A([标签]) 柔和的起止
圆形 A((备注)) 小状态

不必用全。矩形加一个菱形,就够写多数草稿。

给箭头加说明

说明文字放在 | 之间:

flowchart TD
  Ask{通过?} -->|是| Ship[发布]
  Ask -->|否| Fix[修改]
  Fix --> Ask

说明要短:是、否、重试。长句子放进方框,不要堆在箭头上。

箭头样式

  • --> 实线箭头
  • -.-> 虚线箭头
  • ==> 粗箭头

可选路径用虚线。主路径用粗线,更容易扫读。

把相关步骤分组

图变大时,用 subgraph 包一组:

flowchart TD
  subgraph 准备
    A[起草] --> B[审阅]
  end
  B --> C[发布]

给分组起名,但别嵌套太深。分组一多,图就难扫。

写作建议

  • 一个节点只表达一件事。
  • 多用动词:校验令牌,少用空洞长句。
  • 预览里文字折行超过两三次,就缩短文案。
  • 先画成功路径,读通后再加失败分支。