{"id":"f199c27e-52e4-4b18-a129-2b342f03b6e5","entityType":"agent","slug":"clawhub-footya-arch-diagrammer","name":"用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 `.svg`（可离线打开）或 `.html`（浏览器直接预览）","canonicalUrl":"https://www.xpersona.co/agent/clawhub-footya-arch-diagrammer","canonicalPath":"/agent/clawhub-footya-arch-diagrammer","generatedAt":"2026-10-10T14:47:19.771Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":null},"description":"面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer... Skill: 用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 .svg（可离线打开）或 .html（浏览器直接预览） Owner: footya Summary: 面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T13:41:56.091Z | user arch-diagrammer v1.0.1 - 专业架构/流程制图技能，支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUM","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.4K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s17b3kmczwmrw0r70tc88brds5857asv:arch-diagrammer","sourceUrl":"https://clawhub.ai/footya/arch-diagrammer","homepage":"https://clawhub.ai/footya/skills/arch-diagrammer","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/footya/arch-diagrammer","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/footya/skills/arch-diagrammer","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":63,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":null},"stars":null,"forks":null,"downloads":1446,"packageName":null,"latestVersion":"1.0.1","tractionLabel":"1.4K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T12:01:38.353Z","lastCrawledAt":"2026-10-10T12:01:38.353Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T12:01:38.353Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.1","createdAt":"2026-04-20T13:41:56.091Z","changelog":"arch-diagrammer v1.0.1 - 专业架构/流程制图技能，支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUML/Graphviz 渲染 - 新增 11+ 种 SVG 风格可选，支持精确布局及中文显示 - 明确用户工作流（先给选项/建议再画图，遇不确定先询问） - 丰富分层架构图与流程图两类产出，详列规范与编码注意事项（如 UTF-8/中文码点引用） - 提供脚本、模板与快速开始说明，适配多种图类型与输出格式 - 内附架构自检清单与用法参考","fileCount":29,"zipByteSize":95617}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17b3kmczwmrw0r70tc88brds5857asv:arch-diagrammer","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T14:47:19.771Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":null},"readme":"Skill: 用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 `.svg`（可离线打开）或 `.html`（浏览器直接预览）\n\nOwner: footya\n\nSummary: 面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer...\n\nTags: latest:1.0.1\n\nVersion history:\n\nv1.0.1 | 2026-04-20T13:41:56.091Z | user\n\narch-diagrammer v1.0.1\n\n- 专业架构/流程制图技能，支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUML/Graphviz 渲染\n- 新增 11+ 种 SVG 风格可选，支持精确布局及中文显示\n- 明确用户工作流（先给选项/建议再画图，遇不确定先询问）\n- 丰富分层架构图与流程图两类产出，详列规范与编码注意事项（如 UTF-8/中文码点引用）\n- 提供脚本、模板与快速开始说明，适配多种图类型与输出格式\n- 内附架构自检清单与用法参考\n\nArchive index:\n\nArchive v1.0.1: 29 files, 95617 bytes\n\nFiles: assets/html/mermaid-standalone.html (1197b), assets/kroki-examples/ecommerce-microservices.svg (96089b), assets/kroki-examples/oauth2-auth-code-flow.svg (29064b), assets/kroki-examples/online-ordering-c4.svg (109078b), assets/kroki-examples/service-deps.svg (21275b), assets/kroki-examples/user-login-flow.svg (38318b), assets/svg-templates/ecommerce-architecture-blue.svg (11793b), assets/svg-templates/ecommerce-architecture-dark.svg (11573b), assets/svg-templates/ecommerce-architecture-handdrawn.svg (17906b), assets/svg-templates/layered-arch-template.svg (4685b), assets/svg-templates/template-cyber.svg (4660b), assets/svg-templates/template-gray.svg (4479b), assets/svg-templates/template-green.svg (4479b), assets/svg-templates/template-mono.svg (4287b), assets/svg-templates/template-morandi.svg (4093b), assets/svg-templates/template-ocean.svg (3915b), assets/svg-templates/template-orange.svg (4479b), assets/svg-templates/template-purple.svg (4479b), assets/sys-examples/payment-system-architecture.svg (13372b), CHANGELOG.md (715b), README.md (14686b), references/architecture-checklist.md (1392b), references/diagram-quickstart.md (2590b), references/svg-layered-spec.md (12542b), scripts/bump_version.py (3985b), scripts/render_kroki.py (7736b), skill-card.md (2557b), SKILL.md (8808b), _meta.json (134b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: arch-diagrammer\ndescription: 面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mermaid / PlantUML / Graphviz 描述结构，并通过 Kroki 渲染为 SVG 或 HTML。适用于系统架构设计、方案评审与技术沟通中的可视化输出。\nversion: 1.0.1\nauthor: yongsheng.hang\n---\n\n# 架构制图技能（Architecture Diagrammer）\n\n本技能帮助在产品/前端/后端/系统等多视角下，快速产出高质量的架构图、流程图、时序图与部署图，并导出为 SVG 与 HTML。\n\n## 产出模式\n\n### 模式一：纯 SVG 分层架构图（推荐用于分层展示）\n直接生成纯 SVG 代码，无需外部渲染，支持精确控制布局、配色、字体。\n\n**支持 11+ 种风格**（详见 `references/svg-layered-spec.md`）：\n\n| 风格 | 特点 | 适用场景 |\n|------|------|----------|\n| blue | 深蓝商务渐变 | 企业正式 |\n| cyber | 黑底霓虹色 | 科技演示 |\n| dark | GitHub Dark 主题 | 开发者 |\n| gray | 简约灰阶 | 文档嵌入 |\n| green | 森林绿渐变 | 自然环保 |\n| handdrawn | 手绘风格 | 草稿创意 |\n| mono | 极简黑白直角 | 打印极简 |\n| morandi | 低饱和度复古 | 设计感 |\n| ocean | 海洋蓝绿 | 清新科技 |\n| orange | 暖橙渐变 | 活力营销 |\n| purple | 紫色渐变 | 创意高端 |\n| tailwind | 多色层级区分 | 层级复杂 |\n\n- 适用：系统分层架构、方案架构、技术全景图\n- 参考：`references/svg-layered-spec.md`（风格规范、配色表、代码片段）\n- 模板：`assets/svg-templates/` 目录下各风格模板\n\n说明（重要）：\n- 当用户说“生成一个 **分层架构图** / “我要的是 **svg 的分层架构图**”，默认指 **纯分层 SVG（模式一）**，而不是 “Mermaid 渲染出的 SVG”。\n- 目标交付物：一个可离线打开的 `.svg` 文件（不依赖 Kroki / Mermaid CDN）。\n\n### 模式二：Mermaid/PlantUML/Graphviz + Kroki 渲染\n使用图形 DSL 描述结构，通过 Kroki 渲染为 SVG/HTML/PNG/PDF。\n- 适用：流程图、时序图、C4 架构图、依赖关系图\n- 参考：`references/diagram-quickstart.md`（语法速查）\n\n## 工作流\n\n### 画图前：先让用户选择\n在开始画图前，向用户提供若干建议供选择，确认后再动手：\n- **产出模式**：纯 SVG 分层图 vs Mermaid/PlantUML/Graphviz + Kroki\n- **图类型**：分层架构 / 流程图 / 时序图 / C4 / 部署图 等\n- **层级或复杂度**：层数按需（常见 2–5 层，不固定）、每层模块数量、是否要图例\n- **风格偏好**：11+ 种风格可选（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind，见 `references/svg-layered-spec.md`）、是否图例、输出格式（.svg / .html）\n用户选定或默认后，再按对应模式执行下方步骤。\n\n### 不确定时询问\n以下任一情况不确定时，**先向用户列出选项或给出建议，待确认后再动手**，不要自行假设：\n- 产出模式、图类型不明确\n- 层数、层级名称、每层包含哪些模块\n- 配色/风格偏好、是否要图例\n- 输出文件名、格式（.svg / .html）\n\n### 纯 SVG 分层架构图\n1) 按需求确定层级划分（层数不固定，常见 2–5 层，可少于 2 或多于 5）\n2) 选定配色风格（11+ 种可选：blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind，见 `references/svg-layered-spec.md`）\n3) 基于模板绘制层级容器与子模块（画布高度、层高按层数动态调整）\n4) 结构与连线（按需取舍）：\n   - 只表达对沟通有价值的“直接关系/关键路径”，不必把所有区块都强行连起来\n   - 允许出现不连线的独立模块/模块组（例如同层的独立域、横切能力、外部依赖清单）\n   - 允许同一行放多个互不相连的大模块（并排布局），按视觉平衡与阅读顺序灵活排布\n5) 添加箭头连线与标注（只画必要的流向与依赖，并用最少文字说明）\n6) 添加图例\n7) 对照 `references/architecture-checklist.md` 自检\n8) 版式检查（避免重叠）：\n   - 层级标题与子模块之间至少预留 8-12px\n   - 子模块与层级容器底部至少预留 10-16px\n   - 同层/同一行可并排多个独立模块组：组间留足间距，避免交叉线，必要时用小标题/分组框增强可读性\n   - 图例不要贴底，必要时增加画布高度（`<svg height=\"...\">`）并下移图例\n9) 编码检查（避免中文乱码）：\n   - 输出文件声明 UTF-8：`<?xml version=\"1.0\" encoding=\"UTF-8\"?>`\n   - **推荐**：中文一律使用 XML 数字字符引用（`&#xXXXX;`），不依赖文件编码，任何 SVG 查看器都能正确显示。规则：每个汉字对应 `&#x` + 其 Unicode 码点（4 位十六进制）+ `;`，例如「权限」→ `&#x6743;&#x9650;`。详见 `references/svg-layered-spec.md` 的「中文编码与乱码修正」。\n   - 若已用裸中文且出现乱码，可整体重写为数字字符引用，或用脚本按 UTF-8 重写文件（避免局部编辑混入非 UTF-8 字节）。\n\n### Mermaid/PlantUML/Graphviz\n1) 明确目标与范围：业务目标、上下文、关键约束\n2) 选择图类型：C4（Context/Container/Component）、流程图、时序图、部署图\n3) 起稿与迭代：从粗到细，命名统一、边界清晰\n4) 渲染与导出：使用 `scripts/render_kroki.py` 生成 SVG 或 HTML\n5) 质量检查：对照 `references/architecture-checklist.md` 自检\n\n## 快速开始\n- 语法速查与范例：见 `references/diagram-quickstart.md`\n- 质量检查清单：见 `references/architecture-checklist.md`\n- 以下命令默认假定本 skill 安装在 `~/.cursor/skills/arch-diagrammer/`\n\n### 渲染为 SVG（Kroki）\n```bash\npython3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type mermaid --format svg \\\n  --in your_diagram.mmd --out out.svg\n```\n\n### 渲染为 HTML（可直接在浏览器打开）\n```bash\npython3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type plantuml --format html \\\n  --in your_diagram.puml --out out.html\n```\n\n### C4 架构图（使用 Kroki 内置 C4 支持）\n```bash\npython3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type c4plantuml --format svg \\\n  --in your_c4.puml --out out.svg\n```\nKroki 内置 C4-PlantUML 宏，源文件**不需要** `!includeurl` 引用 C4 库。\n\n### JSON API 模式\n当纯文本 POST 遇到特殊字符问题时，加 `--json` 切换为 JSON POST（`POST /` + JSON body）：\n```bash\npython3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type graphviz --format svg --json \\\n  --in your_diagram.dot --out out.svg\n```\n\n说明：\n- `--type` 支持 Kroki 全部 28 种图类型：`actdiag` | `blockdiag` | `bpmn` | `bytefield` | `c4plantuml` | `d2` | `dbml` | `ditaa` | `erd` | `excalidraw` | `graphviz` | `mermaid` | `nomnoml` | `nwdiag` | `packetdiag` | `pikchr` | `plantuml` | `rackdiag` | `seqdiag` | `structurizr` | `svgbob` | `symbolator` | `tikz` | `umlet` | `vega` | `vegalite` | `wavedrom` | `wireviz`\n- 别名：`dot`→graphviz、`c4`→c4plantuml、`vega-lite`→vegalite\n- `--format` 支持：`svg` | `png` | `pdf` | `jpeg` | `html`（可由 `--out` 后缀自动推断）\n- `--json`：使用 JSON POST API（`POST /` + `{\"diagram_source\":...}`），适用于包含特殊字符的复杂图\n- `--kroki-url`：指定私有 Kroki 实例；或用环境变量 `KROKI_URL`（默认 `https://kroki.io`）\n- `--list-types`：列出全部支持的图类型\n- 输入来源：`--in` 文件或标准输入（省略 `--in` 时从 stdin 读取）\n\n### 渲染为 SVG（本地 Mermaid CLI，避免 Kroki 失败）\n当 Kroki 返回 403/限流（常见于公共服务）时，可改用本地渲染：\n```bash\nnpx -y @mermaid-js/mermaid-cli -i your_diagram.mmd -o out.svg\n```\n\n## 产出建议\n- 命名清晰、一致：系统、服务、模块、接口、数据流命名统一\n- 图例与边界：提供清晰图例；明确系统边界、外部依赖与信任区\n- 分层与分视图：按 C4 层次逐步细化，避免一图承载过多信息\n- 可复用：将公共元素抽为模板/片段，便于复用与演进\n\n## 参考\n- **纯 SVG 风格规范**：`references/svg-layered-spec.md`（11+ 种风格配色、布局、代码片段）\n- **分层架构模板**：`assets/svg-templates/` 目录下各风格模板\n- **Mermaid/PlantUML/Graphviz 语法**：`references/diagram-quickstart.md`\n- **质量检查清单**：`references/architecture-checklist.md`\n- **HTML 预览模板**：`assets/html/mermaid-standalone.html`\n\nFile v1.0.1:README.md\n\n# arch-diagrammer（架构制图技能）\n\n用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 `.svg`（可离线打开）或 `.html`（浏览器直接预览）。\n\n## 安装\n\n适合以“个人 skill 包”的方式分发。\n\n1. 将整个 `arch-diagrammer/` 目录复制到 `~/.cursor/skills/`\n2. 确保最终目录为 `~/.cursor/skills/arch-diagrammer/`\n3. 如需运行渲染脚本，确保本机可用 `python3`\n4. 如需本地 Mermaid CLI 渲染，确保本机可用 Node.js 与 `npx`\n\n安装完成后，skill 目录建议至少包含：\n\n- `SKILL.md`\n- `README.md`\n- `LICENSE`\n- `VERSION`\n- `CHANGELOG.md`\n- `assets/`\n- `references/`\n- `scripts/`\n\n## 构建发布包\n\n推荐在发布前先确认版本号已经更新完成：\n\n```bash\npython3 scripts/bump_version.py patch\n```\n\n如果当前版本号已经正确，也可以跳过这一步。\n\n然后在 `arch-diagrammer` 根目录执行打包：\n\n```bash\npython3 scripts/build_release.py\n```\n\n如果你当前在仓库根目录，也可以直接执行：\n\n```bash\npython3 skills/arch-diagrammer/scripts/build_release.py\n```\n\n默认会生成：\n\n- `dist/arch-diagrammer-<version>.zip`\n\n例如当前版本 `1.0.1`，生成产物为：\n\n- `dist/arch-diagrammer-1.0.1.zip`\n\n## 打包步骤\n\n1. 确认 `VERSION`、`CHANGELOG.md` 已更新到准备发布的版本\n2. 在 `arch-diagrammer` 根目录执行 `python3 scripts/build_release.py`\n3. 检查 `dist/` 目录下是否生成对应版本的 zip 包\n4. 将该 zip 包发给使用者，或上传到你们内部制品库 / 文档平台\n5. 使用者解压后，将 `arch-diagrammer/` 整个目录复制到 `~/.cursor/skills/`\n\n## 打包说明\n\n- `build_release.py` 会自动读取 `VERSION` 中的版本号作为发布包文件名\n- 打包内容默认包含运行所需的 `SKILL.md`、`assets/`、`references/`、`scripts/` 等必要文件\n- 打包产物位于 `dist/` 目录，便于持续发布多个版本\n- 该打包方式适合“复制到个人 Cursor skills 目录即可使用”的分发模式\n- 如果后续版本升级，重新执行打包命令即可生成新的版本包\n\n压缩包解压后目录结构保持为：\n\n- `arch-diagrammer/SKILL.md`\n- `arch-diagrammer/README.md`\n- `arch-diagrammer/LICENSE`\n- `arch-diagrammer/VERSION`\n- `arch-diagrammer/CHANGELOG.md`\n- `arch-diagrammer/assets/...`\n- `arch-diagrammer/references/...`\n- `arch-diagrammer/scripts/...`\n\n## 版本管理\n\n- 当前版本：`1.0.1`\n- 变更记录：见 `CHANGELOG.md`\n- 升级命令：`python3 scripts/bump_version.py patch|minor|major`\n- 脚本行为：同步更新版本号并自动插入 `CHANGELOG.md` 新版本模板\n- 版本规则：遵循语义化版本，`major` 为不兼容调整，`minor` 为新增能力，`patch` 为修正和小优化\n\n## 选择产出模式\n\n- **模式一：纯 SVG 分层架构图**\n  - 适用：系统分层架构、方案全景图、需要精确布局/配色/字体、离线可用\n  - 交付：直接输出一份可打开的 `.svg`（不依赖 Kroki/Mermaid CDN）\n  - 风格与模板：见 `references/svg-layered-spec.md` 与 `assets/svg-templates/`\n\n- **模式二：Mermaid / PlantUML / Graphviz + Kroki 渲染**\n  - 适用：流程图、时序图、C4、依赖关系图等\n  - 交付：用 DSL 描述图形，再渲染为 `.svg/.png/.pdf/.html`\n  - 语法速查：见 `references/diagram-quickstart.md`\n\n说明：当需求表述为“分层架构图 / svg 分层架构图”时，默认指**模式一**的纯 SVG 分层图。\n\n## 最小输入要素（建议你提供）\n\n- **产出模式**：模式一 / 模式二\n- **图类型**：分层架构 / 流程 / 时序 / C4 / 部署（模式二为主）\n- **内容结构**：\n  - 模式一：层级名称、每层模块列表、需要表达的关键连线（可选）\n  - 模式二：DSL 源文件（`.mmd/.puml/.dot`）或其文本内容\n- **风格偏好**（模式一）：`blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind`\n- **输出**：文件名与格式（`.svg` 或 `.html`）\n\n\n## 提示词示例\n\n### 纯 SVG 分层架构图（模式一）\n![payment-system-architecture](assets/sys-examples/payment-system-architecture.svg)\n\n一句话版本（更像口语，复制就能用）：\n\n```\n使用 arch-diagrammer 帮我画一个支付系统的分层架构图，包含 4 层结构，使用手绘风格（handdrawn），输出一个可打开的 .svg 文件。\n```\n\n同款风格的展开版（写清楚一点更稳）：\n\n```\n使用 arch-diagrammer 画“支付系统”的分层架构图，4 层，手绘风格：handdrawn，输出 .svg。\n标题：支付系统分层架构图。\n分几层（4 层）：接入层 / 交易编排层 / 支付核心层 / 数据与外部依赖层。\n每层放哪些模块（你也可以按你项目改名）：\n- 接入层：App/H5、商户后台、API Gateway、WAF、限流熔断\n- 交易编排层：收银台、订单服务、路由/编排、通知回调（Webhook）\n- 支付核心层：支付服务、风控、账务、清结算、对账\n- 数据与外部依赖层：MySQL、Redis、MQ(Kafka/RocketMQ)、对象存储(可选)、第三方支付通道(微信/支付宝/银联)\n关键链路（只画最重要的）：App/H5 -> API Gateway -> 收银台 -> 支付服务 -> 第三方支付通道；支付服务 -> MQ -> 通知回调；支付服务 -> MySQL/Redis；清结算/对账 -> MySQL。\n```\n\n### Mermaid 流程图（模式二）\n![oauth2-auth-code-flow.svg](assets/kroki-examples/oauth2-auth-code-flow.svg)\n\n一句话版本：\n\n```\n使用 arch-diagrammer 画一个 OAuth 2.0 授权码模式的流程图，用 Mermaid 时序图，输出.svg\n```\n\n展开版：\n\n```\n使用 arch-diagrammer，用 Mermaid 时序图画 OAuth 2.0 授权码模式（Authorization Code）的完整流程。\n参与者：用户(User)、客户端(Client)、授权服务器(Auth Server)、资源服务器(Resource Server)。\n流程：\n1. User -> Client：点击登录\n2. Client -> Auth Server：重定向到授权页（携带 client_id、redirect_uri、scope、state）\n3. User -> Auth Server：输入凭证并授权\n4. Auth Server -> Client：回调 redirect_uri（携带 authorization_code、state）\n5. Client -> Auth Server：用 authorization_code 换取 access_token（携带 client_secret）\n6. Auth Server -> Client：返回 access_token + refresh_token\n7. Client -> Resource Server：携带 access_token 请求资源\n8. Resource Server -> Client：返回受保护资源\n输出：.svg。\n```\n\n### PlantUML C4（模式二）\n![online-ordering-c4](assets/kroki-examples/online-ordering-c4.svg)\n\n一句话版本：\n\n```\n使用 arch-diagrammer，用 PlantUML C4 画一个在线点餐系统的容器图，输出.svg\n```\n\n展开版：\n\n```\n使用 arch-diagrammer，用 PlantUML（C4-PlantUML）画容器图（Container）。\n系统：在线点餐系统。\n外部角色：顾客（Mobile App）、门店店员（Store Dashboard）、第三方支付（支付宝/微信支付）。\n容器：API Gateway、Order Service、Menu Service、Payment Service、Notification Service、PostgreSQL、Redis、RabbitMQ。\n关系：\n- 顾客 -> API Gateway(HTTPS)\n- 门店店员 -> API Gateway(HTTPS)\n- API Gateway -> Order Service(gRPC)\n- API Gateway -> Menu Service(gRPC)\n- Order Service -> Payment Service(gRPC)\n- Payment Service -> 第三方支付(HTTPS 回调)\n- Order Service -> RabbitMQ(发布订单事件)\n- Notification Service -> RabbitMQ(消费订单事件)\n- Order Service -> PostgreSQL(读写)\n- Menu Service -> PostgreSQL(读写)\n- Order Service -> Redis(缓存)\n- Menu Service -> Redis(缓存)\n输出：.html，并给出渲染命令。\n```\n\n\n## 分层架构图 (模式一)\n\n### 基础风格模板预览\n\n#### cyber\n\n![template-cyber](assets/svg-templates/template-cyber.svg)\n\n#### gray\n\n![template-gray](assets/svg-templates/template-gray.svg)\n\n#### green\n\n![template-green](assets/svg-templates/template-green.svg)\n\n#### mono\n\n![template-mono](assets/svg-templates/template-mono.svg)\n\n#### morandi\n\n![template-morandi](assets/svg-templates/template-morandi.svg)\n\n#### ocean\n\n![template-ocean](assets/svg-templates/template-ocean.svg)\n\n#### orange\n\n![template-orange](assets/svg-templates/template-orange.svg)\n\n#### purple\n\n![template-purple](assets/svg-templates/template-purple.svg)\n\n### 分层架构模板\n\n![layered-arch-template](assets/svg-templates/layered-arch-template.svg)\n\n### 电商架构示例\n\n#### blue\n\n![ecommerce-architecture-blue](assets/svg-templates/ecommerce-architecture-blue.svg)\n\n#### dark\n\n![ecommerce-architecture-dark](assets/svg-templates/ecommerce-architecture-dark.svg)\n\n#### handdrawn\n\n![ecommerce-architecture-handdrawn](assets/svg-templates/ecommerce-architecture-handdrawn.svg)\n\n## Kroki 渲染脚本（模式二）\n\n> Kroki 支持的 28 种图类型\n\n### 高频（软件开发常用）\n\n| 类型 | 中文名称 | 说明 | 适用场景 |\n|------|----------|------|----------|\n| mermaid | Mermaid 图 | Markdown 风格的图形语言，生态最活跃 | 流程图、时序图、甘特图、类图、饼图、Git 图 |\n| plantuml | PlantUML 图 | 功能最全面的 UML 图形语言 | 时序图、类图、用例图、活动图、状态图、组件图 |\n| c4plantuml | C4 架构图 | 基于 PlantUML 的 C4 模型（Context/Container/Component/Code） | 系统架构设计、方案评审、技术全景 |\n| graphviz | 有向/无向图 | DOT 语言，强大的图布局引擎 | 依赖关系图、调用链、组织架构、状态机 |\n| d2 | D2 声明式图 | 新一代声明式图形语言，语法简洁、自动布局 | 架构图、流程图、ER 图，追求简洁语法时 |\n\n### 中频（特定领域）\n\n| 类型 | 中文名称 | 说明 | 适用场景 |\n|------|----------|------|----------|\n| dbml | 数据库标记语言 | 专门描述数据库表结构与关系 | 数据库设计、ER 图、表关系文档 |\n| erd | 实体关系图 | 用简洁语法描述实体与关系 | 数据库建模、领域模型设计 |\n| structurizr | Structurizr DSL | 基于 C4 模型的架构描述语言 | C4 多层级架构图、架构即代码 |\n| bpmn | 业务流程建模 | BPMN 2.0 标准的业务流程图 | 企业业务流程建模、审批流、工单流程 |\n| vegalite | Vega-Lite 可视化 | Vega 的简化版，更易上手 | 数据分析图表（柱状图、折线图、散点图、热力图） |\n| vega | Vega 可视化 | 声明式数据可视化语法（完整版） | 复杂交互式数据图表、自定义可视化 |\n\n### 低频（专业 / 硬件 / 学术）\n\n| 类型 | 中文名称 | 说明 | 适用场景 |\n|------|----------|------|----------|\n| actdiag | 活动图 | 用简洁语法描述活动（动作）之间的流转 | 业务活动流程、操作步骤可视化 |\n| blockdiag | 块图 | 用方块和连线描述模块间关系 | 系统模块关系、简单架构概览 |\n| bytefield | 字节域图 | 展示二进制协议、数据包的字段布局 | 网络协议设计、数据帧/报文格式文档 |\n| ditaa | ASCII 转图 | 将 ASCII 字符画转为正式图形 | 快速草图、文本环境下的图形化表达 |\n| excalidraw | 手绘风白板图 | Excalidraw JSON 格式，手绘风格 | 头脑风暴、非正式草图、创意设计 |\n| nomnoml | UML 草图 | 简洁语法的 UML 风格图 | 快速 UML 类图、对象图草稿 |\n| nwdiag | 网络拓扑图 | 描述网络设备与连接拓扑 | 网络架构、机房拓扑、VLAN 规划 |\n| packetdiag | 数据包结构图 | 展示网络数据包各字段的位宽布局 | 网络协议字段、数据包格式文档 |\n| pikchr | Pikchr 图 | PIC 语法衍生的精确布局图形语言 | 技术文档中的精确示意图、SQLite 项目常用 |\n| rackdiag | 机架图 | 描述服务器机架中设备的物理布局 | 数据中心规划、机房设备布局文档 |\n| seqdiag | 时序图 | 专注于时序交互的图形语言 | 服务间调用时序、接口交互文档 |\n| svgbob | ASCII 转 SVG | 将 ASCII 字符画转为精美 SVG | 文档中的简单示意图、管道/电路图 |\n| symbolator | 硬件符号图 | 从 VHDL/Verilog 头文件生成硬件模块符号 | 芯片/FPGA 模块接口文档 |\n| tikz | TikZ/LaTeX 图 | LaTeX 的 TikZ 宏包绘图 | 学术论文图表、数学图形、精确科学插图 |\n| umlet | UMLet 图 | 轻量 UML 建模工具的格式 | 快速 UML 建模、教学演示 |\n| wavedrom | 波形图 | 数字信号时序波形图 | 数字电路时序、总线协议、信号波形文档 |\n| wireviz | 线缆接线图 | 描述线缆、连接器与接线关系 | 电气接线图、线束设计、硬件连接文档 |\n\n## Kroki 画图示例\n\n源文件与渲染结果均位于 `assets/kroki-examples/`。\n\n### 示例 1：Mermaid 时序图 — 用户登录流程\n\n提示词（复制到 Cursor）：\n\n```text\n请在仓库中使用 arch-diagrammer 生成一张「用户登录流程」的 Mermaid 时序图。\n\n要求：\n- 产出为 Mermaid 源码（sequenceDiagram）\n- 参与者至少包含：用户、Web/客户端、认证服务、用户服务、数据库\n- 覆盖主流程与失败分支：密码错误、账号不存在、验证码/2FA（可选）\n- 文字使用中文\n输出.svg\n```\n渲染结果：\n\n![login-sequence](assets/kroki-examples/user-login-flow.svg)\n\n### 示例 2：C4 PlantUML 容器图 — 电商微服务\n\n提示词（复制到 Cursor）：\n\n```text\n请使用 arch-diagrammer 生成一张「电商微服务」的 C4-PlantUML 容器图（Container Diagram）。\n\n要求：\n- 使用 Kroki 的 c4plantuml（不要写 !includeurl）\n- 组件至少包含：Web 前端、API Gateway、订单服务、库存服务、支付服务、消息队列、数据库、第三方支付\n- 标注关键关系与协议（HTTP/gRPC/消息）并尽量用中文描述\n输出.svg\n```\n\n渲染结果：\n\n![microservice-c4](assets/kroki-examples/ecommerce-microservices.svg)\n\n### 示例 3：Graphviz 依赖图 — 服务依赖关系\n\n提示词（复制到 Cursor）：\n\n```text\n请使用 arch-diagrammer 生成一张「服务依赖关系」的 Graphviz 依赖图（dot）。\n\n要求：\n- 用有向图表示调用/依赖关系\n- 节点至少包含：api-gateway、user-service、order-service、inventory-service、payment-service、notification-service、auth-service、mysql、redis、mq\n- 将“存储/中间件”（mysql/redis/mq）用不同形状或颜色区分\n- 图中尽量用英文 service 名 + 中文说明（可用 label）\n输出.svg\n```\n\n渲染结果：\n\n![service-deps](assets/kroki-examples/service-deps.svg)\n\n## 参考\n\n- `SKILL.md`：完整工作流与约定\n- `references/architecture-checklist.md`：质量自检清单\n- `references/svg-layered-spec.md`：纯 SVG 分层图规范与风格模板索引\n- `references/diagram-quickstart.md`：Mermaid/PlantUML/Graphviz 语法速查\n\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn727nkkzvcmz23s3qcktr52ys81r5cf\",\n  \"slug\": \"arch-diagrammer\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1776692516091\n}\n\nFile v1.0.1:references/architecture-checklist.md\n\n# 架构图质量检查清单\n\n## 表达与一致性\n- 名称统一：系统/服务/模块/队列/数据库等命名风格一致\n- 边界清晰：系统边界、信任区（Trust Boundary）、外部依赖明确\n- 图例可读：颜色/线型/箭头/图标含义在图例中解释\n- 视角单一：每张图只表达一个核心视角，避免信息过载\n\n## 正确性与可追溯\n- 源数据一致：与需求文档/接口定义/数据库模型一致\n- 数据流/控制流方向正确，协议/端口/鉴权方式明确\n- 版本化：图文件纳入版本管理，支持差异对比与回溯\n\n## 可运维性与安全\n- 可观测性：日志/指标/追踪链路位置与聚合方案\n- 弹性与容错：限流/重试/降级/熔断策略标注\n- 安全：认证鉴权/数据加密/密钥管理/最小权限/审计\n- 可靠性：多机房/多可用区/灾备/备份与恢复路径\n\n## 性能与扩展\n- 关键路径：延迟敏感链路、瓶颈点与容量假设\n- 缓存策略：层级/一致性/过期与预热机制\n- 异步解耦：消息队列/事件流/批处理边界\n- 水平扩展：无状态服务/会话粘滞/数据分片\n\n## 可落地与演进\n- 依赖清单：外部系统/第三方服务的 SLA 与限制\n- 环境映射：开发/测试/预发/生产部署差异\n- 迁移计划：灰度发布/回滚策略/数据迁移步骤\n- 模块化：公共能力沉淀与复用点标注\n\nFile v1.0.1:references/diagram-quickstart.md\n\n# 制图语法速查与范例\n\n本页提供常用图形语言的最小可用片段与惯用法，便于快速起稿并通过 Kroki 渲染为 SVG/HTML。\n\n## Mermaid\n\n### 流程图（Flowchart）\n```mermaid\nflowchart TD\n  A[用户请求] --> B{鉴权?}\n  B -- 否 --> X[拒绝]\n  B -- 是 --> C[路由网关]\n  C --> D[服务A]\n  C --> E[服务B]\n  D -->|事件| F[(消息队列)]\n  E -->|订阅| F\n```\n\n### 时序图（Sequence Diagram）\n```mermaid\nsequenceDiagram\n  participant U as 用户\n  participant GW as 网关\n  participant S as 服务\n  U->>GW: 发起请求\n  GW->>S: 转发请求\n  S-->>GW: 响应\n  GW-->>U: 返回结果\n```\n\n## PlantUML（含 C4 模型）\n\n> Kroki 内置 C4-PlantUML 宏支持，使用 `--type c4plantuml`（别名 `c4`）时**不需要** `!includeurl` 引用 C4 库。\n> 如果通过本地 PlantUML 渲染（非 Kroki），才需要 `!includeurl` 远程引用。\n\n### C4 上下文图（Context）\n\n渲染命令：`python scripts/render_kroki.py --type c4plantuml --in context.puml --out context.svg`\n\n```plantuml\n@startuml\nPerson(user, \"用户\", \"使用系统的人\")\nSystem_Boundary(sys, \"系统\") {\n  System(api, \"API 服务\", \"提供业务能力的服务\")\n}\nSystem_Ext(pay, \"支付平台\", \"第三方\")\n\nRel(user, api, \"调用\")\nRel(api, pay, \"支付请求\")\n@enduml\n```\n\n### C4 容器图（Container）\n\n渲染命令：`python scripts/render_kroki.py --type c4plantuml --in container.puml --out container.svg`\n\n```plantuml\n@startuml\nSystem_Boundary(sys, \"系统\") {\n  Container(gw, \"API Gateway\", \"NGINX/Envoy\", \"统一入口\")\n  Container(svc, \"业务服务\", \"Java/Spring\", \"核心业务逻辑\")\n  ContainerDb(db, \"主库\", \"MySQL\", \"事务数据\")\n  Container(queue, \"队列\", \"Kafka\", \"异步解耦\")\n}\n\nRel(gw, svc, \"HTTP\")\nRel(svc, db, \"JDBC\")\nRel(svc, queue, \"生产/消费\")\n@enduml\n```\n\n## Graphviz（DOT）\n```dot\ndigraph G {\n  rankdir=LR;\n  node [shape=box, style=rounded];\n  User -> Gateway -> Service -> DB;\n  Service -> Queue;\n}\n```\n\n## 渲染提示\n- Mermaid 更适合流程/时序；PlantUML 适合 C4/时序/用例；Graphviz 适合结构/依赖关系\n- Kroki 支持 28 种图类型（D2、DBML、Ditaa、Erd、BPMN、Excalidraw、Nomnoml 等），用 `--list-types` 查看完整列表\n- C4 图用 `--type c4plantuml`（别名 `c4`），Kroki 已内置 C4 宏，源文件无需 `!includeurl`\n- 遇到特殊字符渲染失败时加 `--json` 切换为 JSON POST API\n- 输出 HTML 时：\n  - Mermaid：默认生成包含 CDN 渲染逻辑的独立 HTML（不经过 Kroki）\n  - 其他类型：先通过 Kroki 渲染 SVG，再包裹到 HTML\n\nFile v1.0.1:references/svg-layered-spec.md\n\n# SVG 分层架构图规范\n\n本规范用于产出高质量、现代风格的分层架构 SVG，无需外部渲染，直接编写 SVG 代码。\n\n## 适用场景\n- 需要精确控制布局、配色、字体\n- 产出文件需离线可用、无外部依赖\n- 分层展示系统架构（用户入口 → 业务逻辑 → 服务 → 数据层等）\n\n## 画布与基础结构\n\n```svg\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"1000\" height=\"700\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n        <!-- 箭头标记 -->\n        <marker id=\"arrowhead\" markerWidth=\"6\" markerHeight=\"5\" refX=\"6\" refY=\"2.5\" orient=\"auto\">\n            <polygon points=\"0 0, 6 2.5, 0 5\" fill=\"#94a3b8\"/>\n        </marker>\n    </defs>\n    <!-- 背景 -->\n    <rect width=\"100%\" height=\"100%\" fill=\"#f8fafc\"/>\n    <!-- 标题 -->\n    <text x=\"500\" y=\"40\" text-anchor=\"middle\" font-size=\"22\" font-weight=\"600\" fill=\"#1e293b\" font-family=\"system-ui, -apple-system, sans-serif\">架构图标题</text>\n    <!-- 层级内容 -->\n    ...\n    <!-- 图例 -->\n    ...\n</svg>\n```\n\n## 配色风格（12 种可选）\n\n### 模板清单\n\n| 风格 | 模板文件 | 类型 |\n|------|----------|------|\n| tailwind | `layered-arch-template.svg` | 通用骨架 |\n| cyber | `template-cyber.svg` | 骨架模板 |\n| gray | `template-gray.svg` | 骨架模板 |\n| green | `template-green.svg` | 骨架模板 |\n| mono | `template-mono.svg` | 骨架模板 |\n| morandi | `template-morandi.svg` | 骨架模板 |\n| ocean | `template-ocean.svg` | 骨架模板 |\n| orange | `template-orange.svg` | 骨架模板 |\n| purple | `template-purple.svg` | 骨架模板 |\n| blue | `ecommerce-architecture-blue.svg` | 完整示例 |\n| dark | `ecommerce-architecture-dark.svg` | 完整示例 |\n| handdrawn | `ecommerce-architecture-handdrawn.svg` | 完整示例 |\n\n- **骨架模板**：4层×4模块的简化结构，快速套用风格\n- **完整示例**：6层电商架构，展示复杂场景的排版参考\n\n### 1. Blue（深蓝商务风）\n适合：企业级、正式场景\n- 背景：`#ffffff`\n- 层级渐变：`#1a1a2e` → `#16213e` → `#0f3460`（从深到中）\n- 数据层：白底 + `#e94560` 边框（强调色）\n- 基础设施层：`#f5f5f5` + 灰边框\n- 文字：白字在深色层，深色在浅色层\n\n### 2. Cyber（赛博朋克）\n适合：科技感、未来感、演示\n- 背景：`#0a0a0f`（近黑）\n- 层级边框：霓虹色 `#00d4ff`（cyan）、`#7b2ff7`（紫）、`#f72585`（品红）、`#4cc9f0`（亮蓝）\n- 填充：`#12121a`（深灰）\n- 支持 `<linearGradient>` 标题渐变\n- 文字：霓虹色与浅色\n\n### 3. Dark（GitHub Dark 主题）\n适合：开发者、深色模式\n- 背景：`#0d1117`\n- 层级容器：`#161b22`\n- 子模块：`#21262d`\n- 边框色系：`#30363d`（灰）、`#238636`（绿）、`#8957e5`（紫）、`#f78166`（橙）、`#388bfd`（蓝）、`#da3633`（红）\n- 文字：`#c9d1d9`（正文）、彩色标题\n\n### 4. Gray（简约灰阶）\n适合：文档嵌入、简洁正式\n- 背景：`#ffffff`\n- 层级渐变：`#1f2937` → `#374151` → `#4b5563`（灰阶）\n- 数据层：白底 + `#6b7280` 边框\n- 基础设施层：`#f3f4f6` + `#d1d5db` 边框\n- 文字：白字在深色层\n\n### 5. Green（森林绿）\n适合：环保、健康、自然主题\n- 背景：`#ffffff`\n- 层级渐变：`#1b4332` → `#2d6a4f` → `#40916c`\n- 数据层：`#d8f3dc` + `#52b788` 边框\n- 基础设施层：`#f5f5f5`\n- 文字：白字在深色层，`#1b4332` 在浅色层\n\n### 6. Handdrawn（手绘风格）\n适合：演示草稿、创意讨论、非正式场景\n- 背景：`#fdfbf7`（米白）\n- 使用 SVG `<filter>` 制作手绘笔触效果\n- 手写字体：`'Wawati SC', 'Ma Shan Zheng', cursive`\n- 使用 `<path>` 绘制不规则边框\n- 文字加 `transform=\"rotate(±0.x)\"` 微倾斜\n- 每层不同浅色背景：`#fff8f0`、`#f5fff5`、`#f8f5ff`、`#fff5f8`、`#fdfdf5`、`#f5fafa`\n\n### 7. Mono（极简黑白）\n适合：打印、黑白文档、极简风格\n- 背景：`#ffffff`\n- 层级渐变：`#000000` → `#222222` → `#444444` → `#666666`\n- 数据层：`#f0f0f0` + 黑边框\n- 基础设施层：`#e5e5e5` + 黑边框\n- **直角无圆角**：`rx=\"0\"`\n- 文字：黑白对比\n\n### 8. Morandi（莫兰迪色调）\n适合：设计感、复古、低饱和度偏好\n- 背景：`#f5f0eb`（暖灰）\n- 层级色系（低饱和度）：\n  - `#8d9a9e`（灰蓝）\n  - `#a4b4a0`（灰绿）\n  - `#c4a589`（灰棕）\n  - `#c9a9a6`（灰粉）\n  - `#e0d5cb`（米色）\n  - `#9a8f97`（灰紫）\n- 子模块：`rgba(255,255,255,0.15)` 半透明\n- 文字：白字在深色层，`#5d5d5d` 在浅色层\n\n### 9. Ocean（海洋蓝绿）\n适合：清新、数据可视化、科技\n- 背景：`#e8f4f8`（浅蓝）\n- 层级渐变：`#0369a1` → `#0891b2` → `#14b8a6`（蓝到青绿）\n- 子模块：`#0284c7`、`#06b6d4`、`#2dd4bf`\n- 数据层：`#f0fdfa` + `#5eead4` 边框\n- 基础设施层：`#cffafe` + `#7dd3fc` 边框\n- 文字：白字在深色层，`#0f766e` 在浅色层\n\n### 10. Orange（暖橙色调）\n适合：活力、热情、营销主题\n- 背景：`#ffffff`\n- 层级渐变：`#7c2d12` → `#c2410c` → `#ea580c`\n- 数据层：`#fff7ed` + `#f97316` 边框\n- 基础设施层：`#f5f5f5`\n- 文字：白字在深色层，`#7c2d12` 在浅色层\n\n### 11. Purple（紫色调）\n适合：创意、高端、神秘感\n- 背景：`#ffffff`\n- 层级渐变：`#2d1b69` → `#4a3298` → `#6b4dc4`\n- 数据层：`#f3e8ff` + `#9d4edd` 边框\n- 基础设施层：`#f5f5f5`\n- 文字：白字在深色层，`#2d1b69` 在浅色层\n\n### Tailwind（经典多色）\n适合：层级多、需要色彩区分度\n\n| 用途 | 背景色 | 边框色 | 文字色 | 说明 |\n|------|--------|--------|--------|------|\n| 用户入口层 | `#fef3c7` | `#f59e0b` | `#b45309` | Amber |\n| 入口层子块 | `#fde68a` | `#f59e0b` | `#92400e` | Amber 浅 |\n| 业务逻辑层 | `#dbeafe` | `#3b82f6` | `#1d4ed8` | Blue |\n| 业务层子块 | `#bfdbfe` | `#3b82f6` | `#1e40af` | Blue 浅 |\n| 插件/能力层 | `#dcfce7` | `#22c55e` | `#15803d` | Green |\n| 能力层子块 | `#bbf7d0` | `#22c55e` | `#166534` | Green 浅 |\n| 服务/数据层 | `#f3e8ff` | `#a855f7` | `#7e22ce` | Purple |\n| 连线/标注 | — | `#94a3b8` | `#94a3b8` | Slate |\n\n层数按需确定，不固定；多层级时从上述色系中按顺序选取，保证相邻层色彩区分度。\n\n## 风格速查表\n\n| 风格 | 背景 | 主色调 | 圆角 | 适用场景 |\n|------|------|--------|------|----------|\n| blue | 白 | 深蓝渐变 | rx=4 | 企业正式 |\n| cyber | 黑 | 霓虹多彩 | rx=4 | 科技演示 |\n| dark | 深灰 | GitHub 色系 | rx=4 | 开发者 |\n| gray | 白 | 灰阶 | rx=4 | 简洁文档 |\n| green | 白 | 森林绿 | rx=4 | 自然环保 |\n| handdrawn | 米白 | 多彩手绘 | 不规则 | 草稿创意 |\n| mono | 白 | 纯黑白 | rx=0 | 打印极简 |\n| morandi | 暖灰 | 低饱和度 | rx=4 | 设计复古 |\n| ocean | 浅蓝 | 蓝绿渐变 | rx=4 | 清新科技 |\n| orange | 白 | 暖橙渐变 | rx=4 | 活力营销 |\n| purple | 白 | 紫色渐变 | rx=4 | 创意高端 |\n| tailwind | 白 | 多色区分 | rx=6/12 | 层级多 |\n\n## 层级布局模式\n\n```\n┌─────────────────────────────────────────────────────────────┐  ← 层级容器 (rx=12, filter=shadow)\n│  [层级标题]                                                  │\n│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐     │  ← 子模块 (rx=6)\n│  │ 模块A    │  │ 模块B    │  │ 模块C    │  │ 模块D    │     │\n│  └──────────┘  └──────────┘  └──────────┘  └──────────┘     │\n└─────────────────────────────────────────────────────────────┘\n                              ↓ (箭头连线带标注)\n┌─────────────────────────────────────────────────────────────┐\n│  [下一层级]                                                  │\n│  ...                                                         │\n└─────────────────────────────────────────────────────────────┘\n```\n\n### 层级容器\n```svg\n<g transform=\"translate(80, 70)\">\n    <rect x=\"0\" y=\"0\" width=\"840\" height=\"90\" rx=\"12\" fill=\"#fef3c7\" stroke=\"#f59e0b\" stroke-width=\"1.5\" filter=\"url(#shadow)\"/>\n    <text x=\"20\" y=\"26\" font-size=\"14\" font-weight=\"600\" fill=\"#b45309\" font-family=\"system-ui\">层级名称</text>\n    <!-- 子模块 -->\n</g>\n```\n\n### 子模块\n```svg\n<g transform=\"translate(30, 40)\">\n    <rect width=\"180\" height=\"40\" rx=\"6\" fill=\"#fde68a\" stroke=\"#f59e0b\" stroke-width=\"1\"/>\n    <text x=\"90\" y=\"25\" text-anchor=\"middle\" font-size=\"13\" fill=\"#92400e\" font-family=\"system-ui\">模块名称</text>\n</g>\n```\n\n### 带副标题的子模块\n```svg\n<g transform=\"translate(30, 45)\">\n    <rect width=\"380\" height=\"45\" rx=\"6\" fill=\"#bfdbfe\" stroke=\"#3b82f6\" stroke-width=\"1\"/>\n    <text x=\"190\" y=\"22\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"500\" fill=\"#1e40af\" font-family=\"system-ui\">主标题</text>\n    <text x=\"190\" y=\"38\" text-anchor=\"middle\" font-size=\"10\" fill=\"#3b82f6\" font-family=\"system-ui\">副标题说明</text>\n</g>\n```\n\n## 箭头连线\n\n```svg\n<!-- 垂直向下箭头 -->\n<path d=\"M500,160 L500,195\" stroke=\"#94a3b8\" stroke-width=\"1.5\" marker-end=\"url(#arrowhead)\"/>\n<text x=\"510\" y=\"180\" font-size=\"9\" fill=\"#94a3b8\" font-family=\"system-ui\">标注文字</text>\n```\n\n## 图例\n\n```svg\n<g font-size=\"11\" font-family=\"system-ui\" fill=\"#64748b\">\n    <rect x=\"80\" y=\"655\" width=\"14\" height=\"14\" rx=\"3\" fill=\"#fef3c7\" stroke=\"#f59e0b\"/>\n    <text x=\"100\" y=\"666\">用户入口</text>\n    \n    <rect x=\"180\" y=\"655\" width=\"14\" height=\"14\" rx=\"3\" fill=\"#dcfce7\" stroke=\"#22c55e\"/>\n    <text x=\"200\" y=\"666\">插件层</text>\n    \n    <rect x=\"300\" y=\"655\" width=\"14\" height=\"14\" rx=\"3\" fill=\"#dbeafe\" stroke=\"#3b82f6\"/>\n    <text x=\"320\" y=\"666\">服务层</text>\n</g>\n```\n\n## 字体与尺寸规范\n\n| 元素 | 字号 | 字重 | 字体 |\n|------|------|------|------|\n| 主标题 | 22 | 600 | system-ui |\n| 层级标题 | 14 | 600 | system-ui |\n| 模块主标题 | 13-14 | 500 | system-ui |\n| 模块副标题 | 10 | 400 | system-ui |\n| 箭头标注 | 9 | 400 | system-ui |\n| 图例文字 | 11 | 400 | system-ui |\n\n## 常用尺寸\n\n- 画布：`width=\"1000\" height=\"700\"`（按层数与内容调整，层多则增大 height）\n- 层级容器：`width=\"840\" height=\"80-180\"`，`rx=\"12\"`\n- 子模块：`width=\"180\" height=\"40\"`，`rx=\"6\"`\n- 边距：左右各 `80`，层间距 `20-35`\n\n## 工作流\n\n1. 按需求确定层级划分（层数不固定，常见 2–5 层）\n2. 选定配色风格并分配每层色系\n3. 绘制层级容器（从上往下）\n4. 填充子模块\n5. 添加箭头连线与标注\n6. 添加图例\n7. 调整尺寸与对齐\n\n## 中文编码与乱码修正\n\n在部分环境（云盘同步、跨平台、预览器编码推测错误）下，SVG 内裸写的中文可能变成乱码。**推荐做法**：所有中文用 XML 数字字符引用书写，与文件编码无关，任何符合 XML/SVG 的查看器都会正确解码显示。\n\n- **格式**：`&#x` + 该字符的 Unicode 码点（4 位十六进制） + `;`\n- **示例**：\n  - 「权限」→ `&#x6743;&#x9650;`\n  - 「用户入口层」→ `&#x7528;&#x6237;&#x5165;&#x53E3;&#x5C42;`\n  - 「业务逻辑」→ `&#x4E1A;&#x52A1;&#x903B;&#x8BE1;`\n- **查码点**：字符的 Unicode 码点可在搜索引擎查「Unicode 码点 某字」，或用脚本：`ord('权')` → 26435 → 十六进制 0x6743 → 写作 `&#x6743;`\n- **纯英文/数字**（如 API、Redis、CRUD）无需转换。\n\n```svg\n<!-- 裸中文（易乱码） -->\n<text x=\"500\" y=\"40\">权限管理系统</text>\n\n<!-- 推荐：数字字符引用 -->\n<text x=\"500\" y=\"40\">&#x6743;&#x9650;&#x7BA1;&#x7406;&#x7CFB;&#x7EDF;</text>\n```\n\n生成或修正 SVG 时，对中文统一输出为 `&#xXXXX;` 形式，可避免「SVG 无法查看」或乱码问题。\n\n## 虚线边框（可选/扩展模块）\n\n```svg\n<rect ... stroke-dasharray=\"4,2\"/>\n```\n\nFile v1.0.1:CHANGELOG.md\n\n# Changelog\n\n本文件记录 `arch-diagrammer` skill 的版本变更，遵循语义化版本。\n\n## [1.0.1] - 2026-04-09\n\n- 同步升级 `VERSION`、`SKILL.md`、`README.md` 中的版本号到 `1.0.1`\n- 补充 `1.0.1` 版本变更记录\n- 将文档中的版本升级命令统一为 `python3`\n- 新增面向外部用户的安装与发布说明\n- 新增 `scripts/build_release.py`，支持生成可分发的 skill zip 包\n- 调整 `SKILL.md` 中的脚本命令，适配 `~/.cursor/skills/arch-diagrammer/` 安装路径\n- 修复 `scripts/bump_version.py` 对精简版 `SKILL.md` 的兼容问题\n\n## [1.0.0] - 2026-03-09\n\n- 首个正式版本，完成架构图、流程图、时序图、部署图等全部核心功能\n\nFile v1.0.1:skill-card.md\n\n## Description:\n\nArch Diagrammer helps agents create architecture, flow, sequence, and deployment diagrams as offline SVG files or browser-previewable HTML using pure SVG templates or Mermaid, PlantUML, and Graphviz through Kroki.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[footya](https://clawhub.ai/user/footya)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, architects, and technical teams use this skill to turn system structure, workflows, service dependencies, and deployment designs into reusable visual deliverables for design reviews and technical communication.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Remote Kroki rendering can disclose diagram source to the configured rendering endpoint.\n\nMitigation: Use pure SVG/offline mode for confidential diagrams, verify KROKI_URL before rendering, and prefer a trusted private Kroki instance.\n\nRisk: Generated HTML previews and CDN-based Mermaid rendering can execute mutable remote code or render untrusted diagram text.\n\nMitigation: Avoid opening generated HTML from untrusted diagram text or untrusted rendering endpoints, and review the preview source before sharing.\n\nRisk: The documented npx Mermaid CLI fallback is unpinned.\n\nMitigation: Pin and review the Mermaid CLI version before using it in controlled or production workflows.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/footya/skills/arch-diagrammer)\n- [Publisher Profile](https://clawhub.ai/user/footya)\n- [Architecture Checklist](references/architecture-checklist.md)\n- [Diagram Quickstart](references/diagram-quickstart.md)\n- [SVG Layered Specification](references/svg-layered-spec.md)\n- [Kroki](https://kroki.io)\n- [Mermaid ESM CDN](https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Files, Shell commands, Configuration instructions]\n\n**Output Format:** [Markdown guidance with SVG, HTML, and diagram DSL code or generated files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Common deliverables are .svg files for offline viewing and .html files for browser preview.]\n\n## Skill Version(s):\n\n1.0.1 (source: SKILL.md frontmatter, CHANGELOG.md, server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: 用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 .svg（可离线打开）或 .html（浏览器直接预览） Owner: footya Summary: 面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T13:41:56.091Z | user arch-diagrammer v1.0.1 - 专业架构/流程制图技能，支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUM","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"python3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type mermaid --format svg \\\n  --in your_diagram.mmd --out out.svg"},{"language":"bash","snippet":"python3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type plantuml --format html \\\n  --in your_diagram.puml --out out.html"},{"language":"bash","snippet":"python3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type c4plantuml --format svg \\\n  --in your_c4.puml --out out.svg"},{"language":"bash","snippet":"python3 \"$HOME/.cursor/skills/arch-diagrammer/scripts/render_kroki.py\" \\\n  --type graphviz --format svg --json \\\n  --in your_diagram.dot --out out.svg"},{"language":"bash","snippet":"npx -y @mermaid-js/mermaid-cli -i your_diagram.mmd -o out.svg"},{"language":"bash","snippet":"python3 scripts/bump_version.py patch"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: arch-diagrammer\ndescription: 面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mermaid / PlantUML / Graphviz 描述结构，并通过 Kroki 渲染为 SVG 或 HTML。适用于系统架构设计、方案评审与技术沟通中的可视化输出。\nversion: 1.0.1\nauthor: yongsheng.hang\n---\n\n# 架构制图技能（Architecture Diagrammer）\n\n本技能帮助在产品/前端/后端/系统等多视角下，快速产出高质量的架构图、流程图、时序图与部署图，并导出为 SVG 与 HTML。\n\n## 产出模式\n\n### 模式一：纯 SVG 分层架构图（推荐用于分层展示）\n直接生成纯 SVG 代码，无需外部渲染，支持精确控制布局、配色、字体。\n\n**支持 11+ 种风格**（详见 `references/svg-layered-spec.md`）：\n\n| 风格 | 特点 | 适用场景 |\n|------|------|----------|\n| blue | 深蓝商务渐变 | 企业正式 |\n| cyber | 黑底霓虹色 | 科技演示 |\n| dark | GitHub Dark 主题 | 开发者 |\n| gray | 简约灰阶 | 文档嵌入 |\n| green | 森林绿渐变 | 自然环保 |\n| handdrawn | 手绘风格 | 草稿创意 |\n| mono | 极简黑白直角 | 打印极简 |\n| morandi | 低饱和度复古 | 设计感 |\n| ocean | 海洋蓝绿 | 清新科技 |\n| orange | 暖橙渐变 | 活力营销 |\n| purple | 紫色渐变 | 创意高端 |\n| tailwind | 多色层级区分 | 层级复杂 |\n\n- 适用：系统分层架构、方案架构、技术全景图\n- 参考：`references/svg-layered-spec.md`（风格规范、配色表、代码片段）\n- 模板：`assets/svg-templates/` 目录下各风格模板\n\n说明（重要）：\n- 当用户说“生成一个 **分层架构图** / “我要的是 **svg 的分层架构图**”，默认指 **纯分层 SVG（模式一）**，而不是 “Mermaid 渲染出的 SVG”。\n- 目标交付物：一个可离线打开的 `.svg` 文件（不依赖 Kroki / Mermaid CDN）。\n\n### 模式二：Mermaid/PlantUML/Graphviz + Kroki 渲染\n使用图形 DSL 描述结构，通过 Kroki 渲染为 SVG/HTML/PNG/PDF。\n- 适用：流程图、时序图、C4 架构图、依赖关系图\n- 参考：`references/diagram-quickstart.md`（语法速查）\n\n## 工作流\n\n### 画图前：先让用户选择\n在开始画图前，向用户提供若干建议供选择，确认后再动手：\n- **产出模式**：纯 SVG 分层图 vs Mermaid/PlantUML/Graphviz + Kroki\n- **图类型**：分层架构 / 流程图 / 时序图 / C4 / 部署图 等\n- **层级或复杂度**：层数按需（常见 2–5 层，不固定）、每层模块数量、是否要图例\n- **风格偏好**：11+ 种风格可选（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind，见 `references/svg-layered-spec.md`）、是否图例、输出格式（.svg / .html）\n用户选定或默认后，再按对应模式执行下方步骤。\n\n### 不确定时询问\n以下任一情况不确定时，**先向用户列出选项或给出建议，待确认后再动手**，不要自行假设：\n- 产出模式、图类型不明确\n- 层数、层级名称、每层包含哪些模块\n- 配色/风格偏好、是否要图例\n- 输出文件名、格式（.svg / .html）\n\n### 纯 SVG 分层架构图\n1) 按需求确定层级划分（层数不固定，常见 2–5 层，可少于 2 或多于 5）\n2) 选定配色风格（11+ 种可选：blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind，见 `references/svg-layered-spec.md`）\n3) 基于模板绘制层级容器与子模块（画布高度、层高按层数动态调整）\n4) 结构与连线（按需取舍）：\n   - 只表达对沟通有价值的“直接关系/关键路径”，不必把所有区块都强行连起来\n   - 允许出现不连线的独立模块/模块组（例如同层的独立域、横切能力、外部依赖清单）\n   - 允许同一行放多个互不相连的大模块（并排布局），按视觉平衡与阅读顺序灵活排布\n5) 添加箭头连线与标注（只画必要的流向与依赖，并用最少文字说明）\n6) 添加图例\n7) 对照 `references/architecture-checklist.md` 自检\n8) 版式检查（避免重叠）：\n   - 层级标题与子模块之间至少预留 8-12px\n   - 子模块与层级容器底部至少预留 10-16px\n   - 同层/同一行可并排多个独立模块组：组间留足间距，避免交叉线，必要时用小标题/分组框增强可读性\n   - 图例不要贴底，必要时增加画布高度（`<svg height=\"...\">`）并下移图例\n9) 编码检查（避免中文乱码）：\n   - 输出文件声明 UTF-8：`<?xml version=\"1.0\" encoding=\"UTF-8\"?>`\n   - **推荐**：中文一律使用 XML 数字字符引用（`&#xXXXX;`），不依赖文件编码，任何 SVG 查看器都能正确显示。规则：每个汉字对应 `&#x` + 其 Unicode 码点（4 位十六进制）+ `;`，例如「权限」→ `&#x6743;&#x9650;`。详见 `references/svg-layered-spec.md` 的「中文编码与乱码修正」。\n   - 若已用裸中文且出现乱码，可整体重写为数字字符引用，或用脚本按 UTF-8 重写文件（避免局部编辑混入非 UTF-8 字节）。\n\n### Mermaid/PlantUML/Graphviz\n1) 明确目标与范围：业务目标、上下文、关键约束\n2) 选择图类型：C4（Context/Container/Component）、流程图、时序图、部署图\n3) 起稿与迭代：从粗到细，命名统一、边界清晰\n4) 渲染与导出：使用 `scripts/render_kroki.py` 生成 SVG 或 HTML"},{"path":"README.md","content":"# arch-diagrammer（架构制图技能）\n\n用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 `.svg`（可离线打开）或 `.html`（浏览器直接预览）。\n\n## 安装\n\n适合以“个人 skill 包”的方式分发。\n\n1. 将整个 `arch-diagrammer/` 目录复制到 `~/.cursor/skills/`\n2. 确保最终目录为 `~/.cursor/skills/arch-diagrammer/`\n3. 如需运行渲染脚本，确保本机可用 `python3`\n4. 如需本地 Mermaid CLI 渲染，确保本机可用 Node.js 与 `npx`\n\n安装完成后，skill 目录建议至少包含：\n\n- `SKILL.md`\n- `README.md`\n- `LICENSE`\n- `VERSION`\n- `CHANGELOG.md`\n- `assets/`\n- `references/`\n- `scripts/`\n\n## 构建发布包\n\n推荐在发布前先确认版本号已经更新完成：\n\n```bash\npython3 scripts/bump_version.py patch\n```\n\n如果当前版本号已经正确，也可以跳过这一步。\n\n然后在 `arch-diagrammer` 根目录执行打包：\n\n```bash\npython3 scripts/build_release.py\n```\n\n如果你当前在仓库根目录，也可以直接执行：\n\n```bash\npython3 skills/arch-diagrammer/scripts/build_release.py\n```\n\n默认会生成：\n\n- `dist/arch-diagrammer-<version>.zip`\n\n例如当前版本 `1.0.1`，生成产物为：\n\n- `dist/arch-diagrammer-1.0.1.zip`\n\n## 打包步骤\n\n1. 确认 `VERSION`、`CHANGELOG.md` 已更新到准备发布的版本\n2. 在 `arch-diagrammer` 根目录执行 `python3 scripts/build_release.py`\n3. 检查 `dist/` 目录下是否生成对应版本的 zip 包\n4. 将该 zip 包发给使用者，或上传到你们内部制品库 / 文档平台\n5. 使用者解压后，将 `arch-diagrammer/` 整个目录复制到 `~/.cursor/skills/`\n\n## 打包说明\n\n- `build_release.py` 会自动读取 `VERSION` 中的版本号作为发布包文件名\n- 打包内容默认包含运行所需的 `SKILL.md`、`assets/`、`references/`、`scripts/` 等必要文件\n- 打包产物位于 `dist/` 目录，便于持续发布多个版本\n- 该打包方式适合“复制到个人 Cursor skills 目录即可使用”的分发模式\n- 如果后续版本升级，重新执行打包命令即可生成新的版本包\n\n压缩包解压后目录结构保持为：\n\n- `arch-diagrammer/SKILL.md`\n- `arch-diagrammer/README.md`\n- `arch-diagrammer/LICENSE`\n- `arch-diagrammer/VERSION`\n- `arch-diagrammer/CHANGELOG.md`\n- `arch-diagrammer/assets/...`\n- `arch-diagrammer/references/...`\n- `arch-diagrammer/scripts/...`\n\n## 版本管理\n\n- 当前版本：`1.0.1`\n- 变更记录：见 `CHANGELOG.md`\n- 升级命令：`python3 scripts/bump_version.py patch|minor|major`\n- 脚本行为：同步更新版本号并自动插入 `CHANGELOG.md` 新版本模板\n- 版本规则：遵循语义化版本，`major` 为不兼容调整，`minor` 为新增能力，`patch` 为修正和小优化\n\n## 选择产出模式\n\n- **模式一：纯 SVG 分层架构图**\n  - 适用：系统分层架构、方案全景图、需要精确布局/配色/字体、离线可用\n  - 交付：直接输出一份可打开的 `.svg`（不依赖 Kroki/Mermaid CDN）\n  - 风格与模板：见 `references/svg-layered-spec.md` 与 `assets/svg-templates/`\n\n- **模式二：Mermaid / PlantUML / Graphviz + Kroki 渲染**\n  - 适用：流程图、时序图、C4、依赖关系图等\n  - 交付：用 DSL 描述图形，再渲染为 `.svg/.png/.pdf/.html`\n  - 语法速查：见 `references/diagram-quickstart.md`\n\n说明：当需求表述为“分层架构图 / svg 分层架构图”时，默认指**模式一**的纯 SVG 分层图。\n\n## 最小输入要素（建议你提供）\n\n- **产出模式**：模式一 / 模式二\n- **图类型**：分层架构 / 流程 / 时序 / C4 / 部署（模式二为主）\n- **内容结构**：\n  - 模式一：层级名称、每层模块列表、需要表达的关键连线（可选）\n  - 模式二：DSL 源文件（`.mmd/.puml/.dot`）或其文本内容\n- **风格偏好**（模式一）：`blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind`\n- **输出**：文件名与格式（`.svg` 或 `.html`）\n\n\n## 提示词示例\n\n### 纯 SVG 分层架构图（模式一）\n![payment-system-architecture](assets/sys-examples/payment-system-architecture.svg)\n\n一句话版本（更像口语，复制就能用）：\n\n```\n使用 arch-diagrammer 帮我画一个支付系统的分层架构图，包含 4 层结构，使用手绘风格（handdrawn），输出一个可打开的 .svg 文件。\n```\n\n同款风格的展开版（写清楚一点更稳）：\n\n```\n使用 arch-diagrammer 画“支付系统”的分层架构图，4 层，手绘风格：handdrawn，输出 .svg。\n标题：支付系统分层架构图。\n分几层（4 层）：接入层 / 交易编排层 / 支付核心层 / 数据与外部依赖层。\n每层放哪些模块（你也可以按你项目改名）：\n- 接入层：App/H5、商户后台、API Gateway、WAF、限流熔断\n- 交易编排层：收银台、订单服务、路由/编排、通知回调（Webhook）\n- 支付核心层：支付服务、风控、账务、清结算、对账\n- 数据与外部依赖层：MySQL、Redis、M"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn727nkkzvcmz23s3qcktr52ys81r5cf\",\n  \"slug\": \"arch-diagrammer\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1776692516091\n}"},{"path":"references/architecture-checklist.md","content":"# 架构图质量检查清单\n\n## 表达与一致性\n- 名称统一：系统/服务/模块/队列/数据库等命名风格一致\n- 边界清晰：系统边界、信任区（Trust Boundary）、外部依赖明确\n- 图例可读：颜色/线型/箭头/图标含义在图例中解释\n- 视角单一：每张图只表达一个核心视角，避免信息过载\n\n## 正确性与可追溯\n- 源数据一致：与需求文档/接口定义/数据库模型一致\n- 数据流/控制流方向正确，协议/端口/鉴权方式明确\n- 版本化：图文件纳入版本管理，支持差异对比与回溯\n\n## 可运维性与安全\n- 可观测性：日志/指标/追踪链路位置与聚合方案\n- 弹性与容错：限流/重试/降级/熔断策略标注\n- 安全：认证鉴权/数据加密/密钥管理/最小权限/审计\n- 可靠性：多机房/多可用区/灾备/备份与恢复路径\n\n## 性能与扩展\n- 关键路径：延迟敏感链路、瓶颈点与容量假设\n- 缓存策略：层级/一致性/过期与预热机制\n- 异步解耦：消息队列/事件流/批处理边界\n- 水平扩展：无状态服务/会话粘滞/数据分片\n\n## 可落地与演进\n- 依赖清单：外部系统/第三方服务的 SLA 与限制\n- 环境映射：开发/测试/预发/生产部署差异\n- 迁移计划：灰度发布/回滚策略/数据迁移步骤\n- 模块化：公共能力沉淀与复用点标注"},{"path":"references/diagram-quickstart.md","content":"# 制图语法速查与范例\n\n本页提供常用图形语言的最小可用片段与惯用法，便于快速起稿并通过 Kroki 渲染为 SVG/HTML。\n\n## Mermaid\n\n### 流程图（Flowchart）\n```mermaid\nflowchart TD\n  A[用户请求] --> B{鉴权?}\n  B -- 否 --> X[拒绝]\n  B -- 是 --> C[路由网关]\n  C --> D[服务A]\n  C --> E[服务B]\n  D -->|事件| F[(消息队列)]\n  E -->|订阅| F\n```\n\n### 时序图（Sequence Diagram）\n```mermaid\nsequenceDiagram\n  participant U as 用户\n  participant GW as 网关\n  participant S as 服务\n  U->>GW: 发起请求\n  GW->>S: 转发请求\n  S-->>GW: 响应\n  GW-->>U: 返回结果\n```\n\n## PlantUML（含 C4 模型）\n\n> Kroki 内置 C4-PlantUML 宏支持，使用 `--type c4plantuml`（别名 `c4`）时**不需要** `!includeurl` 引用 C4 库。\n> 如果通过本地 PlantUML 渲染（非 Kroki），才需要 `!includeurl` 远程引用。\n\n### C4 上下文图（Context）\n\n渲染命令：`python scripts/render_kroki.py --type c4plantuml --in context.puml --out context.svg`\n\n```plantuml\n@startuml\nPerson(user, \"用户\", \"使用系统的人\")\nSystem_Boundary(sys, \"系统\") {\n  System(api, \"API 服务\", \"提供业务能力的服务\")\n}\nSystem_Ext(pay, \"支付平台\", \"第三方\")\n\nRel(user, api, \"调用\")\nRel(api, pay, \"支付请求\")\n@enduml\n```\n\n### C4 容器图（Container）\n\n渲染命令：`python scripts/render_kroki.py --type c4plantuml --in container.puml --out container.svg`\n\n```plantuml\n@startuml\nSystem_Boundary(sys, \"系统\") {\n  Container(gw, \"API Gateway\", \"NGINX/Envoy\", \"统一入口\")\n  Container(svc, \"业务服务\", \"Java/Spring\", \"核心业务逻辑\")\n  ContainerDb(db, \"主库\", \"MySQL\", \"事务数据\")\n  Container(queue, \"队列\", \"Kafka\", \"异步解耦\")\n}\n\nRel(gw, svc, \"HTTP\")\nRel(svc, db, \"JDBC\")\nRel(svc, queue, \"生产/消费\")\n@enduml\n```\n\n## Graphviz（DOT）\n```dot\ndigraph G {\n  rankdir=LR;\n  node [shape=box, style=rounded];\n  User -> Gateway -> Service -> DB;\n  Service -> Queue;\n}\n```\n\n## 渲染提示\n- Mermaid 更适合流程/时序；PlantUML 适合 C4/时序/用例；Graphviz 适合结构/依赖关系\n- Kroki 支持 28 种图类型（D2、DBML、Ditaa、Erd、BPMN、Excalidraw、Nomnoml 等），用 `--list-types` 查看完整列表\n- C4 图用 `--type c4plantuml`（别名 `c4`），Kroki 已内置 C4 宏，源文件无需 `!includeurl`\n- 遇到特殊字符渲染失败时加 `--json` 切换为 JSON POST API\n- 输出 HTML 时：\n  - Mermaid：默认生成包含 CDN 渲染逻辑的独立 HTML（不经过 Kroki）\n  - 其他类型：先通过 Kroki 渲染 SVG，再包裹到 HTML"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer... Skill: 用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物，常见输出为 .svg（可离线打开）或 .html（浏览器直接预览） Owner: footya Summary: 面向架构与流程的专业制图技能。支持两种产出方式：(1) 直接生成高质量 SVG 分层架构图，提供 11+ 种风格（blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind），支持精确布局与中文；(2) 使用 Mer... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T13:41:56.091Z | user arch-diagrammer v1.0.1 - 专业架构/流程制图技能，支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUM","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":823,"uniquenessScore":47,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T12:01:38.353Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:47:19.771Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}