又一个神级画图 Skill 开源，再见 draw.io！ | 芋道源码 —

阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/architecture-diagram-generator-claude-skill/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

上次画一张四层架构图，我在 draw.io 里跟对齐辅助线较劲了半小时。四个框来回拖，颜色改了三轮，箭头还是歪的。最后图没画完，会先开了。

后来在 GitHub 上刷到 Cocoon-AI 的 architecture-diagram-generator，一个专门给 Claude 写的 Skill。我把它的仓库、README，还有里面那份 SKILL.md 都翻了一遍。

它不产出一张图，产出的是一份网页文件

它不是应用，也不是编辑器插件，整个仓库就是一份 SKILL.md 加一个 template.html，再配三份示例成品。

官方仓库里的 template.html，标题与组件都还是占位符

你把系统架构用一段文字描述出来丢给 Claude，它把组件和连线填进那个模板，最后吐出一个自包含的 HTML 文件。双击就能在浏览器里打开，深色底、网格纹，图下面还挂着三张信息卡片。

听得懂人话，是因为规矩早就写死了

它不是让模型自由发挥。SKILL.md 里全是硬规定。

颜色有固定语义，前端青、后端翠绿、数据库紫、云服务琥珀、安全模块玫瑰，另外还有消息总线的橙和外部系统的灰。字号只有四档，12、9、8、7 像素。组件框统一圆角加半透明填充，安全组是虚线框，区域边界是另一种更长的虚线框。

还有两条更细的。箭头必须画在组件之前，再被一层不透明底色盖住，不然会从半透明的框里透出来。图例不许进任何边界框，得落在最低那条边界下方 20 像素以外。

画图真正耗时间的从来不是画，是这些决定。它们被提前写死之后，模型只剩一件事，把描述映射到积木上。

三张官方示例，把它的水平线摆出来了

仓库里放了三张成品，React 加 Node.js 加 PostgreSQL 的 Web 应用、Kubernetes 上的微服务、AWS 无服务器。三张一个版式，深色底加网格纹。

官方 Web Application 示例，四层结构与三条连线标注

先看第一张。Users、Frontend、Backend、PostgreSQL 四个框横着排开，连线分别标了 HTTPS、REST API、SQL，端口号写在框里，3000、8080、5432。图下面三张卡片顺手把三层技术栈结了。

官方微服务示例，虚线 Kubernetes 边界里装了四个服务

微服务那张复杂得多。中间是 Kong 网关，左边两个客户端，右边四个服务分属四种语言，每个服务连自己的库，服务之间用橙色色条表示消息总线，整块服务套在一个虚线的 Kubernetes 边界里。这张最能看出自动布局稳不稳。

官方 AWS 无服务器示例，琥珀色虚线框住整个区域

第三张是云上的。请求先从 Clients 进来过 CloudFront，再进 API Gateway 和 Lambda，落到 DynamoDB，边上还挂了 SQS 和 S3，整片区域用琥珀色虚线框住。

颜色不是审美，是一份协议

官方模板自带的图例，七类组件各对应一种颜色

配色这件事单独说一句。它跟好不好看没关系，是一份约定。看见紫色就知道那是数据库，看见玫瑰色就知道那是认证或者安全边界。

好处是别人不用读图例就能看懂你的图。代价也摆在那儿，你没法把它改成公司的品牌色。

装它之前，有个开关要先打开

官方推荐的路子是在 claude.ai 里装。免费版、Pro、Max、团队版、企业版都能用，但得先在设置的 Capabilities 里把 Code Execution 打开，不然根本传不了自定义 Skill。团队版和企业版还得管理员去组织设置里开。

Claude.ai 的 Skills 面板，architecture-diagram 已经打开

开关打开之后，进 Customize 里的 Skills，点加号，上传那个 zip，再把它的开关拨到开。整个过程不用命令行。

Claude Code 用户更省事，一条命令就完。

unzip architecture-diagram.zip -d ~/.claude/skills/

想只装在某个仓库里，把目标换成 ./.claude/skills/ 就行。

