Mermaid 时序图进阶指南：条件分支与并行流程的完整画法

Mermaid 时序图进阶指南条件分支与并行流程的完整画法【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid一张普通的 Mermaid 时序图只能画谁调谁、谁回复的线性链路如果…就… 写不出来同时发生的事件排不成并排重点步骤也标不出来。本文基于 Mermaid.js围绕同一张图做四次渐进升级把条件分支、并行流程、背景高亮与容错区域逐一叠加上去最后合成一张能直接进评审会的业务时序图。第 1 节从最小可用的时序图底图开始先把谁和谁说话立住。三行就够participant声明参与者箭头表示消息缩进只影响阅读层次。参与者命名要有业务感图才像图官方文档里还演示了as的短名 长标签写法比如participant GW as 支付网关——代码里用短 ID图上显示长名图变宽后也不用改代码。第 2 节升级一给 Mermaid 时序图加上条件分支alt 与 else画出 if/elsealt就是流程图里的 if/elseelse分隔互斥分支。场景支付请求先过风控风控服务查用户库命中黑名单就发验证码二次校验没命中直接放行。判断只有两种结果一个else就够最后用end收口。opt偶尔才走的旁路可选流程别硬塞进altopt是只有一条路径的旁路。风控通过后顺手上报营销画像只在画像开关打开时执行提示alt/opt都以end收尾忘了end是时序图最常见的渲染报错原因。第 3 节升级二用 par 画出同时发生的请求par 与 and框定并行块订单服务支付成功后要同时触发履约、积分、通知三条链路。按线性写读图的人会误以为是串行等待。par框定并行块and分隔各条并发路径end收口。par 嵌套两层足够再深就拆图par可以嵌套外层表达谁和谁并行内层表达某条分支内部还有并发。建议嵌套不超过两层再深的并行度应该拆成两张图。第 4 节升级三用 rect 高亮重点、critical 兜底失败rect让核心链路跳出来评审时你希望对方一眼看出哪段是核心链路。rect给一段消息加彩色背景颜色支持rgb()与rgba()两种写法rgba的第四个参数控制透明度适合叠在图上不抢内容。critical 与 option必须成功的操作 失败分支alt表达走哪条路critical表达这条必须成功失败了怎么办。支付渠道回调必须成功超时就重试、签名不过就拒收critical块先写必须执行的消息再用option挂零个或多个异常分支。第 5 节升级四交付前打磨编号、激活条与注释激活条 / - 一行搞定激活条让读者看出谁在干活。可以用显式的activate/deactivate也可以把/-挂在箭头后缀上当快捷方式同一条消息既发消息又激活对方。箭头语义同步、返回、失败要分清-是同步调用实线--是响应返回虚线-x表示消息失败——失败消息挂在发起方自己的泳道上表示这一步没走通。autonumber 与 %%编号和解释消息一多评审时第几条就没法口头对齐。autonumber给每条消息自动编号还接受起始值和步长%%是注释用来解释为什么这么画交付时别删。综合实战一张订单支付风控时序图下单链路要同时表达风控判断alt、支付与风控并行par、回调必须成功critical/option、非核心通知可选opt、核心链路高亮rect、编号autonumber、激活条/-与注释%%。把四次升级合并进一张图交付前逐条过一遍清单每个控制块alt/par/opt/critical/rect是否都有对应的endpar块内各分支是否用and分隔嵌套是否控制在两层以内激活条的/-或activate/deactivate是否成对出现叠层时层级是否符合预期critical块内是否至少有一条主路径消息option是否只出现在critical内alt/opt的标签是否写成动宾结构命中黑名单而非黑名单分支含义自解释rect颜色是否用了rgb()或rgba()且没有把整张图刷成底色autonumber是否紧跟第一行声明编号与文档、评审记录里的引用一致%%注释是否保留了为什么这么画的业务理由而不是随手乱写。一张时序图先立住谁和谁说话再用alt/par/rect/critical把判断、并发、重点与容错补齐图就能自己讲清整条链路。延伸阅读官方时序图语法文档、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），仅供参考