画完一条并行 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/mermaid
Mermaid 是开源项目:在代码块里写几行文本,它就渲染成 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），仅供参考
