图示
WorkflowFigure 流程图
按泳道和阶段排的流程，主路径画得比它的分支重。
来自@misoto22/design/diagrams
什么时候用它
运行手册、审批链、CI 流水线——任何每一步都有归属的东西。mainPath 才是把十四个方框变成一张有主语的图的那一下。
示例
default
Release
4 elements and 3 relationships. Green tests ship; a red deploy rolls back.
- Lint (backend) — eslint
- Tests (backend) — vitest
- Deploy (cloud) — Cloudflare
- Roll back (security) — previous build
- Lint → Tests
- Tests → Deploy: green
- Deploy → Roll back: health check failed
Key
说明
一段流程：谁做什么、按什么顺序、以及哪里会出错。
三层结构叠在同一张网格上。之所以是三层，是因为它们回答的是读者带到一份运行手册前的三个不同问题。
泳道是行，回答谁。标了 exception 的泳道是唯一一条拿到底色而不是细线的带子；它之所以能豁免「框只能是线」这条法则，是因为没有任何路由横穿它——它就是失败路径的地面，而不是画在顺利路径之上的一个框。
阶段是横跨所有泳道的列，回答何时。印成表头线上的说明文字，因为阶段是一个坐标轴标签。分组是单条泳道内部的框，回答什么属于一起——一个规划循环、一条取证路径。
主路径更重，层级就在这一处。mainPath 列出读者应该不用思考就能跟下去的那串节点 id。它上面每两个相邻 id 之间的边，无论自己的 variant 说什么，都按强调的粗细来画——正是这一下，把十四个方框、十九根箭头，变成一张有主语的图。error 角色走的是反方向：虚线、更淡，让异常路径退后但不消失。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| spec必填 | WorkflowSpec | — |
同时接受 FigureChrome 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
无障碍
- 和每张图一样的约定：一张有名字的图，节点和关系以文字发布在旁边。
- 异常泳道是这套系统的图里唯一带底色的带子，而且它仍然有标签——底色不是单独在承载意思。