10天破3800星！Claude Code Skill 一句话生成7种风格技术图表
fireworks-tech-graph：一个让AI帮你画图的Claude Code Skill，支持RAG、Mem0、多Agent等架构图，Mermaid画不出来的它能补位
背景
2026年初，Claude Code Skills 生态彻底爆发。
从代码生成到文件操作，再到界面操控，AI 编程助手正在从帮你写代码快速进化成帮你完成一整套工作流。
当多数人兴致勃勃地给 Agent 加了画图技能时，发现 AI 画图这件事始终没人真正解决好。
日常工作学习经常要画架构图、流程图、数据流图、时序图……你脑子里清楚该画什么，可一打开 draw.io 或者 Excalidraw，拖拖拽拽半小时，出来的图还是歪歪扭扭。
有人会说用 Mermaid，简单图形没问题，但对于几十个组件的复杂图，连线密密麻麻，好不容易搞完自己都不想再看第二眼。
最近一个名为 fireworks-tech-graph 的项目在 GitHub 上悄然爆火，10 天获取了 3800+ Star。
README 开篇只有一句话，却直击灵魂："Stop drawing diagrams by hand."
这是一个 Claude Code Skill——你用自然语言描述系统，它帮你生成生产级的 SVG + PNG 技术图表。中英文都支持，不用拖拽，不用写语法，说人话就出一个还不错的图。
7种视觉风格，每种都有真实案例
大部分 AI 生成图表的工具，出来的东西长一个样。fireworks-tech-graph 直接甩出 7 种视觉风格，而且不是简单换个背景色——每种风格从字体、配色、装饰元素到整体气质，都是独立的。
| 风格 | 特点 | 适用场景 |
|---|---|---|
| 白底扁平风（Style 1） | 干净利落 | 博客、文档 |
| 暗黑终端风（Style 2） | 霓虹配色 + 等宽字体 | GitHub README |
| 蓝图风（Style 3） | 深蓝底 + 网格线 | 技术方案文档 |
| Notion Clean（Style 4） | 极简风格 | Notion、Wiki |
| 毛玻璃质感（Style 5） | Glassmorphism 效果 | 演示、PPT |
| Claude Official（Style 6） | Anthropic 温暖奶油色 | 官方文档 |
| OpenAI Official（Style 7） | 纯白底 + 品牌绿 | API 文档 |
每种风格都有对应的真实场景案例来支撑，不是 demo 空架子：
- 扁平风 → Mem0 记忆架构图（Input Layer、Memory Manager、Storage Layer、Output 四层）
- 暗黑终端风 → Tool Call 流程（User query → Retrieve chunks → Generate answer）
- 蓝图风 → 微服务架构图（Edge、Application Services、Data+Event Infra、Observability）
- 毛玻璃风格 → 多 Agent 协作架构（Mission Control 总控层、Specialist Agents 专家层、Synthesis 综合层）
AI/Agent 领域的知识库——核心差异化
风格是面子，真正拉开差距的是里子。
它里面有一套 AI/Agent 领域的知识库，就像招了一个懂 AI Agent 架构的画图助手：
- 你说 RAG，它不需要你解释什么是 Retrieval、什么是 Augmented、什么是 Generation，直接画出完整的检索链路
- 你说 Multi-Agent，它知道要展示 Query Planning、Multi-step Retrieval、Synthesis、Reflection 的完整搜索闭环
- Mem0 记忆架构、Tool Call 流程、Multi-Agent 协作拓扑……这些当下最热门的架构，它都知道怎么画
这才是它和 Mermaid、Excalidraw 最不一样的地方。
后者是通用画图工具，你得自己把每个节点怎么摆、每条线怎么连都想清楚才能动手。而 fireworks-tech-graph 在 AI Agent 这个垂直领域，已经帮你把怎么画这件事想了 50%。
和传统方案对比
| 工具 | 优点 | 缺点 |
|---|---|---|
| Mermaid | GitHub/Notion 原生支持，写代码出图 | 复杂图表难看，风格基本没法自定义 |
| Excalidraw | 手绘风格，可配合 Claude Code 生成 | 大部分时间不适合正式文档 |
| draw.io | 功能最全，有 AI 功能 | 仍然需要大量手动操作 |
| fireworks-tech-graph | 自然语言出图，7种风格，Agent领域知识 | 需要 Claude Code，依赖 rsvg-convert |
fireworks-tech-graph 的定位很明确：自然语言到正式图表这个场景里，目前没有比它更顺手的方案，前提是你已经在用 Claude Code。
快速上手
前提：需要已安装 Claude Code。
第一步：安装 Skill
claude skills add https://github.com/yizhiyanhua-ai/fireworks-tech-graph
第二步：安装 rsvg-convert（导出 PNG 用）
macOS：
brew install librsvg
Ubuntu：
sudo apt-get install librsvg2-bin
Windows 用户需要手动安装 MSYS2 再装 librsvg，具体步骤见项目 README。
然后，直接说人话就行：
画一个 Mem0 记忆架构图，用扁平风格。
画一个 RAG 检索流程图，用暗黑终端风格。
生成一个多 Agent 协作图，用毛玻璃风格。
画一个微服务架构图，用蓝图风格。
它会先生成 SVG，验证语法，再通过 rsvg-convert 导出 1920px 宽度的高清 PNG（2x retina），文字线条锐利，直接放进文档或幻灯片。
进阶用户
项目还带了 4 个辅助脚本：
generate-diagram.sh— 验证 SVG 并导出 PNGgenerate-from-template.py— 从模板快速创建起始 SVGvalidate-svg.sh— 单独验证语法test-all-styles.sh— 批量测试所有风格
可以集成到 CI/CD，实现自动化出图。
总结
fireworks-tech-graph 说明了一件事：开发者对自然语言 → 正式图表的需求，比很多人想象的要强烈。 以前大家忍着手动画图，不是不想自动化，是没有顺手的工具。
fireworks-tech-graph 可能不是最终答案，但它至少证明了这个方向值得做。项目基于 MIT 协议开源。
项目地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph