一句话生成技术图，这 3 个 GitHub Skill 太狠了

技术人画图，终于不用再拖方块了

事情是这样的。

你应该也遇到过这种场景。

方案评审前一天，老板突然在群里问：

★那个系统架构图，有没有一版能发客户的？

你打开 draw.io，先拖一个网关，再拖几个服务，再补数据库、缓存、消息队列。

画到一半发现线乱了。

调对齐，调颜色，调箭头，调字体。

最后导出 PNG，发到微信里，对方回一句：

★有点糊，能不能再清楚一点？

这就很要命了。

写代码的时候，我们能接受复杂。

但画一张技术图，本质上不应该复杂到这个程度。

真正的问题不是技术人不会画图。

而是很多画图工具默认假设你愿意花半小时拖方块、对齐、调样式、导出、再返工。

现在 GitHub 上已经有一批画图 Skill，把这个流程改掉了。

你不用先打开画布，也不用手动摆节点。

你只要用一句话描述：

画一张 RAG pipeline 架构图，包含用户问题、Query Rewrite、向量检索、Rerank、Prompt 组装和 LLM 生成，用暗黑终端风格。

它就能生成一张能放进技术文章、PPT、方案文档里的图。

我整理了 3 个最近很值得收藏的 GitHub 画图 Skill。

它们解决的不是同一个问题。

一个负责快速出图，一个负责架构图分享，一个负责生成之后还能手动改。

第一类，写文章最怕图丑，它负责把样式也一起搞定

第一个是 fireworks-tech-graph。

开源地址：

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

截至 2026-05-22，这个项目已经接近 7k Star。

它的定位很直接：

用自然语言生成可发布的 SVG 和 PNG 技术图。

这句话听起来像很多 AI 画图工具都能做。

但它真正适合技术人的地方，不是“能画”，而是“知道技术图长什么样”。

它支持一批常见技术图类型，UML、流程图、架构图、AI/Agent 工作流这些都覆盖到了。

尤其是现在写 AI 工程文章很常见的几类图：

• RAG pipeline
• 多 Agent 协作流程
• Tool Calling 调用链路
• 数据处理和模型生成流程
• UML 类图、时序图、组件图

这些图如果手画，最烦的不是节点，而是风格。

同样一张 RAG 图，放在公众号里、PPT 里、方案文档里，感觉完全不一样。

fireworks-tech-graph 提供了多种视觉风格，比如暗黑终端风、科技线稿风、手绘风。

也就是说，你可以让同一套结构换不同外观。

比如你可以这样描述：

画一张多 Agent 协作流程图。

包含 Planner、Research Agent、Code Agent、Review Agent、Memory、Tool Registry。

风格使用 dark terminal，输出 SVG 和 PNG。

如果想换成更适合公众号的白底风格，就改一句：

使用 clean technical line art 风格重新生成。

不用重新拖图。

不用改 CSS。

不用挨个调颜色。

安装也很简单：

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

Mac 上如果要把 SVG 转成 PNG，还需要装一下底层依赖：

brew install librsvg

这个工具最适合的场景是：

• 写技术公众号，需要一张能直接发布的流程图
• 写 AI/Agent/RAG 文章，需要快速画出 pipeline
• 做技术分享，需要几张风格统一的配图
• 想要 SVG 保持清晰，同时也要 PNG 方便粘贴

它的边界也要说清楚。

fireworks-tech-graph 更像“生成即定稿”的工具。

如果你只是想改一个节点的位置，通常不是在画布里拖一下，而是改 prompt 重新生成。

所以它适合快速出图，不适合精修到像设计稿一样逐像素调整。

第二类，架构图不是画完就完了，还得能发出去

第二个是 Cocoon-AI 的 architecture-diagram-generator。

开源地址：

https://github.com/Cocoon-AI/architecture-diagram-generator

截至 2026-05-22，这个项目大概 5.2k Star。

它解决的是另一个很实际的问题：

架构图画完之后，怎么让别人无障碍打开。

很多技术团队都踩过这个坑。

你导出 PNG，清晰度可能不够。

你发 draw.io 文件，对方可能没装工具。

你发 PDF，图稍微复杂一点，缩放和查看体验又很一般。

architecture-diagram-generator 的输出很有意思。

它直接生成一个独立 HTML 文件，里面嵌 SVG。

双击就能在浏览器里打开。

不需要装软件，不需要登录平台，不需要解释“你用什么打开”。

它默认是深色主题，技术感比较强，字体用 JetBrains Mono，组件也会做语义化配色。

比如前端、后端、数据库、云服务、安全组件，会用不同颜色区分。

这类设计细节，对技术汇报很有用。

因为老板或者客户不一定关心你的每一条箭头，但他会第一眼判断：

★这张图是不是专业？

它的使用方式也比较贴近真实工作流。

你可以先让 AI 分析代码仓库，输出系统结构：

Analyze this codebase and describe the architecture.
Include all major components, how they connect,
what technologies they use, and any cloud services or integrations.
Format as a list for an architecture diagram.

再把结构描述丢给 Claude：

Use your architecture diagram skill to create an architecture diagram from this description:

- React frontend
- Node.js API
- PostgreSQL database
- Redis cache
- Kafka event bus
- Kubernetes deployment

生成结果就是一个可以直接打开的 HTML。

