AI自动生成架构图！这款开源Skill配合Claude Code，文字秒变专业图

现在有了 AI 对我们开发来说确实很多工作方式多改变了，就说画图这件事，以前画架构图、流程图，得打开 Draw.io、Visio 或 Excalidraw，一点点拖做开发的哪有不画图的？

以前干这种体力活，不管是画系统架构还是业务流程，总得先打开 draw.io、Visio 或者 Excalidraw 这些工具，然后就是一套重复操作：拖组件、连线、对齐、调间距、改颜色。

思路其实都想明白了，只是很多时候要调整，把时间全浪费在怎么把图画得好看，细节一直在调上。

现在这套流程彻底变了，不用先琢磨图怎么画，AI 现在基本都能自动搞定。我们只要把系统到底怎么跑说清楚就，剩下的排版、布局、配色，甚至组件分组、数据流怎么走，都交给 AI 处理。

而今年过年以来，最火的无疑是 Agent，Agent 已经不只是帮你写点代码的工具了，而是一个可以替你干活的全能打工人。

当我们给它配上画图 Skills，它就可以自动拆结构、自动排版、自动生成整张图。

今天我们要聊的这个 Skill 是 architecture-diagram-generator，能让 AI 瞬间把你的文字描述变成漂亮的架构图。
我们可以使用 Claude Code 配合这个专用 Skill，生成专业级架构图，并输出为一个可在浏览器中打开的 HTML 文件。
开源地址：https://github.com/Cocoon-AI/architecture-diagram-generator
功能特点：深色主题设计：Slate-950 背景 + 网格纹理
语义化配色：前端 / 后端 / 数据库 / 云 / 安全分类清晰
单文件输出：HTML + CSS + SVG
全内嵌无依赖：浏览器直接打开，无需 JS专业
字体：JetBrains Mono
智能图层：箭头在组件下层渲染，视觉更清晰

1、安装方式
我们可以访问该开源地址，下载对应的 Skill 包，把它拷贝到 SKills 的目录即可。

如果你用的是 Claude Code ，Skills 存放在 ~/.claude/skills/（个人全局）或项目目录下的 .claude/skills/（项目专用）。

//全局安装
unzip architecture-diagram.zip -d ~/.claude/skills/
//项目内安装
unzip architecture-diagram.zip -d ./.claude/skills/

该 SKILL 的结构如下：

architecture-diagram/├── SKILL.md└── assets/ └── template.html

如果你订阅了 Claude Pro / Max / Team / Enterprise ，可以按一下步骤安装使用：
下载 architecture-diagram.zip
打开 Claude → Settings（设置） → Capabilities（能力） → Skills
点击 + Add 并上传 zip 文件
启用该 Skill2、测试实例

1、高并发系统
设计一个支持高并发的订单系统架构，包含缓存、消息队列和分库分表：

架构说明：

效果如下：

2、秒杀架构
画一个秒杀系统架构，包含限流、队列、库存扣减

架构说明：

效果如下：

3、微服务架构
创建一个微服务系统架构图：- React Web + 移动端- Kong API Gateway- 用户服务（Go）、订单服务（Java）、商品服务（Python）- PostgreSQL、MongoDB、Elasticsearch- Kafka 消息流- Kubernetes 编排