删了一个词整张图的图标全变占位符：Slate-950深色背景下的架构图生成实验

2025 年 10 月，Anthropic 正式推出 Claude Skills 机制，开发者可以把特定能力封装成可复用的模块。几个月时间，Skills 生态快速膨胀，但大部分 Skill 还在探索"怎么用"，真正能落地、能提效的并不多。

最近一个名为 Architecture Diagram Generator 的项目在 GitHub 开源了，用一种很直接的方式，把架构图绘制的门槛几乎降到了零。项目 Star 数已突破 3000，在 Skills 生态里是最早一批真正好用的 Skill 之一。

简单来说，它是一个 Claude AI Skill，你用自然语言描述系统架构，它生成一张专业的架构图，输出为独立的 HTML 文件，浏览器直接打开就能看。不需要设计技能，不需要学习绘图工具，甚至不需要安装软件，只要你能在 Claude 里打字。

核心亮点

自然语言输入，不用学语法

以前画架构图，你得先学会一个工具。Draw.io 的操作逻辑、Lucidchart 的组件库、Mermaid 的语法规则，每个工具都有自己的学习成本。这个 Skill 的做法是：你只需要会说人话。

比如你想画一个典型的 Web 应用架构，直接在 Claude 里输入：

创建一个架构图，包含 React 前端、Node.js API、PostgreSQL 数据库、Redis 缓存、JWT 认证。

Claude 会调用这个 Skill，生成一个完整的 HTML 文件，打开浏览器就能看到一张布局清晰、颜色分明的架构图。整个过程不需要拖拽任何组件，也不需要调整任何样式。

深色主题，专业感强

大多数架构图工具默认是白色背景，看起来像文档插图。这个 Skill 生成的图表用的是 Slate-950 深色背景，配上 40px 的网格图案，JetBrains Mono 字体，整体感觉更像技术仪表盘。深色背景在演示时更醒目，放在文档里也更显眼。

单文件输出，分享简单

生成的架构图是一个独立的 HTML 文件，所有样式、字体、SVG 图形全部内嵌，没有外部依赖。你可以直接把文件发给同事，他双击打开就能看，不需要安装插件，不需要登录账号。如果需要 PDF，用浏览器的打印功能导出就行。

语义化颜色编码

Skill 会自动给不同类型的组件分配颜色：

• Cyan（青色）：前端、客户端、UI
• Emerald（翠绿）：后端、API、服务
• Violet（紫罗兰）：数据库、存储、AI/ML
• Amber（琥珀）：云服务、基础设施
• Rose（玫瑰）：认证、安全、加密
• Slate（石板灰）：外部系统、第三方服务

这种颜色编码基于组件的语义角色，你看到青色就知道是前端，看到紫色就知道是数据层，一致性让图表可读性大大提升。

对话式迭代，改图不用重画

第一次生成的图表布局可能不完美，你想把数据库移到右边，或者给某个连接加上协议标注。使用传统工具得手动拖拽组件、调整连线，在这个 Skill 里你只需要继续跟 Claude 说：

把数据库移到右侧，给 API 和数据库之间的连接标注 PostgreSQL 协议。

Claude 会重新生成 HTML，你立刻看到修改后的效果。

实际场景

AWS Serverless 架构：输入包含 CloudFront CDN、API Gateway、Lambda 函数、DynamoDB、S3 静态资源、Cognito 认证的描述，生成的图表自动把云服务组件用琥珀色标注，前端用青色，数据库用紫色，层次清晰，可直接用在技术方案文档里。

微服务架构：输入包含 React Web 应用和移动客户端、Kong API Gateway、三个不同语言的微服务、多种数据库、Kafka、Kubernetes 的描述，生成的图表会把三个微服务分组，数据库层单独聚合，消息队列和编排层清晰标注，整体布局根据数据流自动排列。

从代码库生成架构图：先在 Cursor 或 Claude Code 里分析代码库，描述架构，然后把输出粘贴到安装了这个 Skill 的 Claude 里，加上一句"用架构图 Skill 根据这个描述生成图表"，就能从代码直接到图表。

安装与使用

你需要 Claude Pro、Max、Team 或 Enterprise 计划，免费用户暂时无法使用 Skills。

安装步骤：去 GitHub 下载 architecture-diagram.zip 文件，打开 claude.ai，进入 Settings → Capabilities → Skills，点击 + Add 上传 zip 文件，最后开启 Skill 即可。

使用时在 Claude 里输入类似这样的提示词：

用你的架构图 Skill 创建一个架构图，描述如下：[你的架构描述]

Claude 会生成一个 HTML 文件，下载后用浏览器打开即可。如果布局不满意，继续对话调整就行。

限制说明

只能在 Claude.ai 和 Claude Code 里使用，不支持其他 AI 平台。生成的图表是静态的，不支持多人实时协作，团队要在线白板协作还是得用 Miro 或 FigJam。大型架构图可能导致 SVG 文件较大。颜色方案目前固定 6 种，不支持自定义组件图标或颜色，有特殊视觉需求可能得手动改生成的 HTML。

项目基于 MIT 协议开放，可商用和二次开发。

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