上周写一篇技术方案，又卡在画图这一步。
系统结构我脑子里想得很清楚，一落到图上就麻瓜了，画出来的和我预想的落差忒大。打开画图工具拖方块，拖了四十多分钟，对齐还是没对齐，箭头样式来回改，最后导出来的图自己都不想看第二眼。
后来我开始用画图 Skill 来干这个活，Skill 就是给 Claude Code、Codex 这类 AI 编程工具用的技能包，装上以后说一句话，它直接生成架构图、流程图，样式还挺像那么回事。
这类项目最近在 GitHub 上冒出来不少，我挑了 5 个 Star 高、讨论度也高、我自己实际装过的，一起分享一下。排名不分先后，基本按我用得顺手的程度排。
一、fireworks-tech-graph：一句话出图，风格最多
这个是我目前用得最多的一个。
1.1 万 Star，MIT 协议。它做的事很直接：你用中文或者英文描述一个系统，它生成一张 SVG 技术图，顺手导出 1920px 的高清 PNG。
fireworks-tech-graph 12种风格总览图类型支持 14 种，UML 相关的图基本都支持，流程图、时序图、状态机、ER 图都有。让我觉得实用的是它针对 AI 工具做了专门的优化，RAG 流程、多智能体协作、记忆架构这些图，内置了现成的画法，不用费劲描述每个框该画成什么样。
视觉风格有 12 种，扁平图标、暗黑终端、蓝图、Notion 简洁风、毛玻璃，还有 Claude 和 OpenAI 的官方配色。同一张图想换个风格，重新生成一次就行，不用自己动手改样式。
还有一点我觉得做得比同类好，它生成完会自己校验一遍。检查文字有没有溢出、连线有没有穿过标签，PNG 导出后还会回读文件确认尺寸。别的画图工具大多是图给你就完事了，对不对得自己看，它这边是检查完了再给你。
安装就一行命令的事，Claude Code 和 Codex 里都能用：
npx skills add yizhiyanhua-ai/fireworks-tech-graph
PNG 导出需要一个底层依赖，cairosvg、librsvg、puppeteer 三个里面装一个就行，看你本机环境哪个方便。
开源地址：
https://github.com/yizhiyanhua-ai/fireworks-tech-graph
二、baoyu-skills：宝玉的技能集，画图相关的就有好几个
这个仓库 2.5 万 Star，作者宝玉，经常看技术博客的应该都熟。
它是一整套技能集，里面 20 多个技能，光画图相关的就有好几个。比如 baoyu-diagram 画技术图，baoyu-infographic 做信息图，还有做封面图的 baoyu-cover-image、给文章配插图的 baoyu-article-illustrator。经常写公众号、写博客的话，这一套基本够用了。
官方示例我主要用的是 baoyu-diagram，它输出的是单个自包含的 SVG 文件，样式和字体都内嵌在文件里，发给别人打开不会跑版，还自动适配深色模式。
图类型有 9 类，架构图、流程图、时序图、思维导图、时间线、状态机这些都有。配色是语义化的，前端给它青色，后端绿色，数据库紫色，云服务琥珀色，安全相关的用玫红色。颜色不用我们操心，它按组件类型自己就配好了。
用法也简单，说一句画个图加上主题就行：
/baoyu-diagram "JWT 认证流程是怎么工作的"
官方仓库里有个提醒：按需安装，别一口气全装上，技能装多了，会增加 AI 每次运行的上下文开销。
开源地址：
https://github.com/JimLiu/baoyu-skills
三、architecture-diagram-generator：解决图怎么发给别人看
Cocoon-AI 开源的，7 千多 Star。
它只画架构图这一种图，但解决了一个很具体的麻烦：图画完之后怎么发给别人。
导出 PNG 发微信会糊，发 draw.io 文件对方还得装软件。它的办法是生成一个独立的 HTML 文件，SVG 嵌在文件里面，双击就能用浏览器打开，丢群里、发邮件都没问题。文件里还内置了导出按钮，复制 PNG 到剪贴板、下载 PNG、下载 PDF，点一下就完事。
官方示例默认是深色主题，字体用的 JetBrains Mono，出来的图自带一点专业感，不用自己再去调配色。配色也是固定语义的，前端青、后端绿、数据库紫，跟上面 baoyu 那套是一个思路。
除了 Claude Code，网页版 Claude 也能用，把仓库里的 zip 包上传到 Skills 里面就行。
顺带说一句，这个项目后来重构了一版，改名叫 Archify，加了浅色主题和更多的导出格式。想看新版的直接去找 Archify，这个老版本也还能用。
开源地址：
https://github.com/Cocoon-AI/architecture-diagram-generator
四、excalidraw-diagram-generator：画完还能接着手动改
这个 Skill 收在 GitHub 官方的 awesome-copilot 仓库里，仓库本身有 3.8 万 Star。
前面几个都是 AI 生成完就基本定稿了，想微调得重新描述一遍。这个不一样，它生成的是 .excalidraw 文件。
.excalidraw 是开源白板 Excalidraw 的原生格式，这个白板自己在 GitHub 上就有 13 万 Star。生成的文件拖进 excalidraw.com 里面，每个方块、每根箭头都能继续手动编辑。改颜色、挪位置、删节点、加一条分支流程，都可以。
我自己画图很少有一次就满意的，一般都是先要个大概，再慢慢调。AI 把主流程画对了，你可能还想把数据库挪个位置，给某个模块换个颜色，或者删掉一根多余的线。输出 PNG 的话你只能重新生成，输出 .excalidraw 你接着改就行。
excalidraw-diagram-generator设计支持的图类型有 9 种，流程图、架构图、类图、时序图、ER 图、泳道图都在。UML 的关系线按规范做了细分，继承、实现、关联、依赖、聚合、组合，画类图的时候特别规整。画云架构还能调 AWS、GCP、Azure 的官方图标库，不用自己找素材。
安装命令：
npx skills add github/awesome-copilot --skill excalidraw-diagram-generator
开源地址：
https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator
五、canvas-design：Anthropic 官方出品，做海报和视觉设计
最后这个来自 Anthropic 官方的 Skills 仓库。这个仓库的 Star 数很夸张，17 万多，算是 Skill 这个格式的源头了。
canvas-design 跟前面几个不是一条路线，前面几个画的是技术图，它做的是海报、插画、视觉设计这类图，输出 PNG 或者 PDF。
它干活的方式跟别的不太一样，不是拿到需求就直接开画。它会先写一份设计哲学出来，用 Markdown 把这次设计的风格方向定下来，色彩怎么用、空间怎么分、字体什么气质，然后再照着这份哲学去画图。这样出来的东西风格是统一的，不会这里一个样那里一个样。
canvas-design设计它的文档里还专门写了要求，最终作品要看起来像是花了大量时间打磨出来的，而且必须原创，不能去模仿现有艺术家的风格，免得有版权问题。官方出品，这种细节确实想得比较全。
做公众号封面、活动海报这类东西的时候，我觉得可以考虑用它，比普通的 AI 生图稳定，尤其是排版，文字的位置不会乱跑。
安装命令：
npx skills add anthropics/skills@canvas-design开源地址：
https://github.com/anthropics/skills
最后说下我怎么选
五个用下来，我自己习惯按场景分。
平时画技术架构图、流程图，我优先开 fireworks-tech-graph，风格多，出图快，还自己校验一遍。写完文章要配信息图、做封面图的时候，baoyu 那一套更顺手，自媒体的场景它覆盖得比较全。
图如果是发给不懂技术的人看，比如给老板汇报方案，我会用 architecture-diagram-generator，一个 HTML 文件发过去，谁都能打开，不用担心对方没装软件。要是心里清楚这图后面肯定要反复改，那就直接上 excalidraw-diagram-generator，一开始就生成能编辑的格式，省得来回重新生成。做海报和视觉设计，用 canvas-design。
另外有件事要提前说清楚,这些 Skill 大多跑在 Claude Code、Codex 这类 AI 工具里，得先有能用的环境才行。还有，AI 画图不是万能的，复杂系统的图生成完，我会自己再过一遍，组件对不对、连线对不对，确认没问题再往正式文档里放。
你手里有好用的画图 Skill，也欢迎分享给我。
