architecture-diagram

架构图

将稳定的设计——组件列表及其相互连接——转换为精致、独立的 HTML + SVG 图表。组件用方框表示，箭头表示通信／数据流，虚线边界表示区域或信任区。这是整个插件的制图引擎；需要绘图时，编排器和构建模块会将任务交给它。

独立运行是刻意的设计：只需一个包含内联 SVG 和 CSS 的 HTML 文件，使用系统等宽字体（不获取网络字体），渲染无需任何依赖——完全离线绘制。唯一的外部调用是两个固定版本且受 SRI 保护的 CDN 脚本，用于支持可选的 PNG／PDF 导出；移除它们后，图表仍可渲染，只是会失去导出按钮。

适用场景

在推理循环的第 3 步（高层设计）和第 6 步（深入分析）使用，也可在任何设计清晰到足以绘制时使用：组件列表及其连接关系都已明确。也适用于故障路径图（第 5 步）——展示降级流程也是设计的一部分。

不适用场景

设计尚未稳定时不要使用——不要绘制尚无依据的方框（这是失败模式 #7）。早期构思时，在对话中快速画个 ASCII 草图即可；等组件确定下来后，再使用此技能渲染。

如何构建图表

1. 收集规格，从设计中整理组件列表（每个组件都要注明类型）、有向连接（注明协议／标签）以及任何区域／边界分组。system-design 设计文档已经会生成这些内容。
2. 复制模板 assets/template.html 到工作文件。模板包含深色主题、网格背景、字体、导出工具栏和摘要卡片布局——请保持这些内容不变。
3. 使用下表将每个组件映射到语义类型（颜色）。
4. 按照 references/design-system.md 中的布局／间距规则放置方框并绘制箭头（先画箭头，让它们位于方框后面；使用半透明填充遮住后方箭头；垂直间距保持 ≥40px；图例放在边界方框之外）。
5. 标注流程——为箭头编号以显示请求顺序；异步／复制／回退流程使用虚线箭头；区域和安全分组使用虚线边界。
6. 填写摘要卡片，写入关键决策／权衡（与设计文档保持一致），并更新标题／页脚。
7. 打开文件：运行 open <file>.html 查看；工具栏可导出 PNG／PDF。

语义颜色（将组件映射到类型）

这些类型与构建模块对系统的分类方式一致。

组件类型	填充（rgba）	描边	用途
前端／客户端	rgba(8,51,68,0.4)	#22d3ee	Web／移动客户端、边缘节点
后端／服务	rgba(6,78,59,0.4)	#34d399	应用／API 服务、工作进程
数据库／存储	rgba(76,29,149,0.4)	#a78bfa	SQL／NoSQL、对象存储
缓存	rgba(8,51,68,0.4)	#38bdf8	Redis／Memcached、CDN 缓存
消息总线／队列	rgba(251,146,60,0.3)	#fb923c	Kafka、SQS、队列、流
云／托管服务	rgba(120,53,15,0.3)	#fbbf24	托管服务、区域
安全／身份验证	rgba(136,19,55,0.4)	#fb7185	网关、身份验证、防火墙
外部／通用	rgba(30,41,59,0.5)	#94a3b8	第三方服务、DNS

完整的样式、箭头标记、遮罩、间距和图例规则请参阅 references/design-system.md。

输出规则

• 使用一个独立的 .html 文件：内联 CSS、内联 SVG，不使用外部图像。
• 保留两个固定版本的 CDN 脚本（html2canvas + jsPDF）及其 SRI 哈希——它们仅用于支持复制／PNG／PDF 导出。图表不依赖这些脚本也能完整渲染；它们只用于导出。
• 避免使用 SVG <foreignObject>（在 html2canvas 中的渲染效果不一致）——请使用普通的 <rect>／<text>。
• 高层视图控制在约 8–15 个组件；深入分析时放大一个子系统，而不要把所有内容都塞进一张图里。

注意事项

应该：

• 仅在设计稳定后绘图；渲染设计文档已生成的组件列表和连接。
• 根据颜色表为每个框映射语义类型，让图表一目了然。
• 先画箭头，再画框（让箭头位于框后面）；按请求顺序为箭头编号，并仅将虚线箭头用于异步、复制或回退。
• 将组件数量控制在约 8–15 个；需要深入展示时，放大一个子系统，而不是绘制一张拥挤的图。
• 保持文件自包含——使用内联 CSS/SVG 和系统等宽字体，不引用外部图片——以便离线渲染。

不应该：

• 不要嵌入 Mermaid，也不要另创一套图表规范；本技能就是唯一的引擎。
• 不要使用 SVG <foreignObject>（html2canvas 对它的渲染不一致）——请使用纯 <rect>/<text>。
• 不要删除或改写固定版本 CDN 脚本的 SRI 哈希；仅在升级版本时重新计算。
• 不要将图例放进边界框，也不要将组件堆叠得间距不足 40px——这两种做法都会导致重叠。
• 不要依赖任何发送到 Claude 的传输方式；Copy-Prompt 按钮是自包含的默认方案。

交互／协作模式（可选）

为了与用户一起迭代，交互式变体增加了图层切换、连接类型筛选、缩放和点击评论功能，并会生成一个带有 Copy 按钮的反馈提示词。请参阅 references/interactive.md。它支持优雅降级：Copy-Prompt 按钮始终可用。只有安装了单独的提示词传输插件（例如 playground-sync），才能使用实时的 “Send to Claude” 按钮——本插件不要求安装或捆绑此类插件。

相关构建模块

• system-design — 由编排器在“绘制图表”步骤调用；其中的图表说明会提供各步骤需要绘制的内容。
• 任意构建模块 — 由“Diagram”部分写有“render with architecture-diagram”的构建模块调用。本技能为所有构建模块渲染图表；它负责生成图表，而其他构建模块会指向此处，而不是附带自己的图表生成方式。

参考资料

• references/design-system.md — 颜色、箭头标记、z 顺序／遮罩、间距、图例位置和导出工具栏内部机制。绘图前请阅读。
• references/interactive.md — 可选的交互式／可评论图表模式，以及（可选的）发送到 Claude 的传输方式。仅在构建交互式图表时阅读。

资源

• assets/template.html — 自包含的深色主题 HTML+SVG 起始模板，带有导出工具栏。复制并按需自定义。