它还内置了 Copy、PNG、PDF 等导出能力。

这点很实用。

因为架构图的最终去向往往不是代码仓库，而是飞书、PPT、邮件、方案文档。

这个工具最适合的场景是：

• 给老板或客户做系统方案汇报
• 从代码仓库梳理一张系统架构图
• 想发一个别人双击就能看的图
• 希望架构图默认就有比较好的深色主题

它的边界也很明确。

它主攻架构图，不是全类型图表生成器。

如果你要画类图、时序图、ER 图，它不是第一选择。

如果你要的是“系统方案讲清楚，并且方便分享”，它很合适。

第三类，AI 画完 90%，剩下 10% 必须能手动改

第三个是 Excalidraw Diagram Generator。

它在 GitHub 官方 awesome-copilot 仓库里：

https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator

这个工具最关键的点只有一个：

它生成的是 .excalidraw 文件。

也就是说，AI 不是只给你一张图片。

它给你一份可以拖进 Excalidraw 继续编辑的 JSON。

这点非常重要。

因为真实工作里的图，很少一次生成就完全满意。

AI 可能把主流程画对了，但你还想：

• 把网关挪到最左边
• 给数据库换个颜色
• 删除一个不该出现的箭头
• 把两个服务合并成一个模块
• 加一个“灰度发布”旁路流程

如果输出的是 PNG，你只能重来。

如果输出的是 SVG，你改起来也不一定舒服。

但如果输出的是 .excalidraw，你直接打开 excalidraw.com，所有元素都能继续拖动和编辑。

它支持的图表类型也比较全：

它对 UML 关系线也做了更细的区分。

继承、实现、关联、依赖、聚合、组合，这几种线型可以按规范生成。

这在画类图时很有价值。

很多人类图画得不专业，不是类名写错，而是关系线乱用。

比如继承和组合，本来表达的是完全不同的建模语义。

图上如果都画成一根普通箭头，看的人就会误解设计意图。

Excalidraw Diagram Generator 适合这种提示词：

Create an Excalidraw class diagram for an order system.

Include Order, OrderItem, Product, Payment, Coupon.

Use composition between Order and OrderItem.
Use association between OrderItem and Product.
Use dependency between OrderService and PaymentGateway.

生成后，你再手动调整布局。

这就比较接近真实工程画图流程：

AI 先搭骨架，人再精修细节。

它最适合的场景是：

• 图需要和同事一起改
• 你不确定第一版结构是否最终定稿
• 需要画 UML、ER、泳道图这类关系较细的图
• 你想保留可编辑源文件，而不是只要一张图片

它的边界也很清楚。

Excalidraw 默认是手绘白板风。

如果你追求深色科技风、终端风、发布级海报感，它不是最省事的工具。

但如果你要的是“生成后还能改”，它的工作流最舒服。

三个工具怎么选，别搞反了

这三个 Skill 不是互相替代关系。

它们卡住的是画图流程里的三个不同环节。

我自己的判断很简单。

如果你写文章，要的是一张马上能发布的图，优先用 fireworks-tech-graph。

如果你做方案，要的是一张别人打开就能看的架构图，优先用 architecture-diagram-generator。

如果你知道这张图后面还要被反复改，优先用 Excalidraw Diagram Generator。

不要反过来。

你用 Excalidraw 去追求暗黑终端风，会调得很累。

你用 fireworks-tech-graph 去做多人协作精修，也会反复改 prompt。

你用 architecture-diagram-generator 去画复杂 UML，工具定位就不对。

工程上怎么落地

如果只是收藏链接，很快就会忘。

更实用的做法，是把画图也变成一个固定工作流。

我建议技术团队可以准备三类 prompt。

第一类，文章配图 prompt：

请生成一张技术文章配图。

主题：多轮 RAG 质量下降的排查链路
节点：用户问题、Query Rewrite、Hybrid Search、Rerank、Memory、Prompt、LLM、Eval
要求：突出数据流向，风格统一，适合放在公众号文章中
输出：SVG 和 PNG

第二类，架构汇报 prompt：

请根据下面的系统描述生成架构图。

要求：
- 展示前端、网关、业务服务、缓存、数据库、消息队列、外部系统
- 用不同颜色区分组件类型
- 输出为单个 HTML 文件
- 图中箭头标注关键调用关系

第三类，可编辑草图 prompt：

请生成一份 Excalidraw 架构草图。

要求：
- 只画核心组件，不超过 10 个节点
- 保留足够间距，方便后续手动编辑
- 箭头标注同步调用、异步消息、数据写入
- 输出 .excalidraw 文件

真正要注意的是，prompt 里不要只说“画一个架构图”。

你至少要交代四件事：

• 画什么对象
• 节点之间什么关系
• 输出给谁看
• 最终要什么格式

这四件事说清楚，AI 画图的可用率会高很多。

最后说一句

回到开头那个画架构图的场景。

以前我们卡住的地方，是工具要求人先学会画布操作。

现在这批 GitHub 画图 Skill，把入口换成了自然语言。

你不用先想方块怎么摆。

你先把系统讲清楚。

这才是技术人真正需要的画图方式。

画图不是为了证明你会拖控件。

画图是为了把复杂系统讲明白。

而这件事，终于可以从一句话开始了。