再见Visio、Draw.io，用Claude Code三句话生成专业架构图，这个免费 Skill 我用了就回不去了。

上周我在给一个新项目写技术方案，需要配一张架构图。

打开 draw.io，摆了半小时方块，对齐线还歪了。换 Lucidchart，功能太多反而不会用。最后找了个 PPT 模板凑合了事，丑得自己都不好意思截图。

直到我发现了这个东西------Architecture Diagram Generator，一个 Claude Skill，描述几句话，架构图直接生成，还是带暗色主题的那种，看起来比你花一小时手画的专业多了。

今天把实操流程完整记录下来，你照着做就能用。

这玩意儿到底是什么？

简单说：一个安装在 Claude 里的技能插件（Skill），让 Claude 能够根据你的文字描述，自动生成专业架构图，输出一个可以直接在浏览器打开的 HTML 文件。

不需要 Figma，不需要 draw.io，不需要任何设计工具。你只要能描述你的系统，它就能画出来。

输出效果是这样的：

暗色背景（#020617，就是那种很有程序员质感的深蓝黑）
带细网格纹路的底板
语义化配色：前端组件用青色、后端用翠绿色、数据库用紫色、云服务用琥珀色、安全相关用玫瑰红
字体是 JetBrains Mono，技术感拉满
组件之间有带箭头的连接线，数据流向一目了然
下方还有 3 张摘要卡片，总结关键信息

最重要的是------纯 HTML 文件，无任何依赖，发给任何人用浏览器就能打开。

安装步骤（5分钟搞定）

⚠️ 需要 Claude Pro / Max / Team / Enterprise 订阅，免费版暂不支持 Skills 功能。

方式一：Claude.ai 网页端安装（推荐）

第一步：下载 Skill 文件

去 GitHub 仓库下载 architecture-diagram.zip： 👉 https://github.com/Cocoon-AI/architecture-diagram-generator

找仓库根目录下专门的 architecture-diagram.zip 文件下载。

第二步：上传到 Claude Skills

打开 claude.ai → 右上角头像 → Settings → Capabilities → 往下滚找到 Skills 区域 → 点 + Add → 上传刚才下的 zip 文件。

第三步：开启 Skill

上传后会出现一个卡片，把右边的开关拨到开启状态。完成！

方式二：Claude Code CLI 安装

如果你平时用 Claude Code，可以直接命令行装：

复制代码

# 全局安装（所有项目都能用）
unzip architecture-diagram.zip -d ~/.claude/skills/

# 或者只在当前项目用
unzip architecture-diagram.zip -d ./.claude/skills/

装完不用额外配置，Claude Code 会自动识别。

实操教程：三个场景全覆盖

安装完之后，核心使用方式就一句话：

打开 Claude 对话，告诉它用 architecture diagram skill 帮你画图，然后描述你的架构。

下面直接上三个实际场景。

场景一：标准 Web 应用

适合谁： 需要快速出一张 Web 项目架构图用于技术文档或 PPT 展示。

提示词（直接复制用）：

复制代码

Use your architecture diagram skill to create an architecture diagram from this description:

A web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

中文解读： 告诉 Claude 用架构图 Skill 画图，描述一个包含 React 前端、Node.js/Express API、PostgreSQL 数据库、Redis 缓存、JWT 认证的 Web 应用。

几秒钟后，Claude 会输出一整段 HTML 代码。把它复制到一个 .html 文件里，浏览器打开就完事。

场景二：AWS Serverless 架构

适合谁： 做云原生服务，需要向客户或老板展示 AWS 部署方案。

提示词：

复制代码

Use your architecture diagram skill to create an architecture diagram from this description:

An AWS serverless architecture:
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth

中文解读： 描述一个 AWS 无服务架构，包含 CloudFront、API Gateway、Lambda、DynamoDB、S3 静态资源和 Cognito 认证。

生成的图里，各 AWS 服务会用琥珀色标注，非常好区分。

场景三：微服务系统

适合谁： 系统设计比较复杂，需要展示多个微服务之间的关系和数据流向。

提示词：

复制代码

Use your architecture diagram skill to create an architecture diagram from this description:

A microservices system:
- React web app and mobile clients
- Kong API Gateway
- User Service (Go), Order Service (Java), Product Service (Python)
- PostgreSQL, MongoDB, and Elasticsearch databases
- Kafka for event streaming
- Kubernetes orchestration

中文解读： 一个包含 React + 移动端客户端、Kong 网关、三个语言各异的微服务（Go/Java/Python）、多种数据库（PostgreSQL/MongoDB/Elasticsearch）、Kafka 消息队列和 Kubernetes 编排的完整微服务架构。

组件多的时候，Skill 会自动分层排布，前端在上、网关居中、服务层在下、数据层最底，箭头清楚表明数据流向。

进阶玩法：让 AI 分析你的代码库

已经有一个项目，但不想手写描述？可以这样：

第一步： 打开你的代码（Cursor、Claude Code、VS Code 都行），粘贴这段提示词：

复制代码

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.

中文意思： 分析这个代码库，描述其架构，包括所有主要组件、它们之间的连接方式、使用的技术栈、云服务或外部集成，格式化成适合架构图的列表。