前两天在写一篇技术文章,写到一半需要配一张微服务架构图。我打开了某在线画图工具,对着空白画布发了十分钟的呆,拖了两个方块,连了一条线,觉得丑,删掉,再拖两个方块。
半小时过去了,图还没画完,文章的灵感已经凉透了。
我相信很多搞技术内容的朋友都有过这种体验。你脑子里其实很清楚这张图应该长什么样,但你就是得花一两个小时在画图工具里对齐、配色、调字号。明明内容才是核心,结果时间全花在了排版上。
然后我发现了一个东西,彻底解决了这个问题。
它叫 fireworks-tech-graph,是一个 Claude Code 的 skill。装上之后,你跟 Claude Code 说一句中文,它就能给你吐出一张出版级别的技术图。SVG 矢量源文件加 1920px 高清 PNG,直接能往文章里塞。
我用它画了10张不同类型的图,从架构图到 ER 图到状态机,从白底极简到暗色霓虹到工程蓝图。每张图从下指令到拿到成品 PNG,平均不超过30秒。
30秒。
我之前在画图工具里对齐一个箭头的时间都不止30秒。
怎么装呢,你甚至不需要记任何命令。
打开 Claude Code,直接跟它说「帮我安装 fireworks-tech-graph 这个 skill」,它自己就把活干了。装完之后你说「画一个 xxx 图」,它就自动触发。
如果你喜欢手动装也行,就一句 claude skills install fireworks-tech-graph,完事。
触发词非常宽泛,「画图」「帮我画」「做个架构图」「生成一个流程图」「可视化一下」,随便怎么说都行,它都能识别。
它能画什么?
这个 skill 支持10种有模板的图表类型,外加4种无模板但有规则定义的类型。我挑几个最实用的说一下。
1,架构图。这是用得最多的,画微服务分层、系统组件关系。你告诉它有哪些服务、怎么分层、哪些组件之间有调用关系,它自动帮你排好。我画的那张微服务架构图有5层,右侧还挂了一个观测性旁路,出来的效果跟正经架构文档里的图一模一样。
2,流程图。CI/CD 流水线、审批流、业务决策流。菱形判断节点、圆角矩形处理步骤、失败回环,全都有。你只需要描述「从提交代码到部署生产」中间经过哪些步骤和判断就行。
3,时序图。微服务之间谁先调谁,消息怎么传递。标准的 UML 时序图,有生命线、激活框、alt 分组框。你列出参与者和消息序列,它帮你排好。
4,ER 图。数据库表之间的关系。支持鸦脚记法,PK 自动下划线,FK 标注。你把实体和属性列出来,告诉它哪些是一对多、哪些是多对多,它画出来的东西可以直接放进数据库设计文档。
5,状态机。订单生命周期、工单状态流转这种。每个状态是一个圆角矩形,转换线上标事件名,有初始态的实心圆和终态的同心圆。
6,对比矩阵。横评几个模型、几个方案的时候特别好使。我画了一张 LLM 模型对比表,5个模型7个维度,绿色打勾红色打叉,交替行填充,出来就是一张可以直接发朋友圈的表。
7,时间线。项目路线图、版本规划。甘特图样式,彩色横条加菱形里程碑。
除了这些,还有 Agent 架构图、用例图、数据流图。反正你在技术写作里能用到的图,它基本都覆盖了。
比较骚的是它有7种视觉风格,每种味道完全不一样。
默认的 Flat Icon 是白底彩色,适合博客和文档。Dark Terminal 是暗色霓虹风,发 GitHub 和技术社区特别帅。Blueprint 是工程蓝图风,深蓝色背景加网格线加角标,那种 CAD 图纸的感觉。Notion Clean 是极简白,一根线一个色。Glassmorphism 是毛玻璃卡片,适合产品官网和 Keynote。最近还加了 Claude Official 和 OpenAI Official 两种风格,分别是 Anthropic 和 OpenAI 的品牌调性。
你指定风格的方式就是在 prompt 里加一句「用蓝图风」或者「Style 3」,就这么简单。
我觉得这个 skill 最打动我的点,不是它画得多漂亮,而是它把「画图」这件事的心理门槛降到了零。以前我写文章需要配图的时候,经常会想「算了这里用文字描述一下也行吧」,因为打开画图工具、画完、导出、插入这一套流程太重了。现在不一样了,我在 Claude Code 里写着文章,写到需要配图的地方,直接说一句「帮我画一个 xxx」,30秒后图就在本地了。
这种体验就像是,你本来在用文本编辑器写代码,突然有人给你装了一个实时预览插件。功能上没变,但那个「随时能看到效果」的即时反馈感,会让你更愿意去做这件事。
画图也是一样。当成本足够低的时候,你会发现你开始「想画就画」了。
想试的朋友,打开 Claude Code,说一句「帮我安装 fireworks-tech-graph」,等它装完,再说一句「画一个 xxx 图」。
就这么简单。两句话的事。
下面附一些 demo 图:










