7种风格一键出图：fireworks-tech-graph让技术图表告别手动拖拽

2026 年初，Claude Code Skills 生态彻底爆发。从代码生成到文件操作，再到界面操控，AI 编程助手正在从帮你写代码快速进化成帮你完成一整套工作流。

但画图这件事始终没人真正解决好。日常工作经常要画架构图、流程图、数据流图、时序图，你脑子里清楚该画什么，可一打开 draw.io 或者 Excalidraw，拖拖拽拽半小时，出来的图还是歪歪扭扭。有人说用 Mermaid，简单图形没问题，几十个组件的复杂图连线就密密麻麻。

最近一个名为 fireworks-tech-graph 的项目在 GitHub 上爆火。它的 README 开篇只有一句话，却直击灵魂："Stop drawing diagrams by hand."

一句话说清楚：这是一个 Claude Code Skill，你用自然语言描述系统，它帮你生成生产级的 SVG + PNG 技术图表。中英文都支持，不用拖拽，不用写语法，说人话就出一个还不错的图。10 天获取了 3800 Star。

7 种视觉风格

大部分 AI 生成图表的工具，出来的东西长一个样。fireworks-tech-graph 直接甩出 7 种视觉风格，而且不是简单换个背景色——每种风格从字体、配色、装饰元素到整体气质都是独立的，每种都自带官方案例模板。

• 白底扁平风（Style 1）：适合博客和文档，干净利落。官方案例是 Mem0 记忆架构图
• 暗黑终端风（Style 2）：霓虹配色加等宽字体，放 GitHub README 里特别对味。官方案例是 Tool Call 流程
• 蓝图风（Style 3）：深蓝底加网格线，工程图纸那味儿。官方案例是微服务架构图
• Notion Clean（Style 4）：极简风格，官方案例是 Agent 记忆类型对比图
• Glassmorphism（Style 5）：毛玻璃质感，官方案例是多 Agent 协作架构
• Claude Official（Style 6）：Anthropic 标志性的温暖奶油色，官方案例是系统架构图
• OpenAI Official（Style 7）：纯白底配品牌绿，官方案例是 API 集成流程

AI/Agent 领域知识库

风格是面子，真正拉开差距的是里子。它里面有一套 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 这个垂直领域已经帮你把怎么画这件事想了一半。

除了 Agent 图，还能画其他 UML 图表，14 种 UML 图表类型全覆盖：类图、组件图、部署图、时序图、状态机图、ER 图等。

与同类工具的差异

Mermaid 生态很好，GitHub、Notion 原生支持渲染，写几行代码就能出图，但一旦遇到复杂图表真的难看，15 个以上组件就开始糊成一团，而且风格基本没法自定义。Excalidraw 强项是手绘风格，但大部分时间手绘调性不适合正式文档，拿去给老板汇报或者放技术博客里总感觉不专业。draw.io 功能没的说，但大部分时间还是手动操作。

fireworks-tech-graph 的定位很明确：要生产级输出，要风格可选，要 AI Agent 领域有预装知识，要一句话就能出图。它不是来抢 Mermaid 或 Excalidraw 饭碗的，而是在自然语言到正式图表这个场景里，目前没有比它更顺手的方案——前提是你已经在用 Claude Code。

安装与使用

前提是你已经在用 Claude Code。首先用 claude 来安装 Skill：

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

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

macOS 用户：

brew install librsvg

Ubuntu 用户：

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 里自动化出图。

项目基于 MIT 协议开放源码。

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