Web应用、AWS Serverless、微服务三大战场：Architecture Diagram Generator典型场景实战拆解
【免费下载链接】architecture-diagram-generatorGenerate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. Works as a Claude AI skill.项目地址: https://gitcode.com/gh_mirrors/ar/architecture-diagram-generator
Architecture Diagram Generator（架构图生成工具）是一个 Claude AI 技能，只需一段文字描述，就能在几十秒内生成漂亮的深色主题系统架构图，输出为独立的 HTML/SVG 文件，无需任何设计基础。本文以 Web 应用、AWS Serverless、微服务三个典型场景为主线，拆解它的实际用法与产出效果，帮你快速上手架构图绘制。
为什么选择这个架构图生成工具？
传统画架构图的痛点很明显：找工具（Draw.io、Excalidraw）、拖组件、调连线、配色排版……一套下来半小时起步。Architecture Diagram Generator 的思路完全不同——把画图这件事外包给 AI：
- 用自然语言描述你的系统，AI 自动完成布局、连线、配色
- 输出是单个自包含 HTML 文件，任何浏览器打开即可，无需安装软件
- 每张图内置导出工具栏：一键复制 PNG / 下载 PNG / 下载 PDF
- 不满意的布局直接对话迭代："把 Redis 挪到左边"即可实时调整
它的核心是一份技能说明文件 architecture-diagram/SKILL.md，里面定义了完整的设计系统：语义化配色（前端青色、后端绿色、数据库紫色、云服务琥珀色、安全组件玫红色）、JetBrains Mono 等宽字体、网格背景、图例布局规则等。AI 生成的每张图都会严格遵循这套规范，所以输出风格高度统一。
快速上手：三步安装架构图技能
第 1 步：安装技能。下载仓库中的 architecture-diagram.zip，打开 Claude.ai →Customize→Skills→ 点击+→+ Create skill→ 上传 zip 文件，然后打开技能开关。注意前提：需在Settings → Capabilities中先启用 Code Execution。
第 2 步：准备系统描述。三个选项任选：让 Cursor / ChatGPT 等 AI 分析你的代码库输出组件清单；自己手写组件列表；或者直接问"一个典型的 SaaS 架构是什么样的"。
第 3 步：一句话生成。把描述粘贴给 Claude，加上一句"使用你的 architecture diagram skill 生成架构图"，几秒后就能拿到 HTML 文件。仓库中的 README.md 提供了更详细的安装指南与示例提示词。
下面进入三个实战场景。
场景一：Web 应用架构图——最经典的三层架构
先看一段标准提示词的效果：
为以下 Web 应用创建架构图：React 前端、Node.js/Express API、PostgreSQL 数据库、Redis 缓存、JWT 认证
生成结果如官方示例 examples/web-app.html：
几个值得注意的细节：
- 组件按语义配色：用户浏览器为灰色外部系统，React 前端青色，Node.js 后端绿色，PostgreSQL 紫色，一眼分清角色
- 连接线上标注协议：HTTPS、REST API、SQL，端口号（:3000、:8080、:5432）也一并标出
- 图例与摘要卡片：图下方自动生成 Frontend Stack / Backend Stack / Data Layer 三张信息卡，汇报时直接讲卡就行
场景二：AWS Serverless——事件驱动的无服务器架构
提示词换成云场景：
创建架构图：CloudFront CDN、API Gateway、Lambda 函数、DynamoDB、S3 静态资源、Cognito 认证
对应示例文件为 examples/aws-serverless.html。这张图体现了工具的分组能力：
- Region 边界：us-east-1 区域用琥珀色虚线框圈出，CloudFront 等边缘服务留在框外，符合云架构图的惯例
- 异步链路：Lambda 到 SQS 的消息队列箭头清晰表达了事件驱动的设计
- 摘要卡片自动归纳出 Infrastructure / Compute / Data 三层要点，比如"Auto-scaling to zero"、"Pay-per-invocation"，非常适合放进架构评审文档
场景三：微服务架构——复杂系统的可视化挑战
组件一多，连线一乱，就是架构图的噩梦。试试这个提示词：
创建微服务系统架构图：React Web 与移动客户端、Kong API Gateway、User Service (Go)、Order Service (Java)、Product Service (Python)、PostgreSQL / MongoDB / Elasticsearch、Kafka 事件流、Kubernetes 编排
官方示例为 examples/microservices.html。这张图展示了技能说明中两条关键布局规则的价值：
- 消息总线不压组件：Kafka / Event Bus 小方块被精确放在服务之间的 40px 空隙中，绝不与组件框重叠
- 图例永远在边界外：Kubernetes 集群虚线框结束后才放置图例，不会侵入集群区域
- 数据库 per service：每个微服务独占一个数据库（PostgreSQL、MongoDB、Elasticsearch、Redis），领域驱动设计的典型形态一目了然
导出与分享：没有命令行，只有点击
生成的 HTML 文件打开后，标题栏右侧有一个不显眼的⋯按钮，点开展开三个选项：
| 按钮 | 用途 |
|---|---|
| 📋 Copy | 高清 PNG 直接进剪贴板，粘贴到 PPT / 文档 / Slack |
| 🖼️ PNG | 下载 2 倍分辨率 PNG，适合截图与幻灯片 |
| 单页 PDF，保留深色主题，不走浏览器打印对话框 |
导出功能由内置的 html2canvas + jsPDF 实现（带 SRI 完整性校验），除此之外整张图零依赖：内嵌 CSS、内联 SVG、纯 CSS 动画。文件拷给同事就能打开，丢到静态托管站也能直接用。
小结：一张架构图的三种打开方式
回顾三大战场：
- Web 应用：三层结构、协议标注，日常项目文档首选
- AWS Serverless：Region 边界、异步消息流，云架构评审利器
- 微服务：密集组件 + 事件总线的复杂布局，靠规范化的间距与图例规则兜底
Architecture Diagram Generator 的核心价值在于把"画架构图"从手工活变成了对话：描述 → 生成 → 迭代 → 导出，全程几分钟。如果你经常需要给项目画系统图，这个技能值得装进工具箱。技能规范详见 architecture-diagram/SKILL.md，更多示例可查看 examples/ 目录下的 HTML 文件。
【免费下载链接】architecture-diagram-generatorGenerate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. Works as a Claude AI skill.项目地址: https://gitcode.com/gh_mirrors/ar/architecture-diagram-generator
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
