如何编写 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
endloop <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 daysNote 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编辑这张图表
粘贴到代码标签页并修改一行 —— 预览区会随着输入实时重绘。
常见问题
如何给消息编号?
在 sequenceDiagram 之后紧跟一行 autonumber。这样每条消息都会自动编号,在评审评论中讨论图表也会方便得多。
参与者可以给自己发消息吗?
可以 —— 两侧写同一个名字即可:API->>API: retry。Mermaid 会绘制一个指回同一条生命线的循环箭头。
如何表示某个参与者被销毁?
在结束该参与者的消息之前使用 destroy <name>;如果想让参与者从图表中间而不是顶部出现,可以用 create participant <name>。
可以在可视化画布上编辑时序图吗?
可视化画布用于编辑流程图。时序图需要在代码标签页中编写,预览区会实时渲染 —— 而且这样通常更快,因为时序图本质上就是一行行文字。