Fireworks Tech Graph：用自然语言生成工业级架构图，Claude Code绘图神器
告别手动画图：一句描述，AI 自动生成出版级架构图。
引言：架构师的痛，谁懂？
画架构图是技术人的日常，也是技术人的痛。
- Visio 太笨重，图标老旧
- Draw.io 功能全，但得自己摆位置
- Figma 好看，但学习成本高
- Mermaid 代码写图，不够直观
最烦的是：好不容易画完，需求一变，全盘重画。
现在，有了 Fireworks Tech Graph——用自然语言描述，AI 自动生成工业级架构图。
一、Fireworks Tech Graph 是什么？
Fireworks Tech Graph 是一款开源工具，核心能力：
自然语言 → 出版级技术图表
| 特性 | 详情 |
|---|---|
| 输入 | 自然语言（中英文皆可） |
| 输出 | SVG 矢量图 + 高清 PNG（1920px，Retina 2×） |
| 渲染 | rsvg-convert 无损转换 |
| 专长 | AI/Agent 领域架构图（RAG、Mem0、Multi-Agent、Tool Call） |
一句话演示
你说："生成一个 Mem0 记忆架构图，深色风格"
它输出：
- SVG 源文件（可二次编辑）
- PNG 高清图（直接插入文档）
- 自动排版，专业配色
二、7 种视觉风格
| 风格 | 背景色 | 适用场景 |
|---|---|---|
| Flat Icon（默认） | 纯白 #ffffff | 博客、文档、PPT |
| Dark Terminal | 深黑 #0f0f1a | GitHub、技术文章 |
| Blueprint | 蓝图 #0a1628 | 架构文档、工程规范 |
| Notion Clean | 极简白 | Notion、Confluence |
| Glassmorphism | 暗色渐变 | 产品官网、Keynote |
| Claude Official | 暖米 #f8f6f3 | Anthropic 风格文档 |
| OpenAI Official | 纯白 #ffffff | OpenAI 风格文档 |
风格切换：一句指令搞定
"生成微服务架构图，Blueprint 风格"
"画个 RAG 流程图，要 Dark Terminal 风格"
三、AI 领域专属优化
Fireworks Tech Graph 对 AI/Agent 系统有深度理解：
| 领域 | 自动识别元素 |
|---|---|
| RAG | 检索器、向量库、重排序、生成器 |
| Mem0 | 记忆层、实体提取、时间线、关系图谱 |
| Multi-Agent | 代理节点、通信总线、任务调度 |
| Tool Call | 工具注册、参数解析、执行流程 |
| Agentic Search | 搜索迭代、反思、答案合成 |
自动排版：Swimlane 泳道图、圆柱数据库、语义箭头，一应俱全。
四、Claude Code 集成方案
Fireworks Tech Graph 可作为 Claude Code Skill 使用，同时 Claude Code 还有其他绘图 MCP 可选：
方案对比
| 工具 | 风格 | 最佳场景 | 输出格式 |
|---|---|---|---|
| Fireworks Tech Graph | 7 种专业风格 | AI 架构图、 publication-ready | SVG/PNG |
| Mermaid MCP | 代码生成 | 快速迭代、Git 版本控制 | .mmd/.md |
| Draw.io MCP | 专业图标 | 云架构（AWS/GCP） | .drawio |
| Excalidraw MCP | 手绘风 | 头脑风暴、演示 | 可编辑草图 |
Fireworks Tech Graph 在 Claude Code 中的使用
# 1. 安装 Skill
claude skills install fireworks-tech-graph
# 2. 自然语言生成
claude > 生成一个多 Agent 协作架构图，展示任务分配和结果聚合流程，用 Blueprint 风格
# 3. 自动输出
✓ multi-agent-architecture.svg
✓ multi-agent-architecture.png
五、实战案例
案例 1：RAG 系统架构
输入：
"生成 RAG 检索增强生成架构图，包含：
- 用户查询输入
- 向量检索（Pinecone）
- 重排序（Cohere）
- LLM 生成（Claude）
- 输出响应
使用 Dark Terminal 风格"
输出：
- 深色背景专业图
- 自动识别 RAG 组件
- 箭头指示数据流向
- 1920px PNG 可直接放入技术博客
案例 2：Mem0 记忆系统
输入：
"画 Mem0 记忆架构，展示：
- 短期记忆（SQLite）
- 长期记忆（Postgres + pgvector）
- 实体图谱（关系提取）
- Dream Cycle 自动整理
使用 Claude Official 风格"
输出：
- 暖米色 Anthropic 风格
- 清晰展示三层记忆架构
- 时间线标注 Dream Cycle
案例 3：工具调用流程
输入：
"生成 Tool Call 执行流程图：
- 用户意图识别
- 工具选择（函数调用）
- 参数提取和验证
- 执行和结果返回
使用 Flat Icon 风格"
输出：
- 简洁扁平图标风格
- 适合放入产品文档
六、快速开始
方式 1：独立使用
# 1. 安装
git clone https://github.com/fireworks-ai/tech-graph.git
cd tech-graph
pip install -r requirements.txt
# 2. 配置 API Key
export FIREWORKS_API_KEY="your-key"
# 3. 生成图表
python generate.py "描述你的架构" --style dark
方式 2：Claude Code Skill
# 在 Claude Code 中安装
claude skills install fireworks-tech-graph
# 直接使用自然语言
claude > 生成一个电商系统微服务架构图，展示订单、支付、库存服务，用 Blueprint 风格
七、为什么选择 Fireworks Tech Graph？
| 痛点 | 传统工具 | Fireworks Tech Graph |
|---|---|---|
| 画图耗时 | 手动拖拽 2 小时 | 一句话 30 秒 |
| 风格不统一 | 各图各样 | 7 种预设风格 |
| 修改困难 | 位置重调 | 改描述重新生成 |
| AI 领域不专业 | 通用图标 | 深度理解 Agent 模式 |
| 导出麻烦 | 多步操作 | SVG/PNG 自动导出 |
八、局限与注意事项
- 依赖 Fireworks API —— 需要 API Key
- AI 领域优化 —— 通用架构图可能不如专业工具
- 复杂布局 —— 超复杂系统可能需要人工微调
- 中文支持 —— 部分样式中文字体需额外配置
九、生态定位
┌─────────────────────────────────────────────────────────┐
│ 架构图工具生态 │
├─────────────────────────────────────────────────────────┤
│ 手绘草图 代码生成 AI 生成 专业设计 │
│ Excalidraw Mermaid Fireworks Figma/Visio │
│ 👆 👆 👆 你在这里 👆 │
│ 快速脑暴 版本控制 自然语言 精细设计 │
└─────────────────────────────────────────────────────────┘
Fireworks Tech Graph 填补了什么？
- 比 Mermaid 更直观（不用写代码）
- 比 Excalidraw 更专业（不是草图）
- 比 Figma 更快（不用学习）
- 专门优化 AI/Agent 领域
结语：让架构图不再成为瓶颈
技术人应该把精力放在思考架构，而不是画图。
Fireworks Tech Graph 让架构图从"产出物"变成"副产物"——你描述清楚系统，图自然就生成了。
当 AI 能听懂你的架构描述，画图就不再是技术债，而是技术红利。
参考资源
- GitHub: github.com/fireworks-ai/tech-graph
- Fireworks: fireworks.ai
- Claude Code: claude.ai/code
- 相关工具: Mermaid、Draw.io、Excalidraw
思考题：你最想用这个工具画什么架构图？RAG、Multi-Agent、还是你自己的项目？