如何编写 mermaid 时序图

时序图展示的是谁在什么顺序下与谁通信。用 mermaid 编写时序图所花的时间,大致相当于把流程口述一遍所需的时间,这也是它在代码库中留存最久的图表类型的原因。下面所有内容都可以直接复制粘贴到编辑器中使用。

最简写法

先声明图表类型,然后每条消息写一行。参与者会在首次出现时按顺序自动创建。

sequenceDiagram
  User->>API: POST /orders
  API->>DB: INSERT order
  DB-->>API: order id
  API-->>User: 201 Created

如果想指定从左到右的具体顺序,而不是按首次出现的顺序排列,可以用 participant User 显式声明参与者。

箭头类型

语法含义
A->>B: text请求 — 实线,实心箭头
A-->>B: text响应 — 虚线,实心箭头
A->B: text实线,空心箭头
A-)B: text异步消息 — 空心箭头,无需等待回复
A-xB: text失败或被丢弃的消息

值得遵循的约定是:实线表示调用,虚线表示返回。这样读者不用看任何标签,也能分清请求和响应。

参与者与别名

sequenceDiagram
  participant U as Browser
  participant A as API gateway
  participant S as Order service
  U->>A: GET /orders
  A->>S: list(userId)
  S-->>A: orders
  A-->>U: 200 OK

用 actor U as Browser 代替 participant 可以画出一个小人图标 —— 适合用在认证流程最左侧代表真人用户的位置。

激活条

激活条展示某个参与者忙碌的持续时间。可以用 activate/deactivate 显式标记,也可以在箭头后加上 + 和 -,写法更短,也更不容易失衡。

sequenceDiagram
  User->>+API: POST /pay
  API->>+Bank: charge
  Bank-->>-API: authorised
  API-->>-User: receipt

循环、条件分支与并行任务

sequenceDiagram
  User->>API: POST /import
  loop every row
    API->>DB: upsert row
  end
  alt all rows valid
    API-->>User: 200 OK
  else some failed
    API-->>User: 422 with errors
  end
  par notify
    API->>Email: send summary
  and audit
    API->>Log: write entry
  end
  • loop <label> … end — 重复执行。
  • alt <label> … else <label> … end — 互斥分支。
  • opt <label> … end — 可能根本不会发生的分支。
  • par <label> … and <label> … end — 同时发生的事情。
  • critical / break — 不可中断的区块,以及提前退出。

注释

sequenceDiagram
  User->>API: POST /login
  Note right of API: Rate limited<br>5 per minute
  API-->>User: token
  Note over User,API: Token is valid for 30 days

Note over A,B 会跨越两个参与者,适合用来标注属于交互本身、而不专属于任何一方的约束条件。

完整示例

sequenceDiagram
  actor U as User
  participant A as App
  participant P as Provider
  U->>+A: Click "Sign in"
  A-->>-U: Redirect to provider
  U->>+P: Authorise
  P-->>-U: Redirect back with code
  U->>+A: GET /callback?code=…
  A->>+P: Exchange code for token
  P-->>-A: access token
  Note right of A: Session cookie set here
  A-->>-U: Signed in
完整的 OAuth 登录流程。

编辑这张图表

粘贴到代码标签页并修改一行 —— 预览区会随着输入实时重绘。

常见问题

如何给消息编号?

在 sequenceDiagram 之后紧跟一行 autonumber。这样每条消息都会自动编号,在评审评论中讨论图表也会方便得多。

参与者可以给自己发消息吗?

可以 —— 两侧写同一个名字即可:API->>API: retry。Mermaid 会绘制一个指回同一条生命线的循环箭头。

如何表示某个参与者被销毁?

在结束该参与者的消息之前使用 destroy <name>;如果想让参与者从图表中间而不是顶部出现,可以用 create participant <name>。

可以在可视化画布上编辑时序图吗?

可视化画布用于编辑流程图。时序图需要在代码标签页中编写,预览区会实时渲染 —— 而且这样通常更快,因为时序图本质上就是一行行文字。

更多指南

  1. 将 mermaid 导出为 PNG 或 SVG

    四种导出 mermaid 图表的方式 —— PNG、SVG、.mmd 源码和 Markdown 代码块 —— 以及各自适用的场景。

  2. Mermaid 语法速查表

    一页汇总节点形状、箭头、子图与样式 —— 附上 mermaid 支持的每种图表类型的可运行示例。

打开编辑器。 免费 — 无需注册。

空白画布、代码标签页和所有导出选项 —— 现在就能在浏览器中免费使用。