Fireworks Tech Graph 工具使用笔记

1. 它是什么

一句话：这是一个“自然语言生成技术图”的 Agent Skill。

你可以直接说：

画一张 RAG 流程图

或者：

Generate a Mem0 architecture diagram, dark terminal style

它会根据描述判断图类型和风格，生成 SVG，再导出 PNG；如果要求动效，还可以把语义 SVG 转成 GIF。

它和 Mermaid、draw.io 的区别很直接：

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

官网展示：fireworks-tech-graph product site

2. 官方效果图

12 种风格总览：

几个常用场景示例：

3. 适合用来做什么

我以后会把它当成“技术图生成器”来用，尤其是这些场景：

几个我觉得高频的提示词：

画一张 Multi-Agent 协作架构图：用户请求进入 Orchestrator，分发给 Search Agent、Code Agent、Report Agent，最后汇总输出。

帮我画一张 RAG 和 Agentic RAG 的对比图，用 Notion Clean 风格。

画一张客户私有化部署架构图：公网入口、API Gateway、应用服务、PostgreSQL、Redis、对象存储、日志监控，风格 10 Cloud Fabric。

把这个系统调用链画成 Ops Pulse 可靠性图：用户请求 → API → Agent Runtime → Tool Executor → Database → Response。

4. 不适合用来做什么

它不是所有画图任务的万能工具。

5. 安装方式

5.1 推荐安装到 Codex 和 Claude Code

官方推荐用 nested skill path，最后的 /skills/fireworks-tech-graph 不要省略：

npx -y skills@1.5.17 add \
  yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \
  --agent codex claude-code -g -y --copy

这个命令会把完整 Skill 复制到：

~/.agents/skills/fireworks-tech-graph
~/.claude/skills/fireworks-tech-graph

包括脚本、schema、fixtures、templates、tests、references 和元数据。

5.2 Codex 可编辑安装

如果希望自己改 skill：

mkdir -p ~/.agents/skills
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.agents/skills/fireworks-tech-graph

5.3 Claude Code 可编辑安装

mkdir -p ~/.claude/skills
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph

5.4 Codex 和 Claude Code 共用一个 checkout

mkdir -p ~/.local/share/agent-skills ~/.agents/skills ~/.claude/skills
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.local/share/agent-skills/fireworks-tech-graph
ln -s ~/.local/share/agent-skills/fireworks-tech-graph ~/.agents/skills/fireworks-tech-graph
ln -s ~/.local/share/agent-skills/fireworks-tech-graph ~/.claude/skills/fireworks-tech-graph

这个方式的好处是两个 Agent 看到的是同一份 Skill，更新时不用同步两次。

6. 依赖

静态 SVG/PNG 工作流需要一个 SVG 渲染器：

python3 -m pip install cairosvg

或者：

brew install librsvg

GIF 动效额外需要 FFmpeg、Chrome/Chromium 和 puppeteer-core：

brew install ffmpeg

for SKILL_ROOT in \
  "$HOME/.agents/skills/fireworks-tech-graph" \
  "$HOME/.claude/skills/fireworks-tech-graph"
do
  [ -d "$SKILL_ROOT" ] || continue
  npm install --prefix "$SKILL_ROOT" --ignore-scripts --no-save --package-lock=false puppeteer-core@25.3.0
  python3 "$SKILL_ROOT/scripts/fireworks.py" doctor
done

检查环境：

python3 "$HOME/.agents/skills/fireworks-tech-graph/scripts/fireworks.py" doctor

7. 快速开始

最简单的用法是直接在 Codex 或 Claude Code 里说：

帮我画一张 RAG 架构图

指定风格：

画一张微服务架构图，风格 3 工程蓝图风

指定输出路径：

生成一张 Tool Call 流程图，输出到 /tmp/diagrams/

生成 GIF：

把刚才生成的 SVG 做成 GIF

或者：

Generate a GIF for this architecture diagram

8. CLI 常用命令

官方统一 CLI：

SKILL_ROOT="${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph}"

