Mermaid 时序图进阶教程：3 个场景画会条件分支与并行流程

Mermaid 时序图进阶教程：3 个场景画会条件分支与并行流程

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

你画的时序图可能全是直线：A 发消息、B 回消息，一到"如果验签失败""同时通知三个系统"就卡壳。这篇 Mermaid 时序图进阶教程教你用 alt、opt、par 把 if/else 与并发画进同一张图。

一、⚡ 30 秒热身：进阶图开画前确认的 3 个语法开关

进阶语法全建立在三个基本功上，先确认你的习惯和它们对齐。

1. 箭头类型：->>实线箭头是同步调用，-->>虚线箭头是返回/异步响应，-x末端打叉表示这条消息失败了。整张图如果清一色->>，读者分不清哪句是请求、哪句是回执。
2. 激活条：activate/deactivate在参与者生命线上画一段"正在处理"的矩形；懒办法是把+/-直接贴在箭头上，+让接收方激活，-让它释放。
3. 编号与注释：autonumber给每条消息自动编号，讨论时可以直接说"第 4 步"；%%开头的行是注释，渲染后不可见。

要解决的问题：用一张最小图验证这三个开关都能正常工作。

渲染出来的效果：每条箭头前带序号，网关的激活条随+/-出现又收回，失败那条消息末端是个叉。

下面这张图是时序图最朴素的形态——后面所有进阶写法，都是在这些直线外面再套一层"框"。

二、场景工坊①：给流程加上"如果…否则…"

场景来了：你的支付网关收到渠道回调，会遇到三种互斥状态——验签失败、重复回调（已处理过）、验签通过要落单。这三条路必须走且只能走一条，就是alt的用武之地。而"写审计日志"只在采样开关打开时才执行，属于可跳过步骤，用opt。

如何选 alt 还是 opt

分支互斥、必定进入其一，用alt+else，每个else开一个新分支；分支可选、不满足就整段跳过，用opt，它没有else。别把"必然要执行"的步骤写成opt，读者会以为这步可以不跑。

要解决的问题：把支付回调的三条互斥路径和一个可选步骤画清楚。

三个else分支里，每支只写"这条分支独有的动作"——打叉拒绝、幂等返回、标记已支付，全分支共有的前置动作不要重复画，否则图会显得啰嗦。

末尾的opt是可选步骤：哪天采样关掉了，整块删掉即可，主线完全不受影响。这正是它和alt的本质差别。

渲染出来的效果：前三个并列的分支框由 alt 标签区隔，一眼看出"三选一"；最后一个框是独立的可选步骤。

📌所有条件块都必须以end收尾。如果渲染报"expected end"或框没画闭合，先逐个数alt、opt、par、rect、critical有没有各配上一个end，九成是这个原因。

三、场景工坊②：让两条线"同时跑"

场景：文件导出完成后，系统要给用户推"文件已就绪"，同时还要写审计日志。如果按顺序画下来，看起来像推送得等日志写完——业务上并不是。这就是par的用武之地：par开一个并行框，and分隔每条并行泳道，各泳道互不等待。

要解决的问题：导出完成后两条线同时跑，其中"推送通知"这条线内部再拆出两个并发通道。

外层par分出两条泳道："推送通知"和"审计留痕"独立进行，互不阻塞。推送泳道里又嵌了一层par，把 App 站内信和邮件拆成两个并发通道，-)这种开放箭头正好表达"发出去就不等回执"。

为什么建议嵌套别超过 2 层？这不是硬性规定，而是可读性：第二层嵌套表达"并行中还有并行"已经够用，到了第三层，读者很难分清每条消息属于哪个框，渲染后框线也会挤在一起。真需要第三层时，多半说明你的拆分粒度太细——要么拆成两张图，要么换个切分维度（比如按"谁发起"拆而不是按"发生什么"拆）。

渲染出来的效果：外层框包含两条泳道，嵌套的子框画在"推送通知"泳道内部，两条线各走各的、谁也不等谁。

四、场景工坊③：一张图讲完一个完整业务

场景：用户导出报表的完整链路——鉴权分支、必须成功的关键路径及其异常、完成后的并发收尾。这一节把前面的语法一次性都用上。

先分清一个容易混的点：alt画"正常业务分支，每条路都合法"；critical画"这一步必须成功，option里放的是异常情况"。拿alt去画异常处理，语义就错了。

要解决的问题：一张图讲完鉴权、落盘、异常重试和并发通知，并把核心路径高亮出来。

autonumber让每条消息都有编号；alt处理鉴权失败和通过两条路；rect给"落盘对象存储"这段核心路径垫了个浅色背景；critical/option说明"写存储必须成功，超时才走重试"；最后的par让通知和记配额同时发生。

渲染出来的效果：绿色背景框住的正是评审时最该看的落盘路径，401 分支末端是叉，消息编号可以直接被会议引用。

五、✅ 发布前自查清单

图写完别急着贴出去，对照这 5 行扫一遍：

六、延伸资源

• 官方时序图语法文档：箭头全表、激活、条件框、并行框与配置项的完整说明，本文所有语法都能在这里查到
• 时序图示例页：浏览器打开直接看渲染效果
• e2e 时序图用例集：149 个.mmd样例，按场景归类，适合对照着学

到这里，你的流程里再出现"如果"和"并发"，就不用换画图工具了。先用alt和par搭骨架，再用rect和critical圈出重点，时序图就从"直线叙述"升级成了"业务叙述"。下次拿不准某个关键字，翻一下官方文档，答案都在里面。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid