用途：当用户要求绘制系统、基础设施、云、安全、网络拓扑或架构图时使用，生成专业技术架构图。
主要能力：输出单个自包含 .html 文件，可在现代浏览器直接打开；内嵌 CSS（除 Google Fonts 外无外部样式表）与内联 SVG（无外部图像）；内含导出工具栏，提供 PNG / PDF / 复制到剪贴板按钮（经 CDN 引入 html2canvas + jsPDF，保留 SRI 哈希）。通过 getBoundingClientRect() + 32 px 内边距捕获整个 #report-container，PDF 下仍渲染 #020617 深色背景，所有文本标签带晕影以保证可读性。风格为蓝图美学：虚线集群边界、晕影文字、语义化调色板、Q 圆角正交连线，并有确定性几何审计 linter 作为发布门槛。
使用方式：该技能为自包含 Markdown，无需生成器脚本或构建步骤；模型在对话中直接应用设计系统算法并输出 HTML+SVG。流程为：读取设计系统与标签放置规则，先用横向三带草图规划布局，从 resources/template.html 复制并定制，放置组件与带标签箭头，然后运行几何审计（阻断性，须退出 0）——python3 ${CLAUDE_PLUGIN_ROOT}/skills/architecture-diagram/resources/geometry-audit.py <file>.html，再运行标签审计 python3 .../audit-labels.py <file>.html；需要调整间距时可用 coordinate-shifter.py。最终输出为 <name>-architecture.html。
适用场景：支付流水线、认证流程、多区域控制面与数据面拓扑等系统架构图。
限制：几何审计未通过前不视为完成；禁止在贝塞尔中点未查冲突处放标签、禁止亮色主色、禁止衬线/比例字体、不得省略导出工具栏、不得在 SVG 中使用 foreignObject、不得加载除 Google Fonts 与两个 CDN 脚本外的外部资源、组件默认最小间距 40 px。具体收费、价格与平台支持未提供。