python3 "$SKILL_ROOT/scripts/fireworks.py" doctor
python3 "$SKILL_ROOT/scripts/fireworks.py" validate architecture "$SKILL_ROOT/fixtures/api-flow-style7.json"
python3 "$SKILL_ROOT/scripts/fireworks.py" render architecture "$SKILL_ROOT/fixtures/api-flow-style7.json" diagram.svg --report layout.json
python3 "$SKILL_ROOT/scripts/fireworks.py" check diagram.svg
python3 "$SKILL_ROOT/scripts/fireworks.py" export-html diagram.svg diagram.html --title "API Integration Flow"
python3 "$SKILL_ROOT/scripts/fireworks.py" animate diagram.svg diagram.gif

几个命令的实际含义：

9. 触发词

中文：

画图 / 帮我画 / 生成图 / 做个图 / 架构图 / 流程图 / 可视化一下 / 出图
生成 GIF / 制作 GIF / 让这张图动起来 / 把刚才的 SVG 转成 GIF

英文：

generate diagram / draw diagram / create chart / visualize
architecture diagram / flowchart / sequence diagram / data flow
Generate a GIF / animate this diagram / animate this SVG as a GIF

10. 12 种风格怎么选

11. 支持的图类型

普通技术图：

• 架构图
• 数据流图
• 流程图
• Agent 架构图
• 记忆架构图
• 序列图
• 对比图
• 思维导图

UML 支持 14 类：

• Class Diagram
• Component Diagram
• Deployment Diagram
• Package Diagram
• Composite Structure
• Object Diagram
• Use Case Diagram
• Activity Diagram
• State Machine
• Sequence Diagram
• Communication Diagram
• Timing Diagram
• Interaction Overview
• ER Diagram

AI/Agent 领域内置 Pattern：

RAG Pipeline
Agentic RAG
Agentic Search
Mem0 Memory Layer
Agent Memory Types
Multi-Agent
Tool Call Flow

12. 一些可直接复用的提示词

RAG / Agent

画一张 Agentic RAG 架构图：用户问题进入 Planner，Planner 可调用 Search、Vector DB、Calculator、Code Tool，最后 Synthesizer 生成答案。风格 2。

生成一张 Mem0 记忆架构图，包含输入、Memory Manager、Vector Store、Graph DB、KV Store、冲突消解和检索输出。风格 3。

多 Agent

画一张 Multi-Agent 协作图：Orchestrator 接收任务，分发给 Research Agent、Coding Agent、Review Agent，结果进入 Aggregator，再由 Human Reviewer 审核。风格 5。

云部署

画一张多区域 SaaS 部署图：Global DNS → WAF → Region A / Region B，每个 Region 有 API Gateway、App Service、PostgreSQL、Redis、Object Storage，两个 Region 做数据复制。风格 10。

事件流

画一张订单系统事件流图：order.created topic → payment processor → inventory processor → notification processor，失败进入 DLQ，最终写入 order projection。风格 11。

SRE

画一张 Checkout 可靠性脉冲图：Browser → API Gateway → Checkout Service → Payment Service → Database，标注 latency、traffic、errors、saturation，并展示 OTel trace export。风格 12。

13. 输出文件

常见输出：

14. 我的使用建议

我的建议是把它放在三个工作流里：

14.1 开源项目分析

分析一个 repo 时，先写文字，再让它生成：

• 总体架构图。
• 数据流图。
• Agent 工作流图。
• 部署拓扑图。
• 和竞品对比图。

这样 Obsidian 笔记会更好读。

14.2 售前方案

如果要给客户讲方案，用它快速出第一版图：

• 现状系统图。
• 目标架构图。
• 接入流程图。
• 私有化部署图。
• PoC 验证流程图。

图可以先不追求完美，但要把模块关系讲清楚。后续再用 draw.io/Figma 精修也行。

14.3 技术培训

讲 Agent、RAG、MCP、工具调用、记忆系统时，用它把概念变成图。学员会更容易跟上，不用你在白板上临时画半天。

15. 常见问题与排坑

16. 版本、许可证和维护状态

v1.2.0 的重点更新：

• 新增 SVG-to-GIF 语义动效工作流。
• 12 种风格都加入已验收 motion contract。
• 默认 GIF 时间线改为 5.75 秒 / 115 帧 / 20fps。
• README 展示图更新为 GIF。
• 加强了 GIF/几何/Chromium/FFprobe 的验证。

17. 参考资料

• GitHub 仓库
• 项目官网
• 中文 README
• 英文 README
• Release v1.2.0
• CHANGELOG
• npm 包