Fireworks-Tech-Graph：说句话就生成高清架构图的开源利器

技术文档写到最后一步——画架构图，然后情绪断崖。

Mermaid：学语法，写 DSL，调半天对不齐。
draw.io：拖半小时，想换个配色方案，全部推倒重来。
截图粘贴：文档一放大，全是锯齿。最后硬着头皮交出去的图，连自己回头看都觉得丢人。

问题不在工具本身，在于画图这件事的交互方式就是错的——脑子里已经有了清晰的架构，为什么还得手动一个一个拖节点？

画图这件事到底有多烦

写一篇技术博客，正文 30 分钟搞定，配一张架构图 40 分钟起步。画完还不满意，调颜色、对齐、改字号、导出、再调……时间全耗在跟工具较劲上。

更痛的是 风格一致性——公司技术文档十个人十种配色，PPT 一页一个画风。有没有一种方式，我只说“画一个 RAG 流程图，暗色风格”，图就直接出来？

有。今天介绍的开源项目，就是干这件事的。

fireworks-tech-graph：说句话，图就出来了

这是一个 Claude Code Skill ，装好后在 Claude Code 里用自然语言描述你要画的东西，它自动生成：

• SVG ：矢量图，放大不糊，可以用 Figma / Illustrator 继续编辑
• PNG ：1920px 宽，直接扔文档和 PPT

定位很明确：用说话代替拖拽，用 AI 理解意图代替 DSL 语法。

7 种视觉风格一句话切换，14 种 UML 图类型全覆盖，还有一批 AI / Agent 领域的架构模板开箱即用。

7 种视觉风格，不只是换个颜色

每种风格有独立的色板、字体、排版规则和边距系统。不是简单的滤镜切换，而是在设计系统层面做了差异化。

Style 1 — Flat Icon

白底彩色图标，博客文章和幻灯片首选。耐看，不抢文字的风头。

Style 2 — Dark Terminal

黑底霓虹色，等宽字体。放 GitHub README 里有种“这系统真在跑”的压迫感。写技术文章配图选这个，逼格直接上一档。

Style 3 — Blueprint

深蓝底 + 网格线 + 青色描边，工程蓝图感。画微服务部署图、基础设施拓扑特别对味。右下角还有标题栏，像正经出图。

Style 4 — Notion Clean

极简白底，只有一种强调色。贴进 Notion、Confluence、飞书文档零违和感。内部文档首选。

Style 5 — Glassmorphism

暗色渐变底 + 毛玻璃卡片。画多 Agent 协作这类“很多模块并列”的图最合适——每个模块是独立的磨砂卡片，边界清晰还好看。拿去做产品发布会 PPT 不违和。

Style 6 — Claude Official

米白底（#f8f6f3），Anthropic 品牌色系。画 Claude 相关系统架构时风格统一，不会看着像“别人家的图”。

Style 7 — OpenAI Official

纯白底 + 绿色强调箭头。画 GPT API 集成、模型调用链路时用这个，视觉上跟 OpenAI 官方文档保持一致。

AI 架构图内置模板 + 14 种 UML

AI / Agent 领域：不用从零描述

这是这个项目最有价值的部分。你说“画一个 RAG 流程图”，它不是瞎猜节点——项目里已经把每种 AI 架构的标准结构、节点关系、数据流向都写死了：

内置模板	标准节点结构
RAG Pipeline	查询 → 嵌入 → 向量检索 → 召回 → LLM → 返回
Agentic RAG	RAG + Agent 循环 + 工具调用
Agentic Search	规划器 → 并行检索 / 计算 / 代码 → 合成器
Mem0 内存层	输入 → 内存管理器 → 向量库 + 图数据库 → 上下文
Multi-Agent	协调者 → N 个子 Agent → 聚合 → 输出
Tool Call	LLM → 工具选择 → 执行 → 解析 → 回 LLM（循环）

UML：14 种图类型全覆盖

类图、组件图、部署图、时序图、活动图、状态机图……标准 UML 该有的都有。

图形语义：不只好看，还能自解释

每种形状有固定含义——圆角双边框代表 LLM，六边形代表 Agent，圆柱体是向量库，菱形是决策节点。实线是主数据流，虚线是写入，弯曲箭头是反馈。图本身就在传递架构信息，不需要旁边再写一段解释文字。

装上就能用

装依赖（SVG 转 PNG）：

# macOS
brew install librsvg

# Ubuntu/Debian
sudo apt install librsvg2-bin

安装 Skill：

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

然后在 Claude Code 里说：

画一张 Agentic RAG 架构图，Agent 核心层包含 Planner 和 Tool Selector，Memory 层有 VectorDB 和 GraphDB，用 Dark Terminal 风格

输出两个文件：SVG（继续编辑用）和 1920px PNG（直接放文档）。更新用 --force：

npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

值不值得装

三类人闭眼装：

1. 经常写技术博客的人——以前画图比写文章还久，现在一句话搞定
2. 做 AI 应用开发的人——RAG、Agent、记忆架构这些图直接出，不用手搭结构
3. 对图表风格有追求的人——7 种设计系统级风格比自己配色好看十倍

两种情况不需要：

• Markdown 里偶尔插个简单流程图 → Mermaid 够了
• 需要像素级精确控制每个元素位置 → draw.io 更合适

这不是“替代 draw.io”的工具，是“让 90% 的画图需求不再需要打开 draw.io”的工具。

MIT 协议开源：https://github.com/yizhiyanhua-ai/fireworks-tech-graph