ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

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

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 个语法开关进阶语法全建立在三个基本功上先确认你的习惯和它们对齐。箭头类型-实线箭头是同步调用--虚线箭头是返回/异步响应-x末端打叉表示这条消息失败了。整张图如果清一色-读者分不清哪句是请求、哪句是回执。激活条activate/deactivate在参与者生命线上画一段正在处理的矩形懒办法是把/-直接贴在箭头上让接收方激活-让它释放。编号与注释autonumber给每条消息自动编号讨论时可以直接说第 4 步%%开头的行是注释渲染后不可见。要解决的问题用一张最小图验证这三个开关都能正常工作。渲染出来的效果每条箭头前带序号网关的激活条随/-出现又收回失败那条消息末端是个叉。下面这张图是时序图最朴素的形态——后面所有进阶写法都是在这些直线外面再套一层框。二、场景工坊①给流程加上如果…否则…场景来了你的支付网关收到渠道回调会遇到三种互斥状态——验签失败、重复回调已处理过、验签通过要落单。这三条路必须走且只能走一条就是alt的用武之地。而写审计日志只在采样开关打开时才执行属于可跳过步骤用opt。如何选 alt 还是 opt分支互斥、必定进入其一用altelse每个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 行扫一遍检查项怎么查不达标怎么办end是否闭合数一遍 alt/opt/par/critical/rect 的数量每个关键字配一个end激活是否配平每个/activate找对应的-/deactivate图结束时激活条应全部收回标签是否动宾结构分支标签能否读成发生了什么把已过期改成令牌已过期并行标签是否说明目的par标签是否说清为什么并行把并行处理改成通知用户箭头类型是否匹配语义实线同步调用虚线返回/异步叉失败该打叉的别画成--六、延伸资源官方时序图语法文档箭头全表、激活、条件框、并行框与配置项的完整说明本文所有语法都能在这里查到时序图示例页浏览器打开直接看渲染效果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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表