lxiol 博客

—title: 10天破3800星！又一个画图skill开源了
date: 2026-04-27 20:19:27
summary: title: 10天破3800星。又一个画图skill开源了 date: 2026-04-27 20:19:27 summary:
tags:

Claude Code
AI Agent
终端
Git
知识库
开源
macOS
LLM
微信转载
categories:
转载—

原文链接：https://mp.weixin.qq.com/s/TIr_9e6D15zMtX0_w4Hw9A

2026年初，Claude Code Skills生态彻底爆发。

从代码生成到文件操作，再到界面操控，AI 编程助手正在从帮你写代码快速进化成帮你完成一整套工作流。

当多数人兴致勃勃地给Agent加了好些画图技能时，觉得AI画图这事稳了，但用结果来看画图这件事，始终没人真正解决好。

日常工作学习经常要画架构图、流程图、数据流图、时序图……，你脑子里清楚该画什么，可一打开 draw.io 或者 Excalidraw，拖拖拽拽半小时，出来的图还是歪歪扭扭，还要不断的调整，很费时间。

有人会说用 Mermaid，简单图形用起来没任何毛病，对于几十个组件的复杂图，连线就密密麻麻，好不容易搞完自己都不想再看第二眼。

最近一个名为 fireworks-tech-graph 的项目在 GitHub 上悄然爆火。

它的 README 开篇只有一句话，却直击灵魂：“Stop drawing diagrams by hand.”，翻译一下就是，停止手动画图表。

一句话说清楚这是一个 Claude Code Skill，你用自然语言描述系统，它帮你生成生产级的 SVG + PNG 技术图表。

中英文都支持。不用拖拽，不用写语法，说人话就出一个还不错的图。

10 天获取了 3800 Star。

为啥这么多人关注，我觉得答案不在画图这件事本身，它踩中了两个趋势的交汇，Claude Code Skills 生态正在爆发， AI Agent 领域刚好缺一个说句话就能出图的工具。

大部分 AI 生成图表的工具，出来的东西长一个样。

fireworks-tech-graph 直接甩出 7 种视觉风格，而且不是简单换个背景色——每种风格从字体、配色、装饰元素到整体气质，都是独立的。

每种风格都自带官方案例模板，不是空架子。

白底扁平风（Style 1），适合博客和文档，干净利落。官方给的第一个例子就是 Mem0 记忆架构图——Input Layer、Memory Manager、Storage Layer、Output/Retrieval 四层结构，语义箭头标注读写流向，层级关系一目了然。

暗黑终端风（Style 2），霓虹配色加等宽字体，放 GitHub README 里特别对味。官方用 Tool Call 流程来展示这种风格：User query → Retrieve chunks → Generate answer → Knowledge base，整条链路像在跑一条命令，终端感拉满。

蓝图风（Style 3），深蓝底加网格线，工程图纸那味儿一下就出来了。官方选了微服务架构图来做示范——Edge、Application Services、Data+Event Infra、Observability 四层，深蓝底色加青色描边，放在技术方案文档里非常专业。

还有极简的 Notion Clean（Style 4），官方用它画了一张 Agent 记忆类型对比图——Sensory Memory（感官记忆）、Working Memory（工作记忆）、Episodic Memory（情景记忆）、Semantic Memory（语义记忆）、Procedural Memory（程序记忆），五种记忆类型的区别和关系，一张图讲清楚。

毛玻璃质感的 Glassmorphism（Style 5），官方拿来展示多 Agent 协作架构——Mission Control 总控层、Specialist Agents 专家层、Synthesis 综合层，三层结构配上毛玻璃卡片效果，每个 Agent 的职责边界清晰可见。

以及两个”官方品牌风”——Claude Official（Style 6）用的是 Anthropic 标志性的温暖奶油色，官方给了系统架构图的示例：Interface 接口层、Core 核心层、Foundation 基础层；OpenAI Official（Style 7）则是纯白底配品牌绿，用来展示 API 集成流程——Entry 入口层、Model+Tools 模型与工具层、Delivery 交付层。

每个风格都有对应的真实场景案例来支撑，不是一个demo项目。

风格是面子，真正拉开差距的是里子。

它里面有一套 AI/Agent 领域的知识库。

就像招了个懂 AI Agent 架构的画图助手，你只要说名字，它就知道该怎么布局。

你说架构名，它知道该画什么；你说流程名，它知道该展示哪些环节。

比如你提到 RAG，它不需要你解释什么是 Retrieval、什么是 Augmented、什么是 Generation，直接给你画出完整的检索链路——用户查询，文档检索，上下文拼接， LLM 生成回答，每一步的数据流向标得清清楚楚。

另外它还有 Agentic Search 模式，它知道要展示 Query Planning（查询规划）， Multi-step Retrieval（多步检索）， Synthesis（综合合成）， Reflection（反思优化）的完整搜索闭环，而不是简单的一个搜索框。

前面提到的 Mem0 记忆架构、Tool Call 流程、Multi-Agent 协作拓扑……这些当下最热门的 AI Agent 架构模式，它都知道怎么画。

这才是它和 Mermaid、Excalidraw 不一样的地方。

后者是通用画图工具，你得自己把每个节点怎么摆、每条线怎么连都想清楚了才能动手。而 fireworks-tech-graph 在 AI Agent 这个垂直领域，已经帮你把怎么画这件事想了50%。

除了上面提到的 Agent 图，还能画其他 UML 图表。

14 种 UML 图表类型全覆盖，类图、组件图、部署图、时序图、状态机图、ER 图。你让它画一个数据库 ER 图或者用户状态机，它照样能出。

真正的差异化。

Mermaid生态是很好，像GitHub、Notion 原生支持渲染，写几行代码就能出图，太方便。但一旦遇到复杂图表真的难看，15 个以上组件就开始糊成一团，而且风格基本没法自定义。用 Mermaid 画的 Mem0 架构图，四层节点挤在一起，箭头交叉变成蜘蛛网。

Excalidraw强项是手绘风格，配合 excalidraw-diagram-skill 也能让 Claude Code 生成。但大部分时间手绘调性不适合正式文档，你拿去给老板汇报或者放技术博客里，总感觉不专业。

draw.io 功能没的说，最新的加了AI功能，但大部分时间还是手动操作。

而fireworks-tech-graph 的定位很明确。要生产级输出，要风格可选，要 AI Agent 领域有预装知识，要一句话就能出图。

它不是来抢 Mermaid 或 Excalidraw 饭碗的。

而是在自然语言到正式图表这个场景里，目前没有比它更顺手的方案——前提是你已经在用 Claude Code。

说了这么多，怎么装？

想用 fireworks-tech-graph 来生成技术图表，两步就行。

前提是你已经在用 Claude Code。如果还没装，先去装一下。

首先用claude来安装 Skill。

在终端里跑这一行：

1	`claude skills add https://github.com/yizhiyanhua-ai/fireworks-tech-graph`

如果你需要导出 PNG，还得装一个 rsvg-convert。

macOS 用户最简单：

1	`brew install librsvg`

Ubuntu 也一行搞定：

1	`sudo apt-get install librsvg2-bin`

Windows 用户稍微麻烦一点，需要手动安装 MSYS2 再装 librsvg，具体步骤项目 README 里有写。

装完之后，在 Claude Code 里直接说人话就行。

你可以试试这几句：

画一个 Mem0 记忆架构图，用扁平风格。
画一个 RAG 检索流程图，用暗黑终端风格。
生成一个多 Agent 协作图，用毛玻璃风格。
画一个微服务架构图，用蓝图风格。

它会先生成 SVG，验证语法没问题，再通过 rsvg-convert 导出 1920px 宽度的高清 PNG，2x retina，文字线条锐利，直接放进文档或幻灯片里都没问题。

如果你是进阶用户，项目还带了 4 个辅助脚本：

generate-diagram.sh 用来验证 SVG 并导出 PNG。

generate-from-template.py 从模板快速创建起始 SVG。

validate-svg.sh 单独验证语法。

test-all-styles.sh 批量测试所有风格。

可以集成到 CI/CD 里，自动化出图。

一台电脑，两行命令，fireworks-tech-graph 就能跑起来了。

最后说说

fireworks-tech-graph 说明了一件事，开发者对自然语言，正式图表的需求，比很多人想象的要强烈。以前大家忍着手动画图，不是不想自动化，是没有顺手的工具。

fireworks-tech-graph 可能不是最终答案。但它至少证明了这个方向值得做。

项目基于 MIT 协议开放源码。感兴趣的同学，可以去 GitHub 仓库看看源码和文档，里面有完整的示例图和风格指南。

1	`项目地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph`

既然看到这了，欢迎随手点赞、在看、转发，也可以给我个星标⭐，接收最新的文章，我们下期见！

💬 本文评论区已开启，但暂无读者留言。

本文转载自微信公众号，如有侵权请联系删除。