1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | architecture-diagram-generator |
| 作者/维护者 | Cocoon AI（cocoon-ai.com，GitHub 组织账号，联系邮箱 hello@cocoon-ai.com） |
| 来源链接 | https://github.com/Cocoon-AI/architecture-diagram-generator |
| 许可证 | MIT（数据来自 GitHub API） |
| GitHub Stars | 6,798（数据来自 GitHub API） |
| Forks | 528（数据来自 GitHub API） |
| 最新版本 | v1.1（README 标注） |
| 安装方式 | Claude.ai 技能上传（zip） / Claude Code CLI 解压至 .claude/skills/ |
2. 功能介绍与亮点
architecture-diagram-generator 让 Claude 根据自然语言描述，直接生成深色主题、专业排版的架构图，输出为单个自包含 HTML 文件（内嵌 SVG + CSS，浏览器直接打开）。
- 纯文字描述 → 成品图：列出组件与连接关系即可，也可让 Claude 先分析代码库再生成描述
- 内置设计系统：统一深色配色（不同组件类型各有语义色）、网格背景、技术感字体
- 一键导出：内置 Copy / PNG / PDF，所用 CDN 库固定版本号并附完整性校验哈希，防篡改
- 可迭代：生成后可直接用自然语言让 Claude 调整布局、配色
3. 适用场景
所属分类：数据分析与可视化
面向需要快速产出架构图的场景：技术方案评审、系统设计文档、新人 onboarding、非技术干系人交接说明、博客或产品文档配图。典型受益人群是后端/架构师/技术负责人。
4. 跨 Agent 兼容性
- Claude Code：原生支持，README 给出安装步骤，也支持第三方通用安装器一键安装
- Claude.ai / Claude.ai Projects：原生支持（官方推荐路径），网页端上传 zip 启用，需开启 Code Execution 权限
- Codex / OpenClaw / Hermes Agent：未验证。技能本体是纯 SKILL.md + 模板文件，不依赖 Claude 专有工具，理论上可移植，但仓库未给出这三个平台的官方安装说明
5. 推荐理由
比起手绘或传统绘图工具，这个技能把“画架构图”压缩成一句话描述加几秒等待，产出图表排版干净、配色统一，导出功能内置在生成的 HTML 文件里，不需要额外软件或账号。对于需要频繁产出架构说明材料、又没有专职设计资源的技术团队和个人开发者，是一个即装即用的效率工具。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 9 | GitHub 6,798 stars / 528 forks，健康的 fork 占比显示真实二次使用；被 AlphaSignal 等科技媒体撰文报道，并被多个第三方 Skill 市场站点收录展示 |
| 可用性 | 8 | SKILL.md 与 README 文档完整、附示例截图与安装步骤，Claude.ai 网页端与 Claude Code CLI 均有明确安装路径，无需付费依赖；最近一次提交在近 3 个月内，维护尚属活跃 |
| 安全性 | 9 | 纯提示词/模板类技能，不执行任何 shell 命令、不联网回传数据、不要求任何 API key 或凭据；生成产物中引用的第三方 CDN 脚本使用固定版本号并附 Subresource Integrity 校验哈希，防篡改意识明确；作者为有独立官网与联系方式的团队账号，License 明确（MIT） |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令执行范围 | 无——技能只指导 Claude 直接写出 HTML/SVG 文本，仓库内无可执行脚本 |
| ② 运行时联网外发 | 无——生成产物在浏览器打开时会加载 Google Fonts 与固定版本的 html2canvas/jsPDF CDN 脚本用于渲染字体与导出，属用户打开文件时的正常网络请求，非技能运行时外发数据 |
| ③ API key/凭据 | 不需要 |
| ④ 可疑指令 | 未发现——SKILL.md 全文为设计规范与 SVG/HTML 代码模板 |
| ⑤ 作者信誉 | Cocoon AI 为有独立官网（cocoon-ai.com）与联系邮箱的团队账号，GitHub 组织注册于 2023 年，非临时小号 |
| ⑥ License | MIT，明确 |
| ⑦ 最近维护时间 | 近 3 个月内有提交，非弃置项目 |
综合评分（三项均值）：8.7
7. 跟同类 Skills 相比的优势
| Skill | 定位 | 与本技能的差异 |
|---|---|---|
| dashmotion | 用自然语言或 Mermaid 生成带流动动画的架构/流程图，连接线有动态光点效果 | 强调“会动”的可视化效果，适合做产品演示或落地页素材；本技能专注静态深色专业图表 + 内置导出工具栏，更贴近日常文档场景 |
| azure-diagrams-skill | 面向 Azure 生态的专业绘图技能，内置 800+ 官方图标，支持 ERD、业务流程图、时间线、线框图等多种图表类型 | 覆盖图表类型更广、图标库更专业，但聚焦单一云厂商体系；本技能面向通用系统架构，不绑定特定云平台图标集 |
| aws-architecture-diagram-skill | 生成 AWS 架构图并直接输出为 draw.io 格式，可在 draw.io 中继续编辑 | 输出可编辑的矢量图源文件，适合需要后续精细调整的场景；本技能输出的是成品 HTML，胜在开箱即用、无需额外软件打开 |
| Archscribe | 生成手绘风格、深色背景的动画架构/流程图，可输出为可编辑的 .excalidraw 文件、PNG 及真正的动图 | 定位“高端手绘风”视觉效果与多格式导出；本技能定位专业技术文档风格，配色与排版更偏工程规范 |
8. 用户评价
科技媒体 AlphaSignal 作者 Jim Clyde Monge 于 2026 年 4 月撰文评价：“I’ve tried a couple of diagram generators before, but this one is by far the most elegant-looking”（用过几款图表生成工具，这款的视觉呈现是目前最出色的），并称其“对开发者和团队来说是一个非常实用的技能”，适合文档、交接与新人 onboarding 场景。
9. 其他补充
同作者维护了姊妹技能 process-flow-diagram-generator，同一视觉语言用于“随时间展开”的流程/审批类图示。
10. 安装使用方式
Claude.ai（官方推荐）：设置中开启 Code Execution 权限 → 下载 architecture-diagram.zip → 「Customize → Skills」→「+ Create skill」→「Upload a skill」启用；也支持上传至 Claude.ai Projects 的 Project Knowledge。
Claude Code CLI：
unzip architecture-diagram.zip -d ~/.claude/skills/ # 全局；项目级改用 ./.claude/skills/
# 或使用第三方通用安装器
npx -y skills add cocoon-ai/architecture-diagram-generator --skill architecture-diagram --agent claude-code安装启用后，用自然语言描述系统架构并请 Claude “使用架构图技能”生成，输出的 HTML 文件可直接打开、用内置工具栏导出 PNG/PDF，无需重启或额外配置。
11. 注意事项
- 导出到剪贴板依赖浏览器剪贴板 API，需在安全上下文（https/file/localhost）下由用户手动点击触发
- 打开生成的图表文件会加载 Google Fonts 及固定版本 CDN 脚本，无网络时字体与导出功能可能受影响，但图表本身仍可正常显示
- 设计系统针对深色主题优化，浅色风格文档需二次调整配色
- Codex / OpenClaw / Hermes Agent 平台官方兼容性未经验证，需自行测试