又一个神级画图 Skill 开源，再见 draw.io！
大家好，我是Java1234_小锋老师。
先说结论：它到底能干什么？
最近 GitHub 上有个项目挺火——Architecture Diagram Generator（架构图生成器），来自 Cocoon AI 团队，目前已经拿到6000+ Star。
说白了，它不是一个让你手动拖拖拽拽的画图软件，而是一个Claude AI Skill（技能包）。你用人话描述系统架构，Claude 帮你生成一张深色主题、排版整齐的架构图，输出是一个HTML 文件，浏览器打开就能看，还能一键导出 PNG 或 PDF。
不用装 draw.io，不用找图标库，不用对齐箭头对齐到怀疑人生。
为什么我说它可能替代 draw.io？
做过技术方案、写文档、做汇报的人应该都懂：draw.io 功能很强，但上手和改图都费时间。组件要一个个拖，连线要一点点调，改一个模块名字，周围布局可能全乱。
这个 Skill 的思路完全不同——用对话代替手工：
| 传统方式（draw.io） | 这个 Skill |
|---|---|
| 自己画框、连线、配色 | 描述架构，AI 自动生成 |
| 改一处，手动调整布局 | 聊天里说「把 Redis 换成 Memcached」 |
| 导出还要额外操作 | HTML 里自带 Copy / PNG / PDF 按钮 |
| 需要安装或打开在线编辑器 | 一个 HTML 文件，发给别人就能看 |
它特别适合那种「结构已经想清楚了，就是懒得画」的场景。评审稿、技术分享、 onboarding 文档——先把图画出来，比完美更重要。
三分钟上手
整个流程就三步，官方 README 写得很清楚，这里用更直白的话总结一下：
第一步：安装 Skill
- 从 [GitHub 仓库]下载
architecture-diagram.zip - 打开 [claude.ai]→Customize→Skills
- 点+→Upload a skill，上传 zip，然后打开开关
注意：需要在 Claude 设置里开启Code Execution（代码执行）能力，Free / Pro / Max 等计划都支持。
第二步：准备架构描述
你不需要会写代码，只要能把系统说清楚就行。三种常见做法：
- 让 AI 读你的代码：在 Cursor、Claude Code 里问一句「分析这个项目的架构，列成组件清单」
- 自己写：比如「React 前端 → Node.js API → PostgreSQL，Redis 做缓存，部署在 AWS」
- 让 Claude 给模板：问「一个典型 SaaS 应用长什么样？」
第三步：让 Claude 画图
把描述贴给 Claude，加上一句：
Use your architecture diagram skill to create an architecture diagram from this description: [粘贴你的架构描述]等一会儿，你会拿到一个 HTML 文件。双击打开，图就在那儿了。不满意？继续聊：「把 API Gateway 放到中间」「加一个 Kafka」——改起来比 draw.io 快多了。
效果长什么样？
项目 README 里放了几张官方示例，风格统一：深色背景、语义化配色、箭头清晰。前端、后端、数据库、云服务各用一种颜色，一眼能分清。
Web 应用（React + Node.js + PostgreSQL）
AWS 无服务器架构（Lambda + API Gateway + DynamoDB）
微服务架构（Kubernetes + API Gateway）
说实话，这种完成度如果手动画，熟练的人也要大半小时；用 Skill 描述几句，几十秒到几分钟就能出初稿。
几个让人省心的细节
1. 单文件，到处能用
生成的是自包含 HTML，CSS 和 SVG 都内嵌在里面。发邮件、丢飞书、挂静态页，不用对方装任何软件。
2. 导出很方便
页面顶部有工具栏：
- Copy— 复制高清 PNG 到剪贴板，直接贴进 PPT 或文档
- PNG— 下载图片
- PDF— 下载 PDF，深色主题会保留
3. 配色有规矩，不会乱
| 类型 | 颜色倾向 | 典型用途 |
|---|---|---|
| 前端 | 青色 | 网页、App、边缘设备 |
| 后端 | 绿色 | API、服务 |
| 数据库 | 紫色 | 数据库、存储 |
| 云服务 | 琥珀色 | AWS 等基础设施 |
| 安全 | 玫瑰色 | 认证、加密 |
4. 开源、MIT 协议
代码在 GitHub 上，可改可分发。Claude Code 用户也可以解压到~/.claude/skills/本地使用。
5. 有「姐妹 Skill」
如果要做流程图、审批流、自动化流水线这类「按时间展开」的图，同团队还有 process-flow-diagram-generator，设计语言一致，换场景不用重新适应。
适合谁用？
- 开发 / 架构师：快速出评审图、方案图
- 技术写作者：文档里缺一张架构图，描述一下就能补
- 学生 / 面试准备：把项目结构讲清楚，顺便有张像样的图
- 不想学 draw.io 的人：没错，说的就是我
不太适合的场景也直说：如果你要像素级控制每个框的位置，或者公司强制用 Visio / 特定模板，那还是专业工具更稳。这个 Skill 的定位是快、好看、够用。
写在最后
Architecture Diagram Generator 把「画架构图」从手工活变成了对话活。6000 多 Star 不是偶然——大家苦 draw.io 久矣，只是以前没这么顺手的替代方案。
如果你已经在用 Claude，花五分钟装个 Skill 试试，成本几乎为零。第一次用描述生成一张自己项目的架构图，很可能就回不去了。
项目链接：https://github.com/Cocoon-AI/architecture-diagram-generator