Hello，我是Niko。16年程序员老兵，专注分享 AI编程实战经验、宝藏工具资源、前沿技术动态。不玩套路，多讲干货。
做软件开发，除了敲代码和写文档，都会遇到需要画架构图的时候。可能是为了内部分享，可能是为了项目投标文档，还可能是知识沉淀。
绘制方式也各种各样，Mermaid文本描述，draw.io手动拼框，各有各的痛苦。终于AI时代，发现了一个SKILL可以完美解决这个痛点。
Github上 architecture-diagram-generator 这个仓库，4.5k star，作者是 Cocoon AI。第一眼看到示例图，深色背景、JetBrains Mono 字体、组件按类别配色，那种"这才是 2026 年架构图该有的样子"的感觉一下就出来了。
我装上试了一下，有点上头。这篇就来聊聊它。
它是什么
说白了就是一个 Claude Skill：你把系统结构用一段自然语言描述出来，它给你产出一个单文件 HTML，里面是嵌入式 SVG 架构图，深色风格、语义化配色、自带头部和总结卡片。
注意三个关键词：
- 单文件——一个 .html 双击就能在浏览器打开，不依赖任何外部资源（字体除外，走 Google Fonts），发给同事、塞进文档、截图当封面都行。
- Skill——不是一个独立产品，也不是 SaaS，它寄生在 Claude 的 Skill 体系里，本质上是一份给 Claude 的"约束文档+模板"。
- 可迭代——画完不满意，直接在对话里说"把数据库那块改成 PostgreSQL，加一条到 Redis 的箭头"，它会重新生成一份。
为什么值得推荐
1. 它解决的是一个被低估的真痛点
架构图这件事，圈子里一直有种"差不多就行"的氛围。Mermaid 能画，draw.io 能画，PPT 拖框也能画——所以大家从来没认真想过"画一张好看的架构图"应该是几分钟的事。
但只要你写过技术博客、做过技术汇报、写过设计文档，就会发现这事的真实成本是：
所以大多数博客、文档里的架构图都长得很糊弄。
这个 Skill 的解法是把"自然语言描述"作为唯一输入，把"美观、配色、布局、字体、间距"全部交给一份精心调过的模板。你不需要懂设计，也不需要会拖图，只需要把脑子里的系统说清楚就行。
2. 配色和排版背后是有思考的
我第一眼喜欢上它，是因为它的视觉语义化。
- 青色（Cyan）= 前端
- 翠绿（Emerald）= 后端
- 紫罗兰（Violet）= 数据库
- 琥珀（Amber）= 云服务
- 玫瑰（Rose）= 安全
- 灰岩（Slate）= 外部系统
这套配色不是随便挑的，每种颜色对应一类组件——读图的人扫一眼就能分清楚"哪些是我的服务、哪些是外部依赖、哪些和数据相关"。这种隐式的视觉编码，是 Mermaid 那种全图同色块永远做不到的。
字体用 JetBrains Mono，排版上是深色背景 + 网格纹理，整体有一种"工程师审美"的克制感。我截了一张图发到群里，有同事直接以为是我用 Figma 画的。
3. 它把"AI 画图"做成了 Skill 而不是产品
这一点对 Claude 用户特别重要。
市面上有不少"AI 画架构图"的产品，要么是网页版要充值，要么是 IDE 插件还要装环境，要么效果一言难尽。这个仓库的思路很轻：
- 它不重新发明轮子，直接复用 Claude 的对话能力和上下文。
- 它的"产品"就是一份 Skill 包（一个 zip），上传到 Claude 网页版的 Settings → Capabilities → Skills 即可。
- 你已经在用 Claude 写代码、写文档了，画架构图只是顺手的一句话。
我之前在 归藏 PPT Skill 里说过：好的 Skill 是把一份成熟的工作经验压成一段提示词。这个仓库做的事情几乎一样——把"一个有审美的工程师怎么画架构图"压成了一份让 Claude 能稳定执行的模板。
实测：让它画一张商城订单服务的架构
我拿手头那个 Spring Boot 订单管理服务试了试。描述很短：
帮我画一张商城订单管理服务的架构图。 客户端有 Web 商城前端（React）和移动 App，统一走 Nginx 网关接入。后端是一个 Spring Boot 应用 order-service，包含订单创建、订单查询、支付回调、库存扣减、订单状态机五个模块。下游依赖：MySQL 存订单主数据，Redis 存订单号生成和热点订单缓存，RocketMQ 异步发送订单创建/支付成功事件给积分服务、物流服务、消息通知服务。外部依赖支付宝/微信支付的支付回调接口，以及 SMS 短信平台。整体部署在阿里云 ECS 上，日志走 SLS。
把这段话连同那句固定的提示——"Use your architecture diagram skill to create an architecture diagram from this description"——丢给 Claude，大约 30 秒后，我得到一份 HTML 文件。
打开浏览器：深色背景，顶部一行标题"Order Service Architecture"，中间一张 SVG 架构图：
- 顶部 Cyan 色：Web 商城前端、移动 App
- 上层 Slate 色：Nginx 网关
- 中间 Emerald 色：order-service（五个子模块横向排开）
- 左下 Violet 色：MySQL、Redis
- 右下 Amber 色：RocketMQ + 三个下游服务（积分 / 物流 / 通知）
- 右侧 Rose 色：支付宝/微信支付、SMS 平台（标成外部依赖）
- 底部 Slate 色：阿里云 ECS、SLS 日志
下方还自动生成了三张 Summary 卡片，分别总结了"接入层"、"核心服务"、"下游与外部依赖"。
我截了一张图直接当评审材料的开篇封面。整个过程从描述到能发出去，前后不到两分钟。
更爽的是后面的迭代。我说"把支付回调那块拆成单独一个 payment-callback 子模块，再把 Redis 改成 Redis Cluster"，它直接出了第二版，其他部分纹丝不动。这种"局部改"的能力，draw.io 给不了，Mermaid 也给不了——Mermaid 你改一行经常会触发整张图的布局重排。
快速上手
三步：
Step 1：去 GitHub 仓库 下载 architecture-diagram.zip。
Step 2：解压到你的SKILL目录，如果想放全局目录：~/.claude/skills/，如果想单个项目使用，则放到项目./.claude/skills/。
Step 3：在对话里粘贴你的系统描述，结尾加一句：
Use your architecture diagram skill to create an architecture diagram from this description.
等几十秒生成架构HTML 文件，浏览器打开，截图。
如果你写不出"系统描述"，还有个偷懒办法：把项目代码丢给 Claude，让它先扫一遍 pom.xml、application.yml、Controller/Service 目录，自己生成一段架构描述，再调 Skill。我在自己那个 Spring Boot 项目上试过两次，准确率比想象中高——它甚至能从依赖里推断出来你用了 Redis 和 RocketMQ。
不足和提醒
诚实说几个槽点：
它不擅长画特别复杂的系统。 我试着塞过一个有 20+ 微服务的系统描述，它会自己做合并和抽象，结果是图变干净了，但有些细节丢了。如果你要画的是"完整的真实系统"而不是"用来沟通的架构示意图"，它不太够用。
深色风格不是万能的。 有些公司的对外文档强制白底黑字，你得自己改 CSS。Skill 本身没暴露浅色模式的开关，这一点希望作者后续能补上。
它不能画时序图、流程图、ER 图。 名字叫 architecture diagram generator，就只画架构图这一种。要画其他类型还得回去用 Mermaid 或者另找 Skill。
一句话总结
它不是一个万能的画图工具，但在"一句话生成一张能见人的架构图"这件事上，目前我没见过更顺手的。而且通过自然语言描述进行修改也是
最后想多说一句：Skill 这种形态正在变成 Claude 生态里最有价值的那部分东西。不是大模型不够强，是大模型不知道你想要什么样的输出——而 Skill 把"你想要的样子"提前固化了下来。这个仓库是一个很好的例子。
