画架构图这件事，我相信每个开发者都有过痛苦时刻。

需求评审前30分钟，被催着出一张系统架构图。打开 draw.io，拖框框连箭头，对齐元素，调样式，一不小心就搞了两小时。或者试过 Mermaid，语法学了半天，图出来又丑又挤，格式调到怀疑人生。

然后 AI Skill 这个玩意儿出现了——你只需要描述系统，AI 直接给你生成专业图表。

最近我系统测试了三个开源的画图 Skill，分别覆盖不同场景。这篇文章把三个工具的核心能力、安装方式和适用场景都梳理了一遍，帮你按需选型。

---

一、architecture-diagram-generator：快速上手的深色 HTML 架构图

先说第一个，architecture-diagram-generator（GitHub: Cocoon-AI/architecture-diagram-generator），目前 4600 stars，Claude AI Skill。

核心能力一句话：描述你的系统架构 → 生成深色主题的独立 HTML 文件，在任何浏览器直接打开，无需额外工具。

安装支持三种方式：

• Claude.ai：上传 zip 包到 Skills 设置

• Claude Code CLI：解压到 ~/.claude/skills/

• 项目知识库：上传 zip 到 Project Knowledge

关于这个工具我之前写过详细文章，感兴趣的可以看：👉<再见Visio、Draw.io，用Claude Code三句话生成专业架构图，这个免费 Skill 我用了就回不去了。>

这篇文章重点介绍另外两个更新、能力更丰富的工具。

---

二、fireworks-tech-graph：7种风格 × 14种图表，输出 1920px 高清 PNG

第二个工具是重点——fireworks-tech-graph（GitHub: yizhiyanhua-ai/fireworks-tech-graph）。

5100 stars，8位贡献者，MIT 协议，Claude Code Skill。光看数字就知道这个项目的热度。

装一条命令就能用

npx skills add yizhiyanhua-ai/fireworks-tech-graph

依赖 rsvg-convert 做 PNG 导出，先装一下：

# macOS
brew install librsvg

# Ubuntu/Debian
sudo apt install librsvg2-bin

装完验证：

rsvg-convert --version

7种视觉风格，覆盖各种发布场景

这是这个工具我最喜欢的部分。不同场合需要不同风格，fireworks-tech-graph 直接内置了 7 种：

风格	背景	适合场景
Style 1 - Flat Icon （默认）	白色	博客、PPT、文档
Style 2 - Dark Terminal	深色霓虹	GitHub README、技术文章
Style 3 - Blueprint	深蓝蓝图	架构文档、工程设计
Style 4 - Notion Clean	极简白	Notion、Confluence、Wiki
Style 5 - Glassmorphism	毛玻璃渐变	产品官网、主题演讲
Style 6 - Claude Official	暖米色	Anthropic 风格图表
Style 7 - OpenAI Official	纯白现代	OpenAI 风格图表

风格1：扁平图标风

风格 2 — 暗黑极客风

风格 5 — 玻璃态卡片风

风格 7 — OpenAI 官方风格

对 AI/Agent 领域有专属支持

这是 fireworks-tech-graph 区别于其他工具的核心差异。它内置了一套 AI/Agent 领域的形状语义系统：

• LLM / 模型 → 双边框矩形 + ⚡

• Agent / 编排器 → 六边形

• Vector Store → 同心圆柱体

• Graph DB → 三圆簇

同时内置了主流 AI 架构模式，你直接描述模式名它就知道要画什么：

RAG Pipeline → Query → Embed → VectorSearch → Retrieve → LLM → Response
Agentic RAG  → 在此基础上加 Agent 循环 + Tool Use
Multi-Agent  → Orchestrator → [SubAgent×N] → Aggregator → Output
Tool Call Flow → LLM → Tool Selector → Execution → Parser → LLM（循环）

所以你的 prompt 可以这么写：

画一个 Mem0 记忆架构图，dark terminal 风格

生成一张 Multi-Agent 协作架构图，风格用 glassmorphism，输出到 ~/Desktop/

中英文都能识别，直接上。

支持完整 UML + AI 专属图表

14 种图表类型全覆盖，包括完整 UML（类图、组件图、时序图、状态机图……所有 14 种）以及 AI 领域专属图表（架构图、数据流图、智能体架构、记忆架构、特性对比矩阵等）。

输出是 SVG + 1920px 高清 PNG——SVG 保留矢量可编辑，PNG 1920px 宽度适合任何平台发布，Retina 屏不虚。