装完你会看到两个文件。SKILL.md 是说明书，resources 目录下的 template.html 是底子，没有依赖要装，也不需要构建。第一次用之前，拿一句最简单的话试一遍，比如「画一个 React 加 PostgreSQL 的两层架构」，能出一个能打开的 HTML 就说明装对了。

失败边界也说一句。Code Execution 没开，上传入口会直接卡住；导出按钮依赖两个 CDN 脚本，离线环境下点不动；剪贴板那条路还要求页面在 https、本地文件或者 localhost 下打开。

改图靠一句话，拿图靠一个省略号

描述有三条来源。手里有代码库的，让 AI 分析一遍，列成组件清单；系统不复杂就直接手写；还没想清楚的，问一句典型的 SaaS 架构长什么样也行。

然后加一句「用你的架构图 Skill，根据下面的描述生成一张架构图」，把描述贴上去。

描述不用写成散文，列个清单就够。

用你的架构图 Skill，根据下面的描述生成一张架构图：
- React 前端
- Node.js/Express API
- PostgreSQL 数据库
- Redis 缓存
- JWT 认证

官方示例成品页，右上角是展开的导出工具栏

出来的页面就是这个样子。标题、图身、三张卡片、页脚都在，导出按钮默认收在右上角那个省略号里，点开才露出 Copy、PNG、PDF。

改图不用回去拖。在对话里补一句「再加一个 Redis 缓存层，放在后端和数据库之间」，它会重新出一版。

改图的说法也没什么讲究，把它当同事就行。

再加一个 Redis 缓存层，放在后端和数据库之间。
把 Redis 挪到消息队列旁边，箭头标注改成 cache。
再加一层 CDN，放在客户端和网关之间。

第一版，Redis 还挤在数据层里

补一句之后，Redis 成了独立的缓存层

导出也说清楚。Copy 走的是两倍缩放的图，进剪贴板直接粘到飞书或者文档里；PDF 是把抓好的图塞进 jsPDF 做成单页，边距留了 32 像素，工具栏不会被拍进去，跟浏览器打印转出来的不是一回事。

出图速度给个参照。作者自己的记录是从描述到成图大概五分钟，同一张图他在 draw.io 里至少要花半小时。这是他一个人的耗时，不过方向不难判断。

出来的图拿去评审、塞进设计文档、开会投屏都够用，这也是它比截图工具顺手的地方。腾下来的时间够你多写两段代码，或者干脆什么也不干。

代价是每张图都长一个样

那套写死的规矩，背面就是你交出了审美决定权。同一份描述，你和我拿到的图结构相同、配色相同，区别只在内容。想让它长得像你们自己的东西，基本没戏。

它也有做不到的。组件一多，自动布局会把某些框挤在一起，作者给的办法是在描述里补一句给某个模块留点空间，或者干脆拆成两张图。

范围也得说明白。软件架构、云基础设施、微服务拓扑这类层次和连接关系清楚的图，是它的主场。物理硬件拓扑，还有要讲时间顺序的流程，它不合适。

七千多 Star，两次发布，一个姐妹项目

仓库首页，Star 与 Fork 计数可见

仓库是 2025 年 12 月建的，到现在七千多 Star、565 个 Fork，一共十几次提交，最近一次改动停在 5 月。

发布只有两个版本。1.0 是初始版，1.1 把导出工具栏加了进来，就是现在这个省略号。MIT 协议，随便用随便改。

同一个组织下还有个 process-flow-diagram-generator，专门画流程，设计语言一样，形状语言不同，两边分工挺清楚。

最后提醒一句同名的事。搜的时候会撞见一个也叫 Archify 的项目，Star 比它高一个量级。那是另一个独立项目，不是这个仓库的 fork，覆盖的图型也多得多，别当成一回事。

项目地址是 https://github.com/Cocoon-AI/architecture-diagram-generator 。

它真正省掉的不是画图的时间，是那些本来就不该由人来拍板的决定。代价也直白，这些决定一旦被写死，你的图就只能长成它允许的样子。