用途：当系统设计已稳定（组件清单与连接关系明确）时，把设计转成一份精炼、自包含的 HTML+SVG 架构图。组件为方框，箭头表示通信/数据流，虚线边界表示区域或信任域。它是该插件的统一绘图引擎，编排器与各构建块在“该画图”时交给它。
适用时机：推理循环的高层设计（步骤3）、深挖（步骤6），以及故障路径图（步骤5）；只要设计已清晰到可绘制即可使用。设计未稳定前不要画，早期讨论可用 ASCII 草图。
主要能力：
- 按语义类型给组件配色，如前端/客户端、后端/服务、数据库/存储、缓存、消息总线/队列、云/托管、安全/认证、外部/通用，具体色值在 references/design-system.md。
- 遵循布局规则：先画箭头再画方框（使其位于下层）、半透明填充遮挡箭头、垂直间距≥40px、图例置于边界框外。
- 用编号箭头表示请求顺序；异步/复制/回退用虚线箭头；区域与安全组用虚线边界。
- 填写摘要卡片呈现关键决策与取舍，更新标题/页脚。
使用方式： 从设计文档收集规格（组件及类型、有向连接及协议/标签、区域分组）。将 assets/template.html 复制为工作文件，保留深色主题、网格背景、字体、导出工具栏与摘要卡片布局。按设计规范放置方框与箭头，然后运行 open <file>.html 查看；工具栏可导出 PNG/PDF。
输出与限制：
- 单一自包含 .html：内联 CSS/SVG，无外部图片，系统等宽字体，可完全离线渲染。
- 仅保留两个带 SRI 校验的固定 CDN 脚本（html2canvas + jsPDF），用于 Copy/PNG/PDF 导出；移除后图仍可渲染，只是失去导出按钮。不要改动其 SRI 哈希。
- 避免使用 SVG <foreignObject>（html2canvas 渲染不一致），改用普通 <rect>/<text>。
- 高层视图保持约 8–15 个组件，深挖时放大单个子系统。
- 不要内嵌 Mermaid 或另立绘图约定；不要把图例放进边界框内，不要让组件间距小于 40px。
- 可选交互/协作模式另见 references/interactive.md，提供图层切换、连接类型过滤、缩放与点击评论，并生成带复制按钮的反馈提示；默认 Copy-Prompt 按钮始终可用，实时“发送到 Claude”需另装传输插件，本插件不要求也不捆绑。