Law的数字世界

一、fireworks-tech-graph 是什么？#

你描述系统，它出图。 就这么简单。

不用学语法，不用拖拽，说一句”帮我画个 RAG 系统”，直接给你一张 1920px 高清 PNG + SVG 矢量图。

它是一个 Claude Code Skill——给 Claude Code 装个插件，装完直接用。

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

二、它到底解决了什么问题？#

画架构图这件事，你一定遇到过这几个问题：

问题一：工具太难用。 draw.io 要拖拽对齐，手动调箭头，搞半天还不好看。

问题二：Mermaid 要学语法。 文字版架构图虽然能嵌 Markdown，但 graph TD A-->B 这种语法写起来费劲，复杂图更是噩梦。

问题三：Excalidraw 太随意。 草图风格适合头脑风暴，但你总不能把一个手绘风的图放进正式技术文档里。

问题四：效果丑。 就算你花了2小时画出来，看起来还是像2000年代的PPT。

fireworks-tech-graph 的答案是：把所有这些步骤全省掉，你只负责说，它负责出图。

重点是什么？

它不是让 AI 帮你”辅助”画图——而是 AI 全权生成，你只需要审图。这个差距，就是从工具变成同事的区别。

三、跟其他工具比，能打吗？#

现成工具那么多，凭什么用这个？

来看一张对比表：

• 简单流程图嵌 README？Mermaid 够用。
• 团队协作白板？Excalidraw 没得说。
• 要好看、专业、能直接放文档的架构图？fireworks-tech-graph 是目前最省力的方案。

它自带 7 种视觉风格，挑自己需要的用：

1. Flat Icon — 扁平化，干净清爽
2. Dark Terminal — 深色背景，霓虹高亮，程序员最爱
3. Blueprint — 蓝图风，工程感十足
4. Notion Clean — 极简白，像 Notion 文档一样清雅
5. Glassmorphism — 玻璃拟态，科技感满满
6. Claude Official — Claude 官方品牌风格
7. OpenAI Official — OpenAI 官方品牌风格

图类型支持 14 种，经典 UML 全覆盖，还有 AI 专属图：RAG Pipeline、Agentic Search、Mem0 记忆架构、Multi-Agent 系统、Tool Call 流……

AI 专属图类型才是杀手锏。 它内置了对 AI 系统架构的理解——向量数据库、Agent、工具调用，这些直接反映在图形里，不用你手动解释。

泼一盆冷水

它生成 SVG 是零依赖的，但导出 PNG 需要额外安装 rsvg-convert。macOS 一行搞定，Windows 多一步——下面安装章节详细说。

四、实战：用真实项目演示这套组合拳#

在开始之前，先把环境对齐一下。我用的是这套配置：

光说不练假把式。我就用一个真实项目来演示。

项目：Memoh——一个 AI 驱动的团队通信平台，后端用 Go 写的，连接了 微信、飞书等 9 个渠道，支持 LLM Agent、向量记忆、MCP 工具调用、容器沙盒。

系统挺复杂的，正好适合展示。

第一步：用 oh-my-mermaid 扫描代码，自动生成结构

在项目根目录执行 /omm-scan，oh-my-mermaid 会自动读代码、分析架构，输出 5 个维度的 Mermaid 文本图。

以「整体架构」为例，输出结果长这样：

oh-my-mermaid 输出：Memoh 整体架构（Mermaid 原始）

graph LR web-app["Web App"] -->|"HTTP/WS"| api-server["API Server"] desktop-app["Desktop App"] -->|"HTTP/WS"| api-server browser-app["Browser Extension"] -->|"HTTP/WS"| api-server api-server -->|"process messages"| agent-engine["Agent Engine"] api-server -->|"route inbound"| channel-system["Channel System"] api-server -->|"schedule tasks"| scheduler["Scheduler"] api-server -->|"read/write"| data-layer["Data Layer"] channel-system -->|"receive/send"| external-channels["External Channels"] agent-engine -->|"call tools"| agent-tools["Agent Tools"] agent-engine -->|"LLM inference"| providers["LLM Providers"] agent-engine -->|"vector search"| memory-system["Memory System"] agent-engine -->|"run containers"| workspace-system["Workspace System"] agent-tools -->|"MCP protocol"| mcp-system["MCP System"]

这就是 Mermaid 原始输出——结构清晰、逻辑准确，但视觉上就是一堆线框，放进文档里不够专业。

oh-my-mermaid 还额外输出了 数据流、编排流、请求生命周期、外部集成 四张图，把整个系统的细节全拆开了。

这步的价值是：它把读代码这件事全自动化了。你不需要自己去梳理 internal/agent/、internal/channel/ 这些包的关系——AI 帮你搞定。

第二步：把 oh-my-mermaid 的输出喂给 fireworks-tech-graph

现在我们有了准确的结构，但图不好看。

在 Claude Code 里，把上面的架构描述转化成 fireworks-tech-graph 能理解的自然语言提示：

1
帮我用 Blueprint 风格，生成 Memoh 项目的整体架构图。
2

3
系统包含以下组件：
4
- 三个前端客户端：Web App、Desktop App、Browser Extension
5
- 核心后端：API Server（Go + JWT 鉴权）
6
- Agent Engine（负责 LLM 推理、向量搜索、容器运行）
7
- Channel System（对接外部渠道：Telegram、Discord、微信、飞书等9个平台）
8
- MCP System（工具调用）
9
- Data Layer（MySQL + 向量数据库 Qdrant）
10

11
请用 LLM 专用形状标注 Agent Engine 中的 LLM Providers，
12
用虚线箭头表示异步的容器任务，
13
用分组方框区分「前端层」「后端核心层」「外部集成层」。

为什么用 Blueprint 风格？

Blueprint（蓝图风）适合展示系统级架构——工程感强、层次分明、颜色有辨识度。如果是给产品或管理层看，可以换 Notion Clean；如果是 GitHub README，Dark Terminal 更抓眼球。

第三步：输出结果

fireworks-tech-graph 生成了两个文件：

• memoh-architecture.svg——矢量图，可无限缩放，可用 Inkscape/Figma 继续编辑
• memoh-architecture.png——1920px 高清 PNG，直接可以粘进 PPT、Notion、技术文档

Blueprint 风格输出效果：

换成 Flat Icon 风格，同一张图长这样：

从 Mermaid 文字图，到出版级 SVG 架构图，整个过程不超过 3 分钟。

这就是两个工具组合的真正价值：

• oh-my-mermaid 解决”读懂代码”的问题——再复杂的项目，10分钟内给你完整结构
• fireworks-tech-graph 解决”画得好看”的问题——把准确的结构变成专业视觉图

工作流一句话总结

代码库 → oh-my-mermaid（自动扫描 → Mermaid 结构图）→ fireworks-tech-graph（结构描述 → 高清架构图）

这个组合特别适合：写技术文档、做项目 Review、给新人讲系统、对外演示架构。

五、怎么装？两步搞定#

第一步：安装 Skill

直接在 Claude Code 对话框里发这句话：

帮我安装一下：https://github.com/yizhiyanhua-ai/fireworks-tech-graph

Claude 会自动识别、下载、同步，不用手动跑命令。

当然也可以在终端直接执行：

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

安装成功后会提示：fireworks-tech-graph 已安装到 ~/.agents/skills/fireworks-tech-graph，并已同步到 Claude Code。

这步完成，你就能用 /fireworks-tech-graph 生成 SVG 图了。

第二步：安装 PNG 导出依赖（可选）

fireworks-tech-graph 生成 SVG 不需要任何额外依赖，装完 Skill 就能直接用。

只有当你需要导出 1920px 高清 PNG 时，才需要安装 rsvg-convert。

根据你的系统选一种：

macOS（一行搞定）：

1
brew install librsvg

Windows（二选一）：

方案 A — 直接下载独立 exe，最省事：

1. 去 SourceForge 下载 rsvg-convert.exe
2. 把 rsvg-convert.exe 放到任意目录，比如 C:\tools\
3. 把这个目录加到系统环境变量 PATH 里
4. 重启终端，运行 rsvg-convert --version 验证是否成功

方案 B — 用 Chocolatey（如果你已装 choco）：

1
choco install rsvg-convert

Linux（Ubuntu/Debian）：

1
sudo apt install librsvg2-bin

先不装 rsvg-convert 也没关系

SVG 文件可以直接用浏览器打开，或者拖进 Figma/Inkscape 导出 PNG，不影响正常使用。PNG 导出只是锦上添花。

道理讲完了，该你了#

三句真心话：

1. 如果你经常需要画技术架构图，fireworks-tech-graph 值得现在就装上试试——免费、开源、MIT 协议，没有任何门槛。

2. oh-my-mermaid + fireworks-tech-graph 的组合，是目前我见过比较顺滑的「代码 → 架构图」工作流，特别适合 Vibe Coding 场景。

3. 别等工具”完美”。 它现在已经能解决 80% 的架构图需求，剩下的 20% 迭代更新会补上。先用起来，才能真正知道它适不适合你。

工具的价值，不在于它有多强大——在于你有没有真的用起来。