大家好我是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 → PostgreSQLRedis 做缓存部署在 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 PostgreSQLAWS 无服务器架构Lambda API Gateway DynamoDB微服务架构Kubernetes API Gateway说实话这种完成度如果手动画熟练的人也要大半小时用 Skill 描述几句几十秒到几分钟就能出初稿。几个让人省心的细节1. 单文件到处能用生成的是自包含 HTMLCSS 和 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