Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

架构图生成器

需要架构图？让 AI 为你生成一张。

使用 Claude.ai 搭配这项特殊技能，可在数秒内生成专业的架构图。描述你的系统，Claude 会创建精美的深色主题架构图，输出为可在任意浏览器中打开的独立 HTML 文件。

• 无需设计技能 — 只需用通俗英语描述你的架构
• 快速迭代 — 让 Claude 添加组件、调整布局或更新样式
• 轻松分享 — 输出为单个 HTML 文件，无需专用软件
• 内置导出 — 每张图都内置 Copy / PNG / PDF 按钮

🚀 快速开始（3 步）

步骤 1：安装 Skill

⚠️ 适用于 Free、Pro、Max、Team 和 Enterprise 套餐（需先在 Settings → Capabilities 中启用 Code Execution）

1. 下载 architecture-diagram.zip
2. 前往 claude.ai → Customize → Skills
3. 点击 + 按钮 → + Create skill → Upload a skill，然后上传 zip 文件
4. 开启该 skill

📚 需要帮助？请参阅下方的完整安装指南。

步骤 2：获取描述你架构的文本

你只需要一份系统的文字描述。任选其一即可：

选项 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?

步骤 3：让 Claude 使用该 Skill 生成架构图

将步骤 2 的输出粘贴到 Claude（已安装 Architecture Diagram Generator skill）：

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

[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]

就这么简单！Claude 会生成可在任意浏览器中打开的美观 HTML 文件。

然后！你可以通过聊天轻松迭代。让 Claude：Please update XYZ，即可实时看到架构图更新。你也可以让 Claude 修复架构图中的任何问题。

---

常见场景示例提示词

Web 应用：

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

AWS serverless：

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

微服务：

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

---

📸 示例

Web Application（React + Node.js + PostgreSQL）

AWS Serverless（Lambda + API Gateway + DynamoDB）

Microservices（Kubernetes + API Gateway）

📤 导出你的架构图

在任意现代浏览器中打开 HTML 文件，使用页眉中的工具栏：

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

无需安装。无需命令行。打开文件并点击即可。

✨ 功能特性

• 精美深色主题 — Slate-950 背景搭配细腻网格图案
• 语义化配色 — 前端、后端、数据库、云和安全组件使用一致的颜色
• 自包含输出 — 单个 HTML 文件，内嵌 CSS 与内联 SVG
• 兼容任意浏览器 — 无需安装，打开文件即可
• 专业排版 — 使用 JetBrains Mono 呈现技术美感
• 智能分层 — 箭头在组件框后方清晰渲染

🎨 调色板

Component Type	Color	Use For
Frontend	Cyan	Client apps, UI, edge devices
Backend	Emerald	Servers, APIs, services
Database	Violet	Databases, storage, AI/ML
Cloud/AWS	Amber	Cloud services, infrastructure
Security	Rose	Auth, security groups, encryption
External	Slate	Generic, external systems

📦 安装

⚠️ 适用于： Free、Pro、Max、Team 和 Enterprise 套餐

前提条件： 上传自定义 skill 前必须启用 Code Execution：

• Free / Pro / Max — 在 Settings → Capabilities 中开启
• Team / Enterprise — 管理员在 Organization settings → Skills 中启用

📚 初次使用 Claude Skills？ 请参阅官方指南：Use Skills in Claude

Claude.ai（推荐）

1. 下载 architecture-diagram.zip
2. 前往 Customize → Skills
3. 点击 + 按钮，然后 + Create skill，再 Upload a skill
4. 选择 zip 文件并开启该 skill

Claude.ai Projects（备选）

1. 在你的 Claude.ai Project 中，将 architecture-diagram.zip 上传到 Project Knowledge

Claude Code CLI

解压到你的 skills 目录：

# Global skills
unzip architecture-diagram.zip -d ~/.claude/skills/

# Or project-local
unzip architecture-diagram.zip -d ./.claude/skills/

手动配置

确保 Claude 可以访问这两个文件：

architecture-diagram/
├── SKILL.md              # Skill instructions
└── resources/
    └── template.html     # Base template

💾 输出

Claude 会生成自包含的 HTML 文件，你可以：

• 在任意浏览器中直接打开
• 与队友分享（发送文件即可！）
• 纳入文档
• 打印或导出为 PDF
• 托管在任意静态站点

📐 输出包含内容

每张生成的架构图包含：

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

🛠 自定义

该 skill 使用一致的设计系统，但 Claude 会按需调整：

• Layout — 根据系统流程定位组件
• Connections — 箭头展示数据流与关系
• Labels — 协议、端口与注释
• Groupings — 安全组、云区域、限界上下文（bounded contexts）

📄 示例输出

生成的 HTML 结构：

<!DOCTYPE html>
<html>
  <head>
    <!-- Embedded styles, Google Fonts -->
  </head>
  <body>
    <div class="container">
      <div class="header"><!-- Title --></div>
      <div class="diagram-container">
        <svg><!-- Architecture diagram --></svg>
      </div>
      <div class="cards"><!-- Summary cards --></div>
      <p class="footer"><!-- Metadata --></p>
    </div>
  </body>
</html>

🔧 技术细节

• SVG viewBox： 通常为 1000–1100px 宽，可响应式缩放
• 字体： JetBrains Mono（从 Google Fonts 加载）
• 背景： #020617，带 40px 网格图案
• Z 轴排序（Z-ordering）： 箭头先绘制，再由透明组件填充下方的非透明背景进行遮罩

📄 姊妹 Skill

针对随时间展开的分步工作流——审批流程、runbook、自动化流水线，请参阅 process-flow-diagram-generator — 相同的设计语言，不同的图形语言。

📝 许可证

MIT License — 可免费使用、修改和分发。

👥 贡献

欢迎提出建议与改进！你可以：

• 针对 bug 或功能需求提交 issue
• 提交包含改进的 PR
• 分享你生成的图表

📬 联系方式

Cocoon AI 📧 hello@cocoon-ai.com

---

Made with ❤️ by Cocoon AI