Mermaid 时序图进阶完整指南alt、par 等 5 类并行与条件分支语法一次讲透【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid本文基于 Mermaid.js 讲解 Mermaid 时序图进阶用法alt、opt、critical 三类条件分支par 并行块以及 rect、autonumber 等交付级技巧带你从零画出一张带判断、带并发、别人看得懂并能直接进评审的时序图。第一幕基础时序图画到一半就卡住你大概写过这样的时序图两个 participant几条箭头渲染出来收工。真正接手支付回调、订单流转这类业务后你会发现光靠-不够用验签不通过要中断验签通过才继续——这是条件分支扣库存、发发货通知、写消息队列同时发生——这是并行流程图有二十条消息评审的人根本看不出哪段是核心——需要视觉强化。基础语法只解决谁对谁说了什么进阶语法才解决业务真实怎么跑。本文按判断 → 并发 → 交付的顺序把 Mermaid 时序图进阶里最常用的 5 类语法一次讲透。第二幕先对齐地基消息三态与激活标记三种箭头表达消息三态同一根箭头线型和端头不同语义完全不同。写条件块和并行块之前先确认自己用对状态箭头渲染结果什么时候用-实线 箭头同步调用发出方在等结果--虚线 箭头响应 / 回执 / 异步通知-x实线 叉消息失败、被拒绝activate 的两种写法激活条activation表示这个参与者正在处理。两种写法等价选一种全图统一独立声明activate 订单服务…deactivate 订单服务适合长操作箭头后缀-激活、---释放适合一行一来一回的短交互。下面这张图演示了同步调用 → 激活 → 响应释放 → 失败消息四种状态的最小组合注意-x那条是叉不是箭头。第三幕让图会判断alt、opt 与 criticalalt 与 opt 用法区别登录、支付回调里同一个入口常有多条互斥路径验签通过继续不通过就中断。这种多分支必须列全的场景用条件块alt分支之间用else分隔整个块以end闭合注意每个分支的标签都写成动宾短语密码校验失败而不是失败读图的人不用回看上下文就知道这个分支是什么条件。而某一步可能发生、也可能不发生时用可选块opt单独表达它没有else一个条件对应一段内容同样以end闭合注意alt至少有两个分支两个else以上opt永远只有一段内容把可选的额外步骤塞进alt会让另一个分支变成空壳语义就错了。critical 关键路径option 和 opt 不是一回事有些操作是必须成功的比如扣款、写流水。关键路径块critical先声明必须执行的动作再用option分支逐个列举可能出现的异常注意option是必须发生的动作出了异常怎么办opt是这一步本身可选两者语义不同别混用。第四幕让图跑起来par 并行块与嵌套单层 par 表达并行流程微服务里最常见的并行订单落库后同时扣库存、分配合伙商、写消息。并行块par把同时发生的几段消息放进一个块分支之间用and分隔注意每个and分支内部是独立的、互不依赖的消息序列读图时按横切理解而不是从上往下串行读。par 嵌套为什么建议不超过 2 层一个分支内部还可以再放并行块语法上 Mermaid 支持更深但嵌套 3 层后方框层层内缩分支标签开始互相挤压图基本不可读注意嵌套控制在 2 层以内。超过 2 层时先问自己能不能把内层拆成另一张图或者降级成一个Note注释说明保住主图可读性。第五幕让图可交付rect、autonumber 与注释 用 4 个轻量特性给图做交付打磨图能不能直接进评审文档往往取决于这 4 个小特性autonumber给每条消息自动编号评审讨论时说第 4 步就不用指着图rect给一段流程加背景色核心链路和失败处理一眼分开%%注释行内说明只给作者看不会渲染进图Note渲染出来的批注适合写给读图的人participant 命名全图统一用中文业务名支付网关而不是gateway/网关混用读图人零翻译成本。下面这张图演示了背景高亮 自动编号 注释的组合效果注意rect的颜色必须用 rgb / rgba 语法。注意颜色写rgb(0, 0, 255)或rgba(0, 0, 255, 0.2)都可以不要写#hex#会被解析器当成注释开头。第六幕实战从零画一张支付回调时序图这张图画的是支付平台回调 → 验签 → 更新订单 → 触发发货的完整链路同一张图里同时用到了 autonumber、rect、alt、opt、/-激活。注意alt的两个分支里激活条的开合必须各自闭合——签名校验不通过分支里单独deactivate签名校验通过分支靠最后的---释放两条路径各管各的。第七幕高频踩坑清单错误表现正确写法alt/par/rect漏写end整张图渲染失败或后续内容被吞进块里每个块都显式补end写完先数一遍开闭是否配对同步调用和响应混用-读图人分不清等待和回执请求用-响应用--失败用-xparticipant 中英混写orderService和订单服务指同一个东西全图统一一个名字用as定义别名后不再换par嵌套 3 层以上方框层层内缩图不可读嵌套不超过 2 层内层拆成另一张图或用Note说明option和opt互换使用critical内固定用option列异常独立可选步骤才用optrect写#hex颜色只写rgb(0, 0, 0)/rgba(0, 0, 0, 0.2)#会被当作注释分支标签写失败 / 成功读图人不知道失败的是什么标签用动宾短语密码校验失败库存预扣成功收尾条件分支alt / opt / critical让时序图会判断并行块par让它跑起来rect、autonumber 和统一命名让它能直接交付。记住一条底线每个块都要闭合箭头状态要诚实嵌套最多 2 层。想继续深入可以看这三篇官方文档时序图完整语法Mermaid 配置项时序图示例页【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考