Mermaid 时序图:参与者、消息与激活条
时序图要表达的是「谁在什么时候对谁说了什么」。所以它的核心不是布局,而是顺序:消息从上往下按时间排列,实线是请求、虚线是返回,激活条表示「这段时间它在处理」。
最小可用示例
sequenceDiagram
participant U as 用户
participant S as 服务端
participant D as 数据库
U->>S: 提交订单
activate S
S->>D: 写入订单
D-->>S: 返回订单号
S-->>U: 下单成功
deactivate S
->> 是实线箭头(请求),-->> 是虚线箭头(返回)。participant ... as ... 给参与者起别名,图里显示中文,源码里用短名。
激活条与生命周期
activate S 在服务端生命线上画一个竖条,表示它正在处理;deactivate S 结束。也可以简写成 S->>+D:(加号激活)与 D-->>-S:(减号结束)。
激活条的价值在于表达并发与阻塞:两条激活条同时存在,说明两个参与者都在处理中;一条结束后另一条才开始,说明是串行。
循环、分支与备注
loop 每次重试…end:循环块。alt 成功…else 失败…end:分支块。opt 可选步骤…end:可选块。Note right of S: 说明文字:旁注。par ... and ... end:并行块。
分支块比在消息文字里写「如果失败则…」清楚得多——后者会让读者自己去脑补时序。
什么时候不该用时序图
参与者超过六七个、消息超过三十条时,时序图会变成一张又长又窄的图,读者要来回扫视才能拼出链路。这时应该:
- 按阶段拆成多张(登录、下单、支付各一张)。
- 把稳定的下游合并成一个 participant(如「支付服务群」)。
- 改用流程图表达状态流转,时序图只留给真正需要强调「顺序」的链路。
上面这些都不用装软件,也不用注册:打开页面就能用。
打开流程图与 Mermaid 图表生成 →常见问题
participant 的名字能用中文吗?
能。推荐写成 participant U as 用户,源码里用短标识、图上显示中文,改名字时不用改所有消息行。
消息文字太长会怎样?
会横向撑开整张图,参与者之间的间距被拉大。长说明建议放 Note 里,消息行保持简短。
能画自调用吗?
能,写成 A->>A: 自检 即可,会在同一条生命线上画一个回环箭头。