动态流程全景视图 · Process Panorama
把「一堆阶段」变成一张会呼吸的流程图：主链从左到右推进，粒子沿线流动，
判定节点分叉、未通过沿红色虚线回流，底部一条轨道贯穿全程表示横向管理职能，
点任意节点展开该阶段的「关键活动 / 出口标准」。
什么时候用
| 该用 | 不该用 |
|---|---|
| 生命周期、SOP、业务链路、交付流程、生产工序 | 组织架构、思维导图 |
| 需要讲清「每个阶段做什么、交出什么」 | 类图、ER 图、时序图 |
| 有评审/卡点/驳回等分支与回流 | 纯拓扑网络、无方向关系图 |
| 想做一页可演示、可点击、有节奏感的流程页 | 静态一次性插图（用 drawio） |
三种产出方式
A. 改配置最快（推荐） — 复制 scripts/examples/ 里的 JSON 改内容，跑构建脚本：
python scripts/build.py my-process.json out.html
python scripts/build.py --validate my-process.json # 只校验不生成
B. 直接改模板 — 打开 assets/panorama-template.html，文件里有一段
<script id="panorama-config" type="application/json"> 的 JSON，改完存盘即生效。
模板默认渲染的就是「需求工程全生命周期」这一版，可当写作范本。
C. 从零写 — 按 references/SCHEMA.md 的契约手写 JSON，再走 A。
> 产出是单文件自包含 HTML：CSS/JS/数据全内联，双击即开，可直接发给别人或挂静态站。
工作流
- 定骨架：数清主链有几个阶段（2–6 个）、有没有判定卡点、有没有横向贯穿职能。
- 定输入：谁是流程的上游？2–5 个来源，写成「中文名 + 英文大写标签」。
- 填阶段：每个阶段四件事——编号、中英文名、一句话目标、关键活动（3–5 条）、
出口标准（2–4 条）。出口标准必须是可判定的，不是「做好了」而是「无冲突 / 已签字 / 可测」。 - 接分支：判定问题写成一个 yes/no 问句（如「评审通过？」），未通过回流到哪几个阶段
（loopTargets用 0 基索引）。 - 构建 + 自检：跑
build.py，用浏览器打开，按下面的检查清单过一遍。
数据契约速查
{
"meta": { "live": "页头小字", "title": "主标题", "accent": "高亮词", "tail": "尾词",
"sourcesLabel": "左栏标题", "hint": "页脚提示" },
"metrics": [ { "label": "指标名", "value": 127, "drift": { "p": 0.7, "step": [1,2] }, "color": 0 } ],
"sources": [ { "zh": "来源名", "en": "LABEL" } ],
"phases": [ { "num": "01", "en": "EN NAME", "zh": "中文名", "goal": "一句话目标",
"acts": ["活动"], "exits": ["出口标准"], "loop": "回流说明(仅末阶段)" } ],
"decision": { "q": "评审通过？", "yes": "是", "no": "否",
"loopLabel": "未通过 · 回流至 ①② REWORK", "loopTargets": [0,1],
"loopNote": "点击后弹出的 toast 文案" },
"artifact": { "zh": "需求基线", "en": "BASELINE", "version": "v1.0" },
"track": { "num": "05", "en": "MANAGEMENT", "zh": "需求管理（贯穿）",
"label": "05 · 需求管理 · 贯穿全程", "goal": "...",
"acts": ["..."], "exits": ["..."], "note": "toast 文案" }
}
字段全解、可选项、索引规则见 references/SCHEMA.md。
最小可用配置只有 meta.title + phases（每阶段至少 zh）。
sources / decision / artifact / track / metrics 全部可选，缺哪个就少画哪块。
引擎自动处理的事（不用你管）
- 阶段数决定画布宽度与节点间距（≤4 用 235px，5 用 218px，6 用 205px）
- 来源数决定左栏间距（≤3 用 100px，4 用 96px，5 用 76px），并自动上移左栏标题防重叠
- 阶段名长度自动缩字号（≤4 字 16px → 8 字以上 11.5px），保证不出圆环
- 出口物名称长度自动加宽画布右边界，标签不被裁切
- 判定问题长度自动缩小字号；菱形尺寸固定 104×72
- 配色按阶段顺序从 6 色盘中取，第 7 个阶段起循环复用
硬性规则
- 阶段数 2–6。少于 2 不是流程，多于 6 画布会被拉成一长条，横向滚动体验差 —— 该拆成两条流程。
- 阶段名 ≤7 个汉字。超了会缩到 11.5px，再长就换名字。
- 出口标准必须可判定。「体验好」是废话，「首屏 1.5s 内可交互」才是出口标准。
- 只有末阶段可以有
loop，因为回流箭头是从判定菱形出发的。 loopTargets是 0 基索引，[0,1]表示回流到第 1、2 个阶段。第一个目标走主干道，其余走支线。artifact是流程的终态产物（基线 / 交付物 / 上线单）。没有终态就别传，p-pass那条绿线会自动省略。- 不要往模板里塞业务判断逻辑。模板只管画，数据只管描述。
- 不用 emoji 当图标。图形语言只有圆、菱形、文档、箭头。
自检清单
打开生成的 HTML 后逐条确认：
- [ ] 页头标题、
live小字、副标题（自动生成的 ①②③ 链条）都对 - [ ] 主链节点数 =
phases数，全部完整可见，没有被右边界切掉 - [ ] 每条连线末端都有箭头，方向从左到右
- [ ] 点任意节点 → 面板换色、对应连线点亮、底部 tab 高亮
- [ ] 点判定菱形 → 红色回流虚线闪烁 + 顶部 toast 变红
- [ ] 点出口物图标 → 版本号 +0.1 并脉冲
- [ ] 点底部轨道 / 最后一个 tab → 面板显示贯穿职能
- [ ]
←→切阶段，Space起停自动演示 - [ ] 自动演示走到末阶段时会先演示回流、再演示冻结基线
- [ ] 浏览器控制台无报错（favicon 404 不算）
文件清单
process-panorama/
├── SKILL.md # 本文件
├── references/
│ ├── SCHEMA.md # 数据契约全解 + 索引规则 + 反例
│ └── DESIGN.md # 设计语言：色板 / 字体 / 动效 / 几何常量
├── assets/
│ ├── panorama-template.html # 渲染引擎（默认配置 = 需求工程示例）
│ └── example-order-fulfillment.html# 5 阶段 + 4 来源 + 贯穿轨道的实例
└── scripts/
├── build.py # JSON → HTML 构建器（含校验）
└── examples/
├── requirement-engineering.json # 4 阶段 + 判定 + 贯穿轨道
└── order-fulfillment.json # 5 阶段 + 4 来源 + 判定 + 贯穿轨道
常见改造
没有判定卡点（纯线性流程）：删掉 decision 和 artifact 之外的依赖，
artifact 存在时会从末节点直接连一条绿线过去。
没有贯穿职能：删掉 track。画布高度会自动从 545 收到 430。
要 6 个阶段：直接加，间距自动收到 205px，仍可读。
想改配色：只改模板里的 PALETTE 数组（6 色）和 ACC（贯穿轨道色）。
不要逐个元素改 CSS，染色是运行时按索引注入的。