这个工具的定位很清晰：你描述，它输出专业图，直接发布，不用再改。

---

三、excalidraw-diagram-generator：输出可编辑格式，后续手动调整更方便

第三个工具换了个思路——excalidraw-diagram-generator，藏在 GitHub 官方维护的 awesome-copilot（31.8k stars）项目里，是一个 GitHub Copilot Skill。

和前两个的核心区别

前两个工具输出的是 HTML 或 PNG——静态的、最终的图。

excalidraw-diagram-generator 输出的是 .excalidraw 格式文件——可编辑的画板文件，拖到 excalidraw.com 或者 VS Code 的 Excalidraw 插件就能继续拖拽、修改、润色。

这个区别决定了适用场景：如果 AI 生成的图还需要你手动微调（加注释、移动元素、改颜色、给团队展示时实时修改），excalidraw-diagram-generator 是更好的选择。

支持 9 种图表类型

图表类型	适用场景
流程图（Flowchart）	业务流程、决策树
关系图	实体关系、依赖关系
思维导图（Mind Map）	概念拆解、头脑风暴
架构图	系统组件、数据流
数据流图（DFD）	数据处理流程
泳道图（Swimlane）	跨部门流程、职责划分
类图（Class Diagram）	OOP 设计、接口结构
时序图（Sequence）	API 调用链、消息流
ER 图	数据库设计、数据模型

使用方式

在装有该 Skill 的 Copilot 里，直接说：

Create a flowchart for user registration flow

Draw a system architecture diagram for a microservices app with API Gateway, 3 services, and PostgreSQL

Generate an ER diagram for a blog system with User, Post, Comment, Tag entities

Skill 会输出一个完整的 .excalidraw JSON 文件，打开方式：

1. 浏览器访问 https://excalidraw.com，拖拽文件进去

2. VS Code 安装 Excalidraw 插件，直接打开 .excalidraw 文件

进阶：支持 AWS/GCP/Azure 专业图标库

这个工具还支持集成云服务专业图标库。配置完成后，生成的 AWS 架构图可以用真实的 EC2、RDS、S3 等官方图标，而不是普通矩形。

配置流程：去 libraries.excalidraw.com 下载对应的 .excalidrawlib 文件，放到指定目录，再运行 Skill 附带的 Python 脚本拆分图标即可。对于需要出云架构评审文档的场景，这个功能很实用。

---

三把枪，各有各的用法

用一张表来总结：

维度	architecture-diagram-generator	fireworks-tech-graph	excalidraw-diagram-generator
平台	Claude AI / Code	Claude Code	GitHub Copilot
输出格式	独立 HTML	SVG + PNG	.excalidraw（可编辑）
视觉风格	深色主题 1 种	7 种风格	Excalidraw 手绘风
图表类型	架构图	14种 UML + AI专属	9种通用图表
AI/Agent 领域知识	基础	深度内置	无专属
后续可编辑	❌	❌	✅
高清 PNG 输出	❌	✅ 1920px	❌
云服务图标	❌	❌	✅（需配置）

选型建议：

• 需要快速生成专业 PNG 直接发布，又是 AI/Agent 领域的架构图 → fireworks-tech-graph

• 图生成后还要手动调整，或者需要在团队演示时实时修改 → excalidraw-diagram-generator

• 用 Claude.ai 网页版，想要一个独立 HTML 文件随手分享 → architecture-diagram-generator

---

最后说两句

说实话，这三个工具都代表了同一个趋势的不同解法：把"画图"这个低价值操作从开发者手里接走。Mermaid 只是把手工换成了 DSL，而这些 AI Skill 是直接消除了画图这个步骤本身。

我最近最常用的是 fireworks-tech-graph——主要因为我写技术博客需要各种风格的图，而且 AI/Agent 领域的语义支持省了我大量描述时间。但如果下次要出一份给客户看的架构评审文档，我会用 excalidraw-diagram-generator，因为对方肯定会有"这里改一下，那里移一下"的需求。

三个仓库都是 MIT 协议，开箱即用，有兴趣都可以去 Star 一下，顺便给作者一些鼓励。

你现在用什么工具画架构图？欢迎评论区聊聊，或者告诉我哪种工具你最想看深度测评。

---

三个仓库地址：

• https://github.com/Cocoon-AI/architecture-diagram-generator

• https://github.com/yizhiyanhua-ai/fireworks-tech-graph

• https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator

---

  我是顾北，关注我，解锁更多好玩的SKill

  谢谢你阅读我的文章，我们下期再见！

推荐阅读

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