架构图

产物是一个自包含 HTML 页面：一张全景图（所有组件和主要流向）＋按需的机制图（一次运行怎么走、多节点怎么同步），表格能说清的（定时、治理）就用表格。图要画出机制：边界、谁调用谁、数据往哪流，每条线都带动词标签或颜色图例。

脚本在 scripts/：svgkit.py（手工排版的 SVG 原语、亮暗主题 CSS、流向筛选按钮 JS、隐私打码扫描）与 render_check.js（无头浏览器实测文字溢出与响应式宽度）。examples/zstack_overview.py 是一份可直接运行的完整成品示例，新图从复制它开始。

1. 摸现状

先读项目自己的地图类文档（ARCHITECTURE、README、清单/manifest、模块登记），再按模块读入口说明。边读边记一张组件账：组件 → 做什么 → 入口文件 → 上游/下游 → 运行在哪。历史段落只取现行结论，以日期最新的定案为准。

完成标准：每个现役组件都在账上且有出处文件；每条要画的线都能说出它的动词（读、写、派发、复核、推送……）。

2. 定图集与版面

• 全景图按数据流从左到右：外部输入 → 加工编排 → 单一真相（SSOT） → 交付/副本；人和客户端在上，规则与平台在下，治理在底。区块标签沿用项目自己的分层名。
• 先在纸面上定网格：列 x、行 y、区块头高度、通道宽度，再写坐标。走线、跳线、打码条的放法见 references/layout.md。
• 线按"谁驱动"分族上色（自动 / 手动 / 治理告警 / 同步备份 / 模型调用），每个节点和线带 data-f，页面上的筛选按钮靠它工作。

完成标准：每条线的起止点、拐点和标签位置都已定，没有一条线穿过无关方框。

3. 生成

复制 examples/zstack_overview.py，改图的部分，跑 python -X utf8 <builder>.py <out.html>。svgkit.WARN 报的 [overflow]、[overlap]、[vertical] 全部清零再往下走：缩短文字或加宽方框，不缩小字号。

4. 打码（要对外分享时）

按 references/privacy.md 的类别打码，图里用 chip= 画遮罩黑条，正文用 .redact-chip。最后对成品跑 svgkit.privacy_scan(html, terms)，terms = default_private_terms() 加上该项目的内部仓库、环境名、内部域名等词。

完成标准：扫描结果为空列表 []，并在回复里列出打了哪几类码。

5. 渲染检查（一次）

node <本技能目录>/scripts/render_check.js <out.html> <截图目录>

退出 0 表示：页面在 1440 和 390 宽都不横向滚动，且浏览器真实测量的 SVG 文字均未溢出方框。看一遍生成的亮色各图、暗色全景、手机首屏截图，做一轮修改，不反复循环。

6. 交付

有 Artifact 工具就按它的规则发布；没有就交付 HTML 文件。回复里写清：图里画了什么、打了哪些码、检查结果。