时序图也能画并行Mermaid 里 par、alt、opt 的正确用法【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid写 Mermaid 时序图时一到多分支同时发生就容易卡壳消息只能从上往下排业务逻辑却会分叉、会并发。这篇进阶教程带你补齐条件分支alt/opt与并行流程par两大块外加 rect 高亮、critical 关键区域学完就能独立画出带分支和并发的完整时序图。先看效果一张图装下分支、并行与高亮下面这张支付回调时序图同时用了alt决策分支、嵌套par双车道并行和rect背景色整条验签→落库→双写→通知链路一图看穿白话解读验签走决策树通过才进蓝色高亮落库区随后一条事件在两条车道上分头处理——扣库存和发通知互不等待最后统一给网关回执。条件分支alt 决策树与 opt 可选流程alt把一段消息拆成互斥的分支像一棵决策树每个岔路口用else分隔、整体以end收尾opt只描述满足条件才走的可选路径没有 else。先看一个 Webhook 验签的例子一句话alt管二选一opt管要不要做。提醒分支条件写成动作结果如验签失败而不是失败读图的人不用回头猜。嵌套 par 的正确打开方式par把一个区域拆成并行的车道车道之间用and分隔最外层以end收尾par块里可以再嵌一层par实现多车道里的二次分叉。消息队列消费端扇出通知时最典型解读消费端收到事件后开两条车道发通知车道内部又开短信/邮件两小股共两层嵌套。⚠️ 提醒每加一层par就多一个end写完后数一数配对数量嵌套超过两层图宽会指数膨胀不如把内层单独拆图。rect 高亮与 critical 关键区域rect给一段消息垫背景色用来把必须成功的核心动作从流程里拎出来critical圈出关键操作块内用option列出每种失败兜底收尾同样靠end。两个迷你示例白话解读rect画重点在哪critical画失败了怎么办。提醒critical里至少放一个option否则它和rect没区别高亮区域别超过整图三分之一否则失去对比。语法速查表时序图进阶关键字一览关键字作用必须 end适用场景alt互斥条件分支是验签、鉴权、状态校验等岔路opt满足条件才执行的可选流程是告警、日志、补偿等旁路步骤par并行块多车道同时发生是扇出通知、批量写、双写and分隔同一par内的车道否三车道及以上的并行块rect给消息段垫彩色背景是突出核心事务或重点阶段critical圈出必须成功的关键操作是写库、扣款等强一致动作optioncritical内的失败兜底分支否超时、抖动、降级等异常路径避坑问答时序图进阶教程里最常见的 4 个坑3 种箭头别选错-实线箭头表示同步调用--虚线箭头表示返回响应-x实线尾带叉表示消息失败或调用被拒绝-)开放箭头是发出即忘的异步消息。常见错配把返回响应写成-图看起来就像调用方还在等一个永远不会来的回答。口诀去程实线、回程虚线、失败加叉。忘记写 end 会怎样alt、opt、par、rect、critical五类结构块每个都要一个end。漏掉时解析器把后续消息全部吞进该块轻则错位、重则直接报语法错误而且错的位置往往离真正的漏点很远。写完用折叠视图数一遍开块数 end 数。嵌套 par 到底可以几层语法上不封顶可读性上限是两层超过两层时泳道被反复切分消息标签互相挤压评审时没人看得懂。三层需求的标准解法是把内层单独拆一张时序图外层用一条消息指过去。participant 命名不一致会怎样消息里写的是 participant 声明时左边的标识符不是右边的显示名。participant A as 网关之后写API-B会直接报错或冒出多余泳道。建议标识符用稳定短名API、MQ显示名只出现在as后面全图保持一致。alt管岔路、par管并排、rect/critical管重点这套结构语法能让 Mermaid 时序图从直线聊天升级到能表达真实业务并发与分支的进阶时序图。配套资料时序图官方语法文档全局配置项说明时序图在线示例含 alt/par 演示【免费下载链接】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），仅供参考