fireworks-tech-graph 项目解析：把技术架构图生成这件事做成一个可复用 Skill
一句话定位
fireworks-tech-graph 是一个面向技术文档、AI/Agent 场景和 UML 制图需求的 Claude Code Skill，核心价值是：你只需要描述系统，它就能较稳定地生成可直接使用的 SVG + PNG 技术图。
基础信息卡片
| 字段 | 内容 |
|---|---|
| 项目名 | fireworks-tech-graph |
| 仓库 | https://github.com/yizhiyanhua-ai/fireworks-tech-graph |
| License | MIT |
| 类型 | Claude Code Skill / 技术图生成 Skill |
| 核心能力 | 将自然语言描述转成 SVG 技术图，并导出高分辨率 PNG |
| 支持范围 | 7 种视觉风格、14 种图类型、完整 UML 支持、AI/Agent 常见图模式 |
| 依赖 | rsvg-convert、Node.js、本地脚本工具链 |
| 核心场景 | 架构图、流程图、数据流图、Agent 图、记忆系统图、时序图、类图、ER 图等 |
说明：Stars、Forks、更新频率等属于动态数据，发布后可能变化，请以 GitHub 页面实时信息为准。
解决什么问题
很多人写技术文档时都会遇到一个很现实的问题：图很重要，但画图本身特别耗时间。
常见痛点通常有这几类：
- 脑子里已经有结构，但真正落到图里很慢；
- Mermaid 适合快速表达，但视觉效果和复杂结构承载能力有限；
- draw.io 这类工具虽然强，但手工拖拽成本高，不适合频繁改稿；
- 当图要服务于 AI、Agent、RAG、Memory 这类新领域时，通用绘图工具缺少现成语义。
fireworks-tech-graph 的价值主要体现在：
- 把“描述系统”直接转成“生成图”；
- 不只是出 SVG，还能直接导出适合博客、文档嵌入的 PNG；
- 对 AI/Agent 领域有明显偏向，很多图不是从零开始凑，而是带着领域结构理解去生成；
- 风格不是单一的，既能做文档风，也能做品牌感更强的展示风。
核心功能（按使用链路）
1) 输入描述层
它最直接的使用方式，不是让你先画框，而是让你先描述系统。
比如你可以直接说：
- “画一张 Mem0 记忆架构图”
- “生成一张多智能体协作图”
- “画一张微服务架构图，蓝图风格”
- “做一张 API integration flow，OpenAI 风格”
也就是说，它把“先想结构、再手动画图”的流程，改成了“先说需求、再自动出图”。
2) 图类型识别层
这个 Skill 不只是简单模板替换，它会先对用户描述做图类型归类。
仓库里明确支持的范围比较完整，包括：
- 架构图
- 数据流图
- 流程图
- Agent 架构图
- Memory 架构图
- 时序图
- 对比矩阵
- 时间线
- 思维导图
- 各类 UML 图
- ER 图
这件事很关键，因为不同图类型，布局规则本来就不一样。比如架构图更强调层级，时序图更强调时间顺序，类图更强调关系和可读性。如果没有这一层分类，生成结果很容易只是“看起来像图”，但并不真正适合那个场景。
3) 风格系统层
这个项目另一个很明显的特点，是它不是只有一种统一画风，而是提供了 7 种视觉风格。
目前仓库里展示出来的风格包括：
- 扁平图标风
- 暗黑极客风
- 工程蓝图风
- Notion 极简风
- 玻璃态卡片风
- Claude 官方风格
- OpenAI 官方风格
这意味着它不是只能拿来画“内部草图”，也可以直接服务不同类型的内容输出。
比如：
- 写博客、写文档，适合极简风或 Claude 风格；
- 做技术分享 PPT，可能更适合玻璃态或蓝图风；
- 做 AI 产品介绍图，OpenAI 风格和 Claude 风格会更容易形成统一视觉感。
4) 语义表达层
很多绘图工具的问题，不是画不出框，而是画出来之后“语义不够强”。
fireworks-tech-graph 在这方面做得更细，它不只是画节点和箭头，而是试图给不同对象赋予更明确的表达规则。
仓库里提到的设计包括：
- 不同类型节点对应不同形状；
- 箭头颜色和虚线样式可以表达读写、异步、循环等不同语义；
- 对 AI/Agent 场景里的常见组件有比较明确的形状词汇；
- 支持产品图标和品牌色体系。
这会直接影响图的阅读效率。
一张技术图真正有价值，不只是“好看”，而是别人一眼能看懂什么是核心组件、什么是数据流、什么是控制流、什么是外部依赖。
5) 输出与验证层
这个 Skill 不是只负责“生成一份 SVG 文本”，它还把输出链路补得比较完整。
仓库里提供了几个比较实用的脚本：
- 生成图
- 从模板生成起始 SVG
- 校验 SVG 语法
- 批量测试不同风格
同时它要求通过 rsvg-convert 导出 PNG，这一点很适合实际发布场景。
因为很多时候，SVG 更适合继续编辑，但真正发到博客、文档、知识库、PPT 里，PNG 往往更省事，也更稳定。
这意味着它更像一个“技术图生产工具链”，而不只是一个临时灵感型脚本。
适合谁
- 经常写技术博客、产品文档、方案文档的人；
- 经常需要画架构图、流程图、Agent 图，但又不想每次都手动画的人；
- 做 AI / Agent / RAG / Memory 相关内容输出的人；
- 希望把“描述需求 → 生成图 → 嵌入文章”这条链路尽量标准化的人。
快速上手（3步）
- 安装 Skill
npx skills add yizhiyanhua-ai/fireworks-tech-graph- 安装导出依赖
macOS：
brew install librsvgUbuntu / Debian：
sudo apt install librsvg2-bin- 直接用自然语言出图
例如：
- “画一张微服务架构图，蓝图风格”
- “生成一个多智能体协作图，玻璃态风格”
- “画一张 Mem0 架构图，输出到 /tmp/diagrams/”
如果只是第一次体验，我会建议先从仓库 README 里已经给出的稳定 prompt 样例开始，这样更容易得到接近展示图的结果。
结论
如果只把 fireworks-tech-graph 看成一个“自动画图工具”，其实会低估它。
它更有意思的地方在于，它把技术图这件事，从一次性手工劳动，变成了一种可以沉淀、复用、批量生成的 Skill 能力。
尤其是在 AI / Agent 相关内容越来越多的背景下，很多图已经不是简单方框箭头，而是带有明显领域结构的表达需求。在这种情况下，一个既能理解图类型、又能提供风格系统、还能直接输出发布级 PNG 的 Skill，价值会比普通绘图模板更高。
如果你经常写架构说明、流程文章、项目分析，或者本身就在搭自己的 Claude Code Skill 体系，那 fireworks-tech-graph 是一个很值得试一下的项目。
