一句话定位

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 页面实时信息为准。

解决什么问题

很多人写技术文档时都会遇到一个很现实的问题：图很重要，但画图本身特别耗时间。

常见痛点通常有这几类：

1. 1. 脑子里已经有结构，但真正落到图里很慢；

2. 2. Mermaid 适合快速表达，但视觉效果和复杂结构承载能力有限；

3. 3. draw.io 这类工具虽然强，但手工拖拽成本高，不适合频繁改稿；

4. 4. 当图要服务于 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步）

1. 1. 安装 Skill

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

1. 2. 安装导出依赖

macOS：

brew install librsvg

Ubuntu / Debian：

sudo apt install librsvg2-bin

1. 3. 直接用自然语言出图

例如：

• • “画一张微服务架构图，蓝图风格”

• • “生成一个多智能体协作图，玻璃态风格”

• • “画一张 Mem0 架构图，输出到 /tmp/diagrams/”

如果只是第一次体验，我会建议先从仓库 README 里已经给出的稳定 prompt 样例开始，这样更容易得到接近展示图的结果。

结论

如果只把 fireworks-tech-graph 看成一个“自动画图工具”，其实会低估它。

它更有意思的地方在于，它把技术图这件事，从一次性手工劳动，变成了一种可以沉淀、复用、批量生成的 Skill 能力。

尤其是在 AI / Agent 相关内容越来越多的背景下，很多图已经不是简单方框箭头，而是带有明显领域结构的表达需求。在这种情况下，一个既能理解图类型、又能提供风格系统、还能直接输出发布级 PNG 的 Skill，价值会比普通绘图模板更高。

如果你经常写架构说明、流程文章、项目分析，或者本身就在搭自己的 Claude Code Skill 体系，那 fireworks-tech-graph 是一个很值得试一下的项目。

---

         END      

持续分享 AI、技术、工具和实战干货，关注前沿趋势，也关注真实落地。

如果你想获取这些内容：

1AI 实用技巧

2技术经验总结

3工具与效率方法

4实战案例拆解

欢迎关注公众号 「AI技术小林」，第一时间获取更多高质量内容。

如果想加入微信群，和更多朋友一起交流学习，后台回复 「加群」 即可。