fireworks-tech-graph：用自然语言”画”出专业级技术架构图

你只需要描述系统，剩下的交给它。

如果你曾经为了画一张像样的技术架构图，在 draw.io 里拖拽了半个小时，或者在 Mermaid 的 DSL 语法里反复调试——这篇文章就是为你写的。

fireworks-tech-graph 是一个开源项目，目前已经在 GitHub 上获得了 6.2k Star。它的核心能力就一句话：用中文或英文描述你的系统，几秒钟内自动生成高质量的 SVG + 1920px 高清 PNG 技术图表。

目录

1. 它能做什么

举个直观的例子。你输入：

“画一张 Mem0 记忆架构图，暗色风格”

项目会自动识别为”记忆架构图 + 风格 2（暗色终端）”，然后生成带泳道、圆柱、语义箭头的 SVG，最后导出 1920px 的 PNG，直接拿来就能用。

相比传统工具，它最大的优势在于没有学习成本——你不需要学 Mermaid 语法，不需要在画布上手动对齐，不需要记 UML 规范。只要你会描述系统，它就会画。

2. 7 种视觉风格，覆盖所有场景

这是这个项目最让人惊喜的地方。它内置了 7 种完整的视觉风格，每一种都有专门的色板、字体和构图规则：

风格 效果 最适合
Flat Icon（默认） 白底彩色图标，清爽 博客、幻灯片、文档
Dark Terminal 深色背景霓虹色强调 GitHub README、技术文章
Blueprint 蓝图网格 + 青色线条 工程文档、架构评审
Notion Clean 极简白，单一强调色 Wiki、内部文档
Glassmorphism 磨砂玻璃 + 柔和光晕 主题演讲、产品发布
Claude Official 暖奶油底 + 品牌配色 正式对外展示
OpenAI Official 纯白极简 + 绿色箭头 现代 API 文档

其中 Glassmorphism（玻璃拟态） 和 Blueprint（蓝图） 是最受欢迎的两种风格，前者适合对外展示，后者适合对内工程文档。

3. 14 种 UML + AI 领域专用图表

它不仅支持全部 14 种 UML 图（类图、组件图、部署图、序列图、状态机图、ER 图等），还内置了对 AI/Agent 系统领域模式的深度理解：

  • RAG Pipeline：查询 → 嵌入 → 向量搜索 → 检索 → LLM → 响应
  • Agentic RAG：叠加 Agent 循环 + 工具调用
  • Agentic Search：规划器 → [搜索/计算/代码] → 合成器
  • Mem0 记忆层：输入 → 记忆管理器 → [向量库 + 图数据库] → 上下文
  • Multi-Agent：编排器 → [子智能体 ×N] → 聚合器 → 输出
  • Tool Call Flow：LLM → 工具选择 → 执行 → 解析 → LLM（循环）

也就是说，当你描述一个 RAG 系统时，它”知道”RAG 应该有哪些组件、数据流向是怎样的，不需要你事无巨细地指定每一个细节。

4. 语义系统：形状和箭头都会”说话”

这是 fireworks-tech-graph 的隐性优势——它有一套内建的语义形状词汇表和语义箭头系统：

  • LLM/模型 → 双线框圆角矩形 + ⚡
  • 智能体/编排器 → 六边形
  • 向量库 → 带内环的圆柱
  • 图数据库 → 三个圆的簇
  • 工具/函数 → 矩形 + ⚙
  • API/网关 → 单线框六边形
  • 决策节点 → 菱形

箭头的颜色和线型也在传递信息：实线 = 主数据流，虚线 = 写入操作，短虚线 = 异步事件，曲线 = 反馈循环。看图的工程师能在瞬间理解系统的读写路径和调度关系。

5. 快速上手

安装：

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

安装 PNG 渲染器（三选一，推荐 cairosvg）：

1
pip install cairosvg

直接使用：

1
2
3
4
5
6
7
8
# 基础用法
用风格 5（玻璃拟态）画一张智能体能力架构图

# 指定输出路径
生成一张 Mem0 架构图，输出到 ~/Desktop/

# 画 UML
画一张 OAuth2 授权码流程序列图

6. 和 Mermaid、draw.io 比，它好在哪？

Mermaid draw.io fireworks-tech-graph
自然语言输入 ✗ ✗ ✅
AI/Agent 领域模式内置 ✗ ✗ ✅
多视觉风格 ✗ 手动 ✅ 7 种内置
高清 PNG 导出 ✗ 手动 ✅ 自动 1920px
语义箭头 ✗ 手动 ✅ 自动
无需联网 ✅ ✗ ✅

Mermaid 适合在 Markdown 里快速画简单流程图，draw.io 适合需要手工精修的复杂图。而 fireworks-tech-graph 的定位是：描述系统 → 立刻拿到可直接用的图。三者互补，各有战场。

7. 我的评价

这是一个真正理解开发者痛点的项目。

技术团队在画架构图这件事上耗费的时间远超想象——对齐组件、调整颜色、统一风格、导出高清格式。fireworks-tech-graph 把这一整套流程压缩成了一句自然语言指令。而且它的输出质量，说实话，比大多数工程师手画的图还要专业。

目前项目是 MIT 协议开源，Star 数增长很快。如果你是 AI/Agent 领域的开发者，或者经常需要写技术方案、做架构评审、写技术博客，这个工具值得立刻加入你的工作流。

项目地址：github.com/yizhiyanhua-ai/fireworks-tech-graph