流程图与 Mermaid 图表生成 打开工具

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:(减号结束)。

激活条的价值在于表达并发与阻塞:两条激活条同时存在,说明两个参与者都在处理中;一条结束后另一条才开始,说明是串行。

循环、分支与备注

分支块比在消息文字里写「如果失败则…」清楚得多——后者会让读者自己去脑补时序。

什么时候不该用时序图

参与者超过六七个、消息超过三十条时,时序图会变成一张又长又窄的图,读者要来回扫视才能拼出链路。这时应该:

上面这些都不用装软件,也不用注册:打开页面就能用。

打开流程图与 Mermaid 图表生成 →

常见问题

participant 的名字能用中文吗?

能。推荐写成 participant U as 用户,源码里用短标识、图上显示中文,改名字时不用改所有消息行。

消息文字太长会怎样?

会横向撑开整张图,参与者之间的间距被拉大。长说明建议放 Note 里,消息行保持简短。

能画自调用吗?

能,写成 A->>A: 自检 即可,会在同一条生命线上画一个回环箭头。