不用 Visio 不用 draw.io！Architecture Diagram Generato用 Claude 一句话生成专业架构图，暗黑主题太酷了

💡 画架构图还在拖拽对齐？这个开源 Skill 让你用自然语言描述系统，Claude 自动生成专业级暗黑风架构图，一键导出 PNG/PDF。

📌 先看效果

画一张系统架构图，你通常需要：

🔧 打开 Visio / draw.io / Excalidraw
🖱️ 拖拽组件、调整位置、对齐连线
🎨 选颜色、调字体、统一风格
⏰ 半小时过去了，图还不太满意

Architecture Diagram Generator 来自 Cocoon AI，一句话概括：用自然语言描述你的系统，Claude 自动生成专业暗黑主题架构图，输出独立 HTML 文件，浏览器打开即用，一键导出 PNG/PDF。

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

看看它生成的效果：

🌐 Web App 架构图 --- React 前端 + Node.js API + PostgreSQL + Redis + JWT，语义配色清晰
☁️ AWS Serverless 架构图 --- CloudFront + API Gateway + Lambda + DynamoDB + S3 + Cognito，云服务一目了然
🔧 微服务架构图 --- React/Mobile + Kong 网关 + 3 种语言微服务 + Kafka + K8s，复杂系统井然有序

🎯 它能做什么？

特性	说明
🗣️ 自然语言输入	用英语描述系统架构，自动生成图
🌙 暗黑主题	Slate-950 深色背景 + 40px 网格纹理，专业感拉满
🎨 语义配色	前端=Cyan、后端=Emerald、数据库=Violet、云服务=Amber、安全=Rose
📋 一键导出	内置 Copy/PNG/PDF 按钮，直接粘贴到 Slides/Docs/Slack
📄 独立 HTML	单文件输出，CSS 内嵌 + 内联 SVG，无需任何依赖
🔄 对话式迭代	生成后继续对话，"请把 Redis 改成 Memcached" 即时更新
🔤 专业字体	JetBrains Mono 等宽字体，技术感十足
🏗️ 智能布局	根据系统流向自动排列组件位置和连线

语义配色系统

组件类型	颜色	用于
Frontend	🔵 Cyan	客户端应用、UI、边缘设备
Backend	🟢 Emerald	服务器、API、服务
Database	🟣 Violet	数据库、存储、AI/ML
Cloud/AWS	🟡 Amber	云服务、基础设施
Security	🔴 Rose	认证、安全组、加密
External	⚪ Slate	通用、外部系统

🚀 快速上手

安装方式

这个项目以 Claude Skill 形式分发，不需要 clone 代码，3 步搞定：

第一步：下载 ZIP 文件

从 GitHub 下载 architecture-diagram.zip

第二步：上传到 Claude Skills

打开 claude.ai
进入 Customize → Skills
点击 + → + Create skill → Upload a skill
选择下载的 ZIP 文件
开启 Skill 开关

⚠️ 前提：需要在 Settings → Capabilities 中开启 Code Execution

第三步：生成架构图

在 Claude 对话中输入：

复制代码

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

- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

Claude 会自动生成一个 HTML 文件，下载后用浏览器打开即可！

其他安装方式

Claude Code（命令行）：

bash 复制代码

# 全局安装
unzip architecture-diagram.zip -d ~/.claude/skills/

# 项目级安装
unzip architecture-diagram.zip -d ./.claude/skills/

Claude Project：

将 ZIP 文件上传到 Project Knowledge 即可。

三种输入方式

你不需要手写精确的描述，选最方便的：

方式 A：让 AI 分析你的代码库

在 Cursor / Claude Code / Windsurf / ChatGPT 中：

复制代码

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.

方式 B：自己写描述

复制代码

- React frontend talking to a Node.js API
- PostgreSQL database
- Redis for caching
- Hosted on AWS with CloudFront CDN

方式 C：问 Claude 要典型架构

复制代码

What's a typical architecture for a SaaS application?

然后把输出粘贴到 Claude（安装了 Skill 后）即可。

对话式迭代

生成后不需要重新画，直接对话修改：

复制代码

"Please add a Kafka message queue between the API and the database"
"Change Redis to Memcached"
"Add a load balancer in front of the API servers"
"Make the connections show the protocol (HTTPS, gRPC, etc.)"

🔍 核心原理揭秘

1. Skill 驱动：Claude 技能系统

Architecture Diagram Generator 本质上是一个 Claude Skill------一个包含指令和模板的 ZIP 包：

复制代码

architecture-diagram/
├── SKILL.md          # 技能指令（告诉 Claude 怎么画图）
└── resources/
    └── template.html  # 基础 HTML 模板

当你在 Claude 中触发这个 Skill 时，Claude 会：

