写技术文档的朋友，为了把原理讲清楚经常要画各种图表，比如架构图、流程图、时序图等等。

但有时候脑子里明明想清楚了逻辑，可一打开 Draw.io，麻烦就来了。

一个框一个框地拖，一根线一根线地连，反复对齐位置，半小时就没了。

后来开始用 AI 工具，但生成的图能看是能看，可拿去发文章、做 PPT 总的觉得差点意思。

直到最近，发现一个叫 fireworks-tech-graph 的画图 Skill，正好能解决了我们的烦恼。

只需简单描述一下想要的系统结构，几秒钟就能拿到可直接发布的 SVG 加高清 PNG 图。

比如说「画一张 Mem0 的架构图，扁平图标风」，AI 就会开始干活。

接着会自己识别出这是一张记忆架构图，套上扁平图标风格的配色。

生成的图里，泳道、圆柱体、语义箭头一应具全，最后还顺手导出一张 1920px 的 PNG。

和 Mermaid、draw.io 这些通用画图工具比，它更懂得画各种各样的图表。

内置了 AI 和 Agent 领域常见的几类图，如 RAG 流程、Mem0 记忆层、Multi-Agent 协作、Tool Call 调用链。

对于 UML 这类图表也可以画。支持 类图、组件图、状态机图、序列图等 14 种常见类型。

在视觉上也准备了 8 套风格，其中 7 套是模板驱动，剩下 1 套暗黑奢华风由 AI 手绘完成。

这里面还有意思的是，专门做了一套 Claude 官方风和一套 OpenAI 官方风。

当写 Anthropic 相关的项目用前者，温暖的奶油色背景，看着品牌感很足，又不会太张扬。

介绍 OpenAI 生态的内容，则可以切到纯白简洁的那套，省去自己调色的功夫。

部分风格是统一的，比如 LLM 用双边框的圆角矩形，Agent 用六边形，Vector Store 则是带内环的圆柱。

同时箭头也会带有含义，颜色和虚线样式区分出写入、读取、异步、循环几种流向。

这样统一的风格定义，生成一张图一眼扫过去，谁触发谁、数据往哪走，就能够做到一目了然。

安装就很简单了，由于是 Skill 只需要一条命令即可，任何支持 Skill 的 Agent 工具都能装。

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

但需要安装 PNG 渲染器，cairosvg、rsvg-convert、puppeteer 任选一个。

作者的推荐是，cairosvg 平衡最好，一行 pip 命令就能装，对 CSS 的支持也到位。

pip install cairosvg

而 rsvg-convert 装起来更省事，但可能丢掉部分 CSS 样式，简单图形够用。

追求像素级还原的话，再上 puppeteer，代价是要拖一个一百多 MB 的 Chromium。

写在最后

过去我们要用 Mermaid 或者 Draw.io 这些画图工具拖拖拽拽，画个图得画上半天时间。

现在有了这个画图 Skill 之后，只需要在 Claude Code 或 Codex 这些工具，一句话描述即可完成。

工具不再追求做大做全，把一件小事做顺手，然后安静待在工作流里，反倒更受用。

对天天需要经常画图的我们来说，这种少一次拖拽，就能多出一点做正事的时间。

GitHub 项目地址：

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