做技术这行总有些事是真心懒得做的画架构图算一个。不是不重要是太麻烦。要么打开 http://draw.io 从头拖组件要么用 Mermaid 写一堆语法还要反复调位置最后搞出来的效果差强人意发给别人一看”就这”。更多时候干脆跳过这一步直接在文档里写”架构如下图所示”然后图是空白的。最近发现一个 Skill 把这件事解决了效果出乎意料地好顺手写篇文章给大家也安利一下。先看效果这是我用它帮Skills Hub项目生成的架构图整体是深色主题组件按前端、后端、数据库、外部服务分颜色标注层级关系清晰连接箭头干净底部还有三栏信息卡片做补充说明。最重要的是它输出的是一个独立的 HTML 文件浏览器直接打开不依赖任何第三方工具。用的字体是 JetBrains Mono整体风格偏工程审美我个人比较喜欢这种调性比那种糖果色的 UI 图要耐看。顺手又让它画了一张微服务架构图用的提示词是”微服务应用的典型架构是什么”不到 1 分钟出图图里涵盖了接入层、安全层、治理层、业务层、数据层、消息层、下游服务、基础设施完整的八个层次Kafka/RabbitMQ 消息总线、Service MeshIstio/Envoy、每个微服务独享数据库该有的细节全在。这张图我一字没改就是给了一句话直接生成的。这个 Skill 是什么Skill 来自 GitHub 仓库Cocoon-AI/architecture-diagram-generator是一个专门用于生成架构图的 Claude Skill。核心机制不复杂SKILL.md 定义了一套完整的设计系统包括颜色规范、组件样式、排版规则、SVG 布局约定然后让 AI 按这套系统生成 HTML 内联 SVG 代码。AI 输出的不是一张图片而是完整的 HTML 文件里面的 SVG 全部内联样式全部嵌入打开即用。设计系统里的细节挺多举几个例子语义色彩分层Frontend 用 Cyan青色Backend 用 Emerald翠绿Database 用 Violet紫色Cloud 用 Amber琥珀安全相关用 Rose玫瑰红。颜色有对应的语义不是随便选的。箭头渲染顺序连接线先于组件框绘制保证箭头在视觉上位于组件之后避免箭头盖住文字。组件框还会在半透明色块下面额外画一个纯色遮罩层防止箭头”透过”半透明区域。这种细节在 http://draw.io 里需要手动处理这里 Skill 直接内置了。图例位置约束Legend 必须放在所有边界框的外面并计算最低边界再加 20px 距离防止标注被区域框遮住。这些约定说起来都是”应该的”但真正让 AI 稳定执行靠的是 SKILL.md 里非常明确的规则描述这也是为什么它比直接让 AI “画个架构图”效果要好很多。怎么安装有两种方式按自己习惯选。方式一手动安装去仓库下载architecture-diagram.zip然后Claude.aiSettings → Capabilities → Skills → Add上传 zip 文件开启即可Claude Code CLI# 全局安装 unzip architecture-diagram.zip -d ~/.claude/skills/ # 项目级安装只对当前项目生效 unzip architecture-diagram.zip -d ./.claude/skills/方式二通过 Skills Hub 安装我用的是这种方式一键搞定。Skills Hub 是之前介绍过的桌面应用用来统一管理各 AI 编程工具的 Skill 文件装一次自动同步到 Cursor、Claude Code、Codex 等一堆工具里。https://github.com/qufei1993/skills-hub下载打开 Skills Hub切到Explore页面搜索architecture-diagram找到cocoon-ai/architecture-diagram-generator那条点安装就行。或者点右上角的手动添加直接粘贴 GitHub 仓库地址安装。Skills Hub 搜索安装安装完在My Skills页能看到这个 Skill 已经同步到对应工具了Skills Hub 已安装怎么用装好之后使用方式很简单不需要复杂的提示词。最推荐的用法让 AI 分析代码仓库然后生成架构图。用 Cursor、Claude Code 或 Windsurf 打开你的项目输入Analyze this codebase and describe the architecture. Include all major components, how they connect, what technologies they use, and any cloud services or integrations. Format as a list for an architecture diagram.AI 会输出一个完整的 HTML 文件在浏览器打开就行。还支持迭代生成之后不满意直接在聊天框说”把 Redis 移到左边”、”把数据库层换成蓝色”、”加一个消息队列节点”Claude 会按你的要求更新 HTML 文件不用重新生成整张图。这个特性挺实用的一次出不了满意的图很正常几轮对话就能调整到位。其他场景如果不是要分析现有代码直接描述一个架构也行比如Create an architecture diagram for: - React frontend - Node.js/Express API - PostgreSQL database - Redis cache - JWT authentication或者让它画一个”典型的 SaaS 架构”当模板再按需修改。画架构图这件事以前是能拖就拖因为太费时间。有了这个 Skill 之后1 分钟内能出一张质量不错的图是 HTML 形式改起来也方便有不合适的就让 AI 直接改喽。如果你的项目文档里正好缺这块值得试一下。
强烈推荐！这个 Skill 画架构图质量超高，一句话出图
做技术这行总有些事是真心懒得做的画架构图算一个。不是不重要是太麻烦。要么打开 http://draw.io 从头拖组件要么用 Mermaid 写一堆语法还要反复调位置最后搞出来的效果差强人意发给别人一看”就这”。更多时候干脆跳过这一步直接在文档里写”架构如下图所示”然后图是空白的。最近发现一个 Skill 把这件事解决了效果出乎意料地好顺手写篇文章给大家也安利一下。先看效果这是我用它帮Skills Hub项目生成的架构图整体是深色主题组件按前端、后端、数据库、外部服务分颜色标注层级关系清晰连接箭头干净底部还有三栏信息卡片做补充说明。最重要的是它输出的是一个独立的 HTML 文件浏览器直接打开不依赖任何第三方工具。用的字体是 JetBrains Mono整体风格偏工程审美我个人比较喜欢这种调性比那种糖果色的 UI 图要耐看。顺手又让它画了一张微服务架构图用的提示词是”微服务应用的典型架构是什么”不到 1 分钟出图图里涵盖了接入层、安全层、治理层、业务层、数据层、消息层、下游服务、基础设施完整的八个层次Kafka/RabbitMQ 消息总线、Service MeshIstio/Envoy、每个微服务独享数据库该有的细节全在。这张图我一字没改就是给了一句话直接生成的。这个 Skill 是什么Skill 来自 GitHub 仓库Cocoon-AI/architecture-diagram-generator是一个专门用于生成架构图的 Claude Skill。核心机制不复杂SKILL.md 定义了一套完整的设计系统包括颜色规范、组件样式、排版规则、SVG 布局约定然后让 AI 按这套系统生成 HTML 内联 SVG 代码。AI 输出的不是一张图片而是完整的 HTML 文件里面的 SVG 全部内联样式全部嵌入打开即用。设计系统里的细节挺多举几个例子语义色彩分层Frontend 用 Cyan青色Backend 用 Emerald翠绿Database 用 Violet紫色Cloud 用 Amber琥珀安全相关用 Rose玫瑰红。颜色有对应的语义不是随便选的。箭头渲染顺序连接线先于组件框绘制保证箭头在视觉上位于组件之后避免箭头盖住文字。组件框还会在半透明色块下面额外画一个纯色遮罩层防止箭头”透过”半透明区域。这种细节在 http://draw.io 里需要手动处理这里 Skill 直接内置了。图例位置约束Legend 必须放在所有边界框的外面并计算最低边界再加 20px 距离防止标注被区域框遮住。这些约定说起来都是”应该的”但真正让 AI 稳定执行靠的是 SKILL.md 里非常明确的规则描述这也是为什么它比直接让 AI “画个架构图”效果要好很多。怎么安装有两种方式按自己习惯选。方式一手动安装去仓库下载architecture-diagram.zip然后Claude.aiSettings → Capabilities → Skills → Add上传 zip 文件开启即可Claude Code CLI# 全局安装 unzip architecture-diagram.zip -d ~/.claude/skills/ # 项目级安装只对当前项目生效 unzip architecture-diagram.zip -d ./.claude/skills/方式二通过 Skills Hub 安装我用的是这种方式一键搞定。Skills Hub 是之前介绍过的桌面应用用来统一管理各 AI 编程工具的 Skill 文件装一次自动同步到 Cursor、Claude Code、Codex 等一堆工具里。https://github.com/qufei1993/skills-hub下载打开 Skills Hub切到Explore页面搜索architecture-diagram找到cocoon-ai/architecture-diagram-generator那条点安装就行。或者点右上角的手动添加直接粘贴 GitHub 仓库地址安装。Skills Hub 搜索安装安装完在My Skills页能看到这个 Skill 已经同步到对应工具了Skills Hub 已安装怎么用装好之后使用方式很简单不需要复杂的提示词。最推荐的用法让 AI 分析代码仓库然后生成架构图。用 Cursor、Claude Code 或 Windsurf 打开你的项目输入Analyze this codebase and describe the architecture. Include all major components, how they connect, what technologies they use, and any cloud services or integrations. Format as a list for an architecture diagram.AI 会输出一个完整的 HTML 文件在浏览器打开就行。还支持迭代生成之后不满意直接在聊天框说”把 Redis 移到左边”、”把数据库层换成蓝色”、”加一个消息队列节点”Claude 会按你的要求更新 HTML 文件不用重新生成整张图。这个特性挺实用的一次出不了满意的图很正常几轮对话就能调整到位。其他场景如果不是要分析现有代码直接描述一个架构也行比如Create an architecture diagram for: - React frontend - Node.js/Express API - PostgreSQL database - Redis cache - JWT authentication或者让它画一个”典型的 SaaS 架构”当模板再按需修改。画架构图这件事以前是能拖就拖因为太费时间。有了这个 Skill 之后1 分钟内能出一张质量不错的图是 HTML 形式改起来也方便有不合适的就让 AI 直接改喽。如果你的项目文档里正好缺这块值得试一下。