读取 SKILL.md 中的设计规范
基于 template.html 模板
根据你的描述生成 SVG 架构图
嵌入到独立 HTML 文件中输出

2. 生成文件结构

每个生成的 HTML 包含：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <!-- 内嵌样式、Google Fonts -->
  </head>
  <body>
    <div class="container">
      <div class="header"><!-- 项目标题 + 动画状态指示器 --></div>
      <div class="diagram-container">
        <svg><!-- 架构图主体 --></svg>
      </div>
      <div class="cards"><!-- 3 张摘要卡片 --></div>
      <p class="footer"><!-- 项目元数据 --></p>
    </div>
  </body>
</html>

SVG viewBox：通常 1000-1100px 宽，响应式缩放
字体：JetBrains Mono（从 Google Fonts 加载）
背景：#020617 + 40px 网格纹理
Z-order：箭头先绘制，被组件方框的不透明背景遮盖，视觉层次清晰

3. 自适应布局

Claude 不是简单地把组件堆上去，而是根据你的系统描述：

布局 --- 组件按系统流向定位（左→右 / 上→下 / 分层）
连线 --- 箭头展示数据流和关系
标签 --- 协议、端口号、注释
分组 --- 安全组、云区域、限界上下文

4. 导出机制

内置的 3 个导出按钮背后是纯前端实现：

📋 Copy --- 将 SVG 渲染为高清 PNG 并复制到剪贴板
🖼️ PNG --- 下载高清 PNG 文件（适合幻灯片和截图）
📄 PDF --- 下载 PDF 文件（保留暗黑主题）

不需要任何额外工具，浏览器原生能力搞定。

⚖️ 优缺点分析

维度	评分	说明
🎯 易用性	⭐⭐⭐⭐⭐	自然语言输入，3 步出图
🎨 视觉效果	⭐⭐⭐⭐⭐	暗黑主题+语义配色，专业感极强
🔄 迭代效率	⭐⭐⭐⭐⭐	对话式修改，比拖拽快 10 倍
📦 分享便利	⭐⭐⭐⭐⭐	单 HTML 文件，发邮件/Slack 即可
🎛️ 自定义度	⭐⭐⭐⭐	可对话修改，但受模板约束
🌐 兼容性	⭐⭐⭐⭐	需要 Claude + Code Execution
📊 复杂图支持	⭐⭐⭐	超大型架构（50+ 组件）布局可能不够精细

适用场景

✅ 快速出图 ：开会前需要一张架构图，5 分钟搞定

✅ 文档配图 ：技术文档/README 中嵌入架构示意图

✅ 方案对比 ：快速生成多个架构方案的可视化对比

✅ 面试准备 ：展示项目架构时需要专业配图

✅ 团队沟通 ：新成员入职，一张图看懂系统全貌

✅ 博客/演示：技术分享时的架构配图

不太适合

❌ 需要精确像素级布局（Skill 生成有随机性）

❌ 超大型架构图（50+ 组件建议拆分子图）

❌ 非 Claude 用户（目前仅支持 Claude Skill）

❌ 需要动态/交互式架构图（输出是静态 HTML）

🏗️ 生态扩展

Cocoon AI 还提供了一个姊妹项目------Process Flow Diagram Generator：

项目	用途	形状语言
Architecture Diagram	系统架构图	方块 + 连线
Process Flow Diagram	流程图	流程形状 + 箭头

同一套设计语言（暗黑主题 + 语义配色），不同的形状体系。适合需要同时画架构图和流程图的场景。

📚 总结

Architecture Diagram Generator 解决了一个被忽视的痛点------画架构图太慢了。

传统方式：打开工具 → 拖拽组件 → 调整对齐 → 统一配色 → 导出，至少 30 分钟。

现在：描述架构 → Claude 生成 → 对话修改 → 一键导出，5 分钟搞定。

核心优势：

🗣️ 自然语言驱动，零学习成本
🌙 暗黑主题 + 语义配色，专业感远超手动画
📄 独立 HTML 输出，分享零摩擦
🔄 对话式迭代，修改比拖拽快 10 倍
🆓 完全免费，MIT 开源

它不是要替代 Visio 或 draw.io------对于精确布局的复杂架构图，传统工具仍然有优势。但对于 80% 的日常场景（文档配图、会议讨论、方案展示），这个工具的效率是碾压级的。

推荐指数：⭐⭐⭐⭐☆（4/5）

扣一星是因为仅支持 Claude 平台。但对于 Claude 用户来说，这是一个必装 Skill。

📢 原文链接：https://github.com/Cocoon-AI/architecture-diagram-generator

标签：#架构图 #ClaudeSkill #AI绘图 #ArchitectureDiagram #CocoonAI