ZON Best Minds Board
Workflow · Standard

Flow SVG 标准化：zon-flow-diagram 技能 + 全局注入

2026-02-05 · docs/best-minds-board

目标：让所有“流程链路 / 系统性跑通 / pipeline”图，都统一成你指定的那种泳道 SVG 风格，并且可以在看板 rebuild/publish 时自动嵌入到报告 HTML（不依赖手工复制粘贴）。

TL;DR

What Changed

1) 标准渲染器（源代码）
  • tools/zon-flow-diagram/render_flow_svg.py：渲染核心（swimlane + nodes + arrows）。
  • tools/zon-flow-diagram/flow_spec.example.json：参考 spec（对应你喜欢的那张图）。
2) HTML 注入器（placeholder → SVG）
  • tools/zon-flow-diagram/inject_flow_html.py：扫描 HTML，替换占位符/更新注入块。
  • 占位符：<!-- zon-flow: ./flow_spec.json -->
  • 注入块：<!-- zon-flow begin: ... --> ... <!-- zon-flow end -->
3) Skills 系统级安装
  • ~/.codex/skills/zon-flow-diagram：已安装（render + inject）。
  • ~/.codex/skills/frontend-design：模板已补齐 .figure 样式。
4) Best Minds Board 全局 rebuild 钩子
  • best-minds-board/scripts/rebuild-board.mjs：加入自动注入（可禁用：--no-flow-inject / BEST_MINDS_BOARD_NO_FLOW_INJECT=1）。
  • 效果：只要 HTML 里出现 zon-flow 占位符，就会在 rebuild 过程中被嵌入。

关键点：注入后是 inline SVG，所以发布到 Vercel 的 staging 不需要携带 spec 文件；图在 HTML 里就已经“烘焙”好了。

Verification Against Your Ask

你的诉求：所有系统性流程图都画成同一个标准，并且能自动调度 / 全局展示。

诉求 现状 证据
统一视觉标准（泳道 + 三档自动化） 已实现 tools/zon-flow-diagram/render_flow_svg.py
自动调度：每次生成/更新报告时不手工贴图 已实现（占位符 + 注入） tools/zon-flow-diagram/inject_flow_html.py
全局：best-minds-board 的 rebuild/publish 链路覆盖 已实现（rebuild 时自动注入） codex_skill_patch/best-minds-board/scripts/rebuild-board.mjs
模板级支持（你常用的两个 HTML 模板） 已实现（补齐 .figure） codex_skill_patch/frontend-design/assets/zon-minimal-editorial.template.html
codex_skill_patch/frontend-design/assets/zon-minimal-editorial.noir.template.html
“全局 flow SVG 图的展示” 覆盖 所有含占位符的 HTML（注入后统一展示）； 不强制改写 旧报告里手写的 SVG（除非你加占位符或替换为注入块）。 这是设计选择：避免误改已有报告内容；用占位符显式开启标准化。
示例：样式固定（flow_template.json），每个页面只换 flow_data.json（内容来自该页要表达的全局视图）。
DESIGN RENDER + INJECT BOARD + DEPLOY Pick style 锁定参考图语言 Define schema lanes/nodes/levels Separate content template + data Render SVG JSON → inline SVG Inject HTML placeholder → baked Rebuild board 全局刷新索引 Publish Vercel prod Alias zondev.top Human gate 审阅后再发 Archive 可复盘与复用
{{diagram_caption}}

How To Use (Now)

写 spec
  • 复制本目录的 flow_spec.json 改：泳道 / 节点 / 文案 / 等级。
  • 等级：auto | semi | manual
在 HTML 放占位符
  • <!-- zon-flow: ./flow_spec.json -->
  • 路径相对该 HTML 文件。
让看板自动注入
  • 跑 rebuild：node ~/.codex/skills/best-minds-board/scripts/rebuild-board.mjs --root docs/best-minds-board
  • 或手动注入：python3 ~/.codex/skills/zon-flow-diagram/scripts/inject_flow_html.py --root path/to/report.html
One next action
  • 选一个你现有的“系统性跑通”报告，把其中流程图位置替换成占位符 + spec 文件，然后跑一次 rebuild。
把全局流程链路图标准化为 Zon 风格泳道 SVG：提供 JSON spec→SVG 渲染器、占位符注入器，并把注入接入 best-minds-board rebuild；同时更新前端模板补齐 figure 样式。
— One small system