菜单
本地优先的架构图与结构图生成工具。当用户要求画架构图、系统图、模块图、流程图、时序图、状态机、网络拓扑图、ER图、数据流图、微服务/云原生架构图、甘特图，或提到"画个图""架构图""系统图""模块图""拓扑图""时序图""draw/diagram/flowchart/architecture"时触发。纯本地渲染，无需云端、无需 node、无需 API Key；支持自包含 HTML 与内联 SVG 双输出，内置类型边界、间距可读性与出错重试。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/sujian666666com-glitch/kk-skill --skill architect-diagram-pro命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | architect-diagram-pro |
| version | 1.0.0 |
| displayName | 架构图生成 |
| description | 本地优先的架构图与结构图生成工具。当用户要求画架构图、系统图、模块图、流程图、时序图、状态机、网络拓扑图、ER图、数据流图、微服务/云原生架构图、甘特图，或提到"画个图""架构图""系统图""模块图""拓扑图""时序图""draw/diagram/flowchart/architecture"时触发。纯本地渲染，无需云端、无需 node、无需 API Key；支持自包含 HTML 与内联 SVG 双输出，内置类型边界、间距可读性与出错重试。 |
| agent_created | true |
| metadata | {"category":"tools","tags":["architecture","diagram","visualization","svg","html","flowchart"]} |
在本地生成架构图与结构图，纯本地、零外部依赖、数据不出本机。四层设计：语义层（规划画什么、为什么画）→ 护栏层（边界与防错）→ 模板层（暖色自包含 HTML）→ 生成层双轨（HTML / 内联 SVG）。
以下为最低兜底规范，即使未加载 references 也必须遵守：
0 0 680 <h>；优先网格/列布局，列间距 ≥40，同层节点间距 ≥16，文字与边框 padding ≥12。dy=-10 或 dx=10，或在文字下方先垫一个白底矩形再写字。澄清（意图/类型/输出形态不清时，用 ≤3 选项提问，勿啰嗦）：
语义规划（三不变式 + Mental Sandbox）：
画布 680×420。L1 接入层(y=40)：API 网关(100,60)。L2 应用层(y=160)：订单服务(80,180)、支付服务(300,180)。L3 数据层(y=300)：主库(80,320)、缓存(300,320)。连线：网关→订单→支付；订单→主库/缓存。图例在底部。 确认无坐标冲突、无文字压线风险后再写代码。
能力边界预检：对照 references/capability-matrix.md；落在 ❌ 区先说「不支持 + 原因 + 替代」再等确认。
选轨道：概览/要分享 → HTML；精细/多类型/对话直看 → 内联 SVG；进文档 → Mermaid。涉及多视图拆分时走第 5 步确认门。
生成：
assets/template.html 的 CSS 类与 theme 生成单文件，零外部 CDN（仅系统字体）。read_me(["diagram"]) 加载设计模块（含 HTML 交互控件才追加 "interactive"），再 show_widget 传原始 SVG；用 CSS 类 + <defs>/<use> 复用降低 token。自检与重试：逐条核对「核心强制规则」；任一项不过先改再发。出错按四段式回复，修复后重新自检并交付。
.html，暖色极简（背景 #edebe1、卡片 #f5f3eb、顶部 3px 色条），hover 上浮 + 渐入，响应式 768px 以下纵向；文件名建议 {project}-architecture.html。<svg> 开头，禁 <!DOCTYPE>/<html>/<head>/<body>；箭头用 <marker>（朝右 + orient="auto"，markerWidth/Height ≥ viewBox 宽高）；中文 font-family="sans-serif"；复杂图拆多张 show_widget。references/three-invariants.md — 三不变式与展示意图边界references/capability-matrix.md — 类型边界 ✅/❌ 与硬规则references/clarification-gate.md — 澄清三问 + 确认门 + scenarios 高亮references/svg-efficient-template.md — Token 高效 SVG 复用模板references/arrow-text-clearance.md — 文字避让（防压字）规范references/architecture-layout.md — 分层架构布局规范references/diagram-types.md — 各类型：最佳实践 → 反模式 → 骨架references/html-template-guide.md — HTML 模板使用与扩展references/self-check-and-errors.md — 渲染前自检 + 四段式出错与重试references/faq.md — 范围与异常排查