画完一条并行 CI/CD 流水线,只需要 4 层升级:Mermaid 时序图进阶指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 是开源项目:在代码块里写几行文本,它就渲染成 SVG 图表。时序图(sequenceDiagram)是它表达多系统交互的核心图种,也是 Mermaid 时序图 进阶 语法里最常用的一块。这里以一条 CI/CD 流水线为主线:合并请求提交后,流水线要完成构建、测试、发布,而真实行为远比示例图复杂——测试并行跑、结果会分叉、发布要兜底。做法是拿一张图当画布,把这些行为逐层打补丁进去,从单线程骨架一路升到完整版图。先画地基:用一条直线画出 CI/CD 主线画流水线时别急着堆细节,先把必须串行执行的主轴画出来。提交、构建、触发测试这三个动作,就是一条线性消息序列,信息密度反而最高。autonumber:先给主流程编号autonumber让每条消息自动编号,排查问题时可以直接对着日志序号说话。对应真实系统:调度器收到合并请求的 webhook,把构建任务派给构建机;虚线返回是构建完成后异步回传的结果。常见误用是全程不编号、靠源文顺序指代消息,后来有人在图里插一条消息,大家的引用全部错位。activate/deactivate 与 简写激活条表示此刻谁在处理这个请求,可以显式写activate/deactivate,也可以在箭头后紧跟激活接收方。上一例的开发者-调度器就是简写。只activate不deactivate的后果是激活条一直拖到图底,读者会以为调度器再没返回。⚡ 让测试用例跑成并行:用 par 给测试阶段分道构建结束后,真实的流水线绝不会让单测和集测串行排队,而是同时派发、都跑完再汇总。par/and:单测与集测两条道par把块内消息序列切成几条互不等待的并行道,道与道之间用and分隔,最后以end收尾。横向的框线在视觉上宣告两条道同时结束:调度器在两条结果都回到自己手里之后才汇总。把汇总两组结果这种串行动作写进某条道里,会让读者误以为汇总也是并行发生的。经验值:par 的每一条道必须彼此独立;某条道依赖上一条道的产出时,就该退回串行,别硬塞进道里。嵌套 par:同一条道再切分par 支持嵌套,一条道里再放一个 par,适合集成测试内部还要同时跑冒烟和回归这类结构。集测组在同一时刻收到两类用例:核心链路优先验证,全量回归跟着跑。反例是嵌套超过两层,框线密到比文字还窄,图已经不适合承载这个复杂度,该拆图了。给测试结果分叉:用 alt 和 opt 画通过与失败alt 多分支:通过 vs 失败alt 画如果/否则的多分支,每个分支用else隔开,读者一眼能数出只有这几种结局。-)这种开尾箭头表示发出即忘的通报,值班群不会回任何消息。经典踩坑是用 else 写也许发生的事件:else 的语义是非此即彼,把概率事件写成 else,读者会一直去找另一个分支。opt 可选流程:需要时才附日志opt 是可能执行的分支,没有 else。上一例中附日志链接只在存在可复现失败用例时发生,所以单独成 opt 而不塞进 alt。反过来,把必然发生的步骤写成 opt,整张图会带上一种此环节可有可无的气质,与线上事实不符。⚠️ 给部署异常兜底:critical、option 与 rect 收口critical 关键区加 option 兜底发布是整条流水线里最不能出错的环节,异常要么回滚、要么叫人,没有中间态,想绕过去是不行的。critical标记必须成功的动作,内部用option枚举每种异常的处置路径。健康检查失败走自动回滚,镜像仓库超时则升级给人工。把 critical 用在发通知这种非必须成功的步骤上,所有人都会高估一次失败的严重性。经验值:option 和 opt 语义不同:看到 critical 的读者默认主路径必须成功,option 是它的异常出口;opt 只说可能发生,不做承诺。✅ rect 背景高亮与最终版图rect给一段消息套上彩色背景,让视线先落在关键阶段。rect 别包满全图,嵌套时也别用相近色,否则高亮本身会失效。下面这条流水线就是前几层升级叠加后的完整形态:七个角色、两条并行测试道、一个分叉、一个带回滚语义的关键发布区;出事故复盘时,先看绿色块里发生了什么。延伸路线时序图语法文档:箭头类型、分组关键字与激活条的完整参照配置项文档:调整时序图边距、字号等渲染参数时序图 demo 页:在浏览器里直接查看渲染效果【免费下载链接】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），仅供参考