跳至主要内容

Cocoon AI 的架构图生成器：用 Claude 技能一键生成专业架构图

Fen9Pi2026/8/11方法论方法论大约 9 分钟

前言：架构图画的困境

需要画架构图时，很多人的第一反应是：打开 draw.io 或 Visio，拖组件，画连线，调样式……

半小时过去了，图还没画完。

核心问题：

  • 工具太复杂，学习成本高
  • 拖拽太慢，效率低
  • 样式难调，不够专业
  • 导出麻烦，格式受限

今天介绍一个优雅的解决方案——Cocoon AI 的 Architecture Diagram Generator，一个 Claude Skill，让你用自然语言生成专业架构图。

一、项目概览

Architecture Diagram Generator 是一个开源的 Claude Skill，用于生成架构图。

一句话说清楚：

用 Claude 技能生成专业架构图——描述你的系统，Claude 创建美观的深色主题 HTML 文件。

项目地址：https://github.com/Cocoon-AI/architecture-diagram-generator 作者：Cocoon AI 开源协议：MIT 版本：1.1 类型：Claude Skill

核心特性

特性说明
无需设计技能用自然语言描述架构即可
快速迭代通过对话添加组件、改变布局、更新样式
易于分享输出单个 HTML 文件，无需特殊软件
内置导出每张图都有 Copy/PNG/PDF 按钮
深色主题Slate-950 背景，网格图案
语义化配色前端/后端/数据库/云服务有统一颜色

适用平台

  • Claude.ai（需要 Free/Pro/Max/Team/Enterprise 计划）
  • Claude Code CLI
  • Claude.ai Projects

前置条件：需要启用 Code Execution（Settings → Capabilities）

二、核心能力

1. 自然语言生成

不需要设计技能，只需要描述你的架构。

示例 1：Web 应用

Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

示例 2：AWS Serverless

Create an architecture diagram showing:
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth

示例 3：微服务

Create an architecture diagram for a microservices system with:
- 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

2. 快速迭代

生成后，可以通过对话修改。

Please update the diagram:
- Add a Load Balancer in front of the API servers
- Change the database from PostgreSQL to MongoDB
- Add a monitoring service

Claude 会实时更新图，不需要你手动拖拽。

3. 易于分享

输出是单个 HTML 文件。

  • 可以在任何浏览器中打开
  • 可以发送给团队成员
  • 可以包含在文档中
  • 可以打印或导出为 PDF
  • 可以托管在静态网站上

不需要安装任何软件，不需要特殊的 viewer。

4. 内置导出

打开 HTML 文件，工具栏有三个按钮：

  • 📋 Copy：复制高分辨率 PNG 到剪贴板，直接粘贴到 Slides/Docs/Slack
  • 🖼️ PNG：下载高分辨率 PNG 文件（适合幻灯片和截图）
  • 📄 PDF：下载保留深色主题的 PDF

没有安装，没有命令行，打开文件点一下就行。

三、设计系统

深色主题

Slate-950 背景 + 微妙网格图案。

  • 背景：#020617
  • 网格：40px 网格图案
  • 整体风格：深色、专业、技术感

语义化配色

不同类型的组件有统一的颜色编码。

组件类型颜色用途
FrontendCyan客户端应用、UI、边缘设备
BackendEmerald服务器、API、服务
DatabaseViolet数据库、存储、AI/ML
Cloud/AWSAmber云服务、基础设施
SecurityRose认证、安全组、加密
ExternalSlate通用、外部系统

价值：

  • 一眼就能区分组件类型
  • 保持视觉一致性
  • 降低理解成本

专业排版

使用 JetBrains Mono 字体。

  • Google Fonts 加载
  • 技术美学
  • 清晰易读

智能分层

箭头在组件框后渲染。

  • 箭头先画
  • 组件框后画
  • 使用透明填充实现遮挡效果
  • 视觉干净，箭头不穿过文字

四、使用流程

快速开始（3 步）

Step 1：安装 Skill

1. 下载 architecture-diagram.zip
2. 打开 Claude.ai → Customize → Skills
3. 点击 + 按钮 → Create skill → Upload a skill
4. 上传 zip 文件并启用技能

Step 2：获取架构描述

Option 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.

Option B：自己写

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

Option C：问 Claude 典型架构

What's a typical architecture for a SaaS application?

Step 3：生成图

在 Claude.ai 中（安装了 Skill 后）：

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

[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]

Claude 会生成一个 HTML 文件，你可以直接在浏览器中打开。

五、输出格式

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>

每张图包含：

  1. Header：项目标题 + 动画状态指示器
  2. Main diagram：SVG 格式的所有组件和连接
  3. Summary cards：3 张信息卡片，突出关键细节
  4. Footer：项目元数据

技术细节

  • SVG viewBox：通常 1000-1100px 宽，响应式缩放
  • 字体：JetBrains Mono（从 Google Fonts 加载）
  • 背景：#020617 + 40px 网格图案
  • Z-ordering：箭头先画，用透明填充实现遮挡

六、实际应用场景

场景 1：文档中的架构图

任务：为 README 或技术文档添加架构图。

传统方式：

  • 打开 draw.io
  • 拖组件、画连线、调样式
  • 导出为 PNG
  • 上传到文档

新方式：

1. 描述架构（1 分钟）
2. 让 Claude 生成图（10 秒）
3. 下载 PNG，插入文档（10 秒）

效率提升：从 30 分钟 → 2 分钟

场景 2：演示文稿中的架构图

任务：为演示文稿添加架构图。

传统方式：

  • 在 draw.io 中画图
  • 调整大小以适应幻灯片
  • 导出为 PNG
  • 插入到 PPT

新方式：

1. 生成图
2. 打开 HTML
3. 点击 Copy 按钮
4. 直接粘贴到 PPT

价值：

  • 一键复制高分辨率 PNG
  • 保留深色主题，在演示中更专业
  • 不需要调整大小

场景 3：团队协作

任务：和团队成员讨论架构。

传统方式：

  • 截图或导出图
  • 发给同事
  • 同事可能没有 draw.io，打不开
  • 同事可能不会用 draw.io

新方式：

1. 生成图
2. 发送 HTML 文件给同事
3. 同事在任何浏览器中打开
4. 同事可以提修改建议

价值：

  • 不需要安装软件
  • 任何人都能打开
  • 易于协作

七、设计理念

为什么是 Claude Skill？

不是独立工具，而是 Claude Skill。

原因 1：自然语言理解

  • Claude 能理解架构描述
  • Claude 能推断组件关系
  • Claude 能选择合适的布局

原因 2：对话式迭代

  • 不需要手动修改
  • 通过对话调整
  • 实时更新

原因 3：代码分析能力

  • 可以让 Claude 分析代码库
  • 自动生成架构描述
  • 从代码到图的自动化流程

为什么是 HTML？

不是 SVG 或 PNG，而是 HTML。

原因 1：易于分享

  • 单个文件
  • 任何浏览器都能打开
  • 不需要安装 viewer

原因 2：易于嵌入

  • 可以嵌入到文档
  • 可以托管在静态网站
  • 可以包含在邮件中

原因 3：易于导出

  • 内置 Copy/PNG/PDF 按钮
  • 不需要额外的工具
  • 格式灵活

为什么是深色主题？

不是浅色，而是深色。

原因 1：技术美学

  • 深色主题更符合技术社区审美
  • 适合演示和文档
  • 在幻灯片中更突出

原因 2：视觉一致性

  • Slate-950 背景统一
  • 网格图案增加深度
  • 语义化配色清晰区分组件

原因 3：专业感

  • 深色主题显得更专业
  • 适合技术文档
  • 在演示中更有冲击力

八、对比其他方案

vs draw.io

维度Architecture Diagram Generatordraw.io
学习成本低（自然语言）高（拖拽操作）
生成速度秒级分钟级
迭代效率对话式修改手动修改
输出格式HTML（单文件）多种格式
分享难度低（任何浏览器）中（需要 viewer）
专业度高（统一设计系统）中（依赖用户）

vs Mermaid

维度Architecture Diagram GeneratorMermaid
学习成本低（自然语言）中（需要学语法）
输出质量高（专业设计系统）中（默认样式简单）
迭代效率高（对话式）中（手改代码）
视觉一致性高（语义化配色）低（需要手动配置）

vs 手动设计

维度Architecture Diagram Generator手动设计（Figma/Sketch）
时间成本2 分钟30 分钟+
技能要求无需要设计技能
迭代速度快（对话）慢（手动）
一致性高（统一设计系统）中（依赖设计师）

九、最佳实践

获取架构描述的方式

方式 1：让 AI 分析代码

Analyze this codebase and describe the architecture.
Include all major components, how they connect,
what technologies they use, and any cloud services
or integrations.

方式 2：自己描述

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

方式 3：问 Claude 典型架构

What's a typical architecture for a SaaS application?

迭代的技巧

添加组件

Please add:
- A Load Balancer in front of the API servers
- A monitoring service

改变布局

Please rearrange the components:
- Put the database at the bottom
- Group the backend services together

更新样式

Please update:
- Change the database color to blue
- Make the arrows thicker

导出的建议

Copy：

  • 适合快速粘贴到 Slides/Docs/Slack
  • 高分辨率，不需要调整大小

PNG：

  • 适合保存到文件
  • 可以嵌入到文档

PDF：

  • 适合打印或长期保存
  • 保留深色主题

十、姐妹项目

Process Flow Diagram Generator

Architecture Diagram Generator 有一个姐妹项目——Process Flow Diagram Generator。

区别：

  • Architecture Diagram Generator：静态架构图（组件、连接）
  • Process Flow Diagram Generator：时序流程图（步骤、决策、分支）

相同点：

  • 同样的设计语言
  • 同样的深色主题
  • 同样的配色方案

使用场景：

  • 架构图：展示系统结构
  • 流程图：展示工作流程（审批流程、runbook、自动化流水线）

十一、总结

Architecture Diagram Generator 的核心价值：

  • 📝 自然语言生成：不需要设计技能，描述即可
  • ⚡ 快速迭代：对话式修改，实时更新
  • 🔗 易于分享：单个 HTML 文件，任何浏览器都能打开
  • 📤 内置导出：Copy/PNG/PDF 一键导出
  • 🎨 专业设计：深色主题，语义化配色
  • 🧩 智能布局：Claude 自动推断组件关系

核心思想：

用自然语言生成架构图，而不是拖拽组件。Claude 理解你的架构描述，选择合适的布局，生成专业的图表。

三个关键点：

  1. 自然语言输入：描述架构即可，不需要学工具
  2. 对话式迭代：通过对话修改，不需要手动调整
  3. 专业输出：统一的设计系统，高质量的图表

记住：

好的工具不在于功能有多强大，而在于使用有多简单。Architecture Diagram Generator 用自然语言替代了拖拽，用对话替代了手动修改。

参考资源

  • GitHub 项目：https://github.com/Cocoon-AI/architecture-diagram-generator
  • 姐妹项目：https://github.com/Cocoon-AI/process-flow-diagram-generator
  • Cocoon AI：https://cocoon-ai.com
  • Claude Skills 文档：https://support.claude.com/en/articles/12512180-use-skills-in-claude

声明：本文基于开源项目分析，具体使用请参考官方文档。

最近更新:
贡献者: Fen9Pi
Copyright © 2016-2022 风派 | 苏ICP备2025227748号-3