Fireworks Tech Graph 工具使用笔记

2. Official renderings

Overview of 12 styles:

A few examples of common scenarios:

3. What is suitable

I will use it as a "technical diagram generator" in the future, especially in these scenarios:

A few I think high-frequency prompt words:

画一张 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. Not suitable for what to do

It is not a universal tool for all drawing tasks.

5. Installation Method

5.1 recommended for Codex and Claude Code

The official recommendation is to use nested skill path, and the last'/skills/fireworks-tech-graph' should not be omitted:

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

This command copies the full Skill:

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

Includes scripts, schemas, fixtures, templates, tests, references, and metadata.

5.2 Codex Editable Installation

If you want to change your 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 Editable Installation

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

5.4 Codex and Claude Code share one 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

The advantage of this method is that the two agents see the same Skill and do not need to synchronize twice when updating.

6. Dependency

Static SVG/PNG workflows require an SVG renderer:

python3 -m pip install cairosvg

Or:

brew install librsvg

GIF requires additional FFmpeg, Chrome/Chromium, and 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

Check the environment:

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

7. Quick Start

The simplest usage is to say directly in Codex or Claude Code:

帮我画一张 RAG 架构图

Specify style:

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

Specify the output path:

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

Generate GIF:

把刚才生成的 SVG 做成 GIF

Or:

Generate a GIF for this architecture diagram

8. CLI Common Commands

Official Unified 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

The actual meaning of several commands:

9. Trigger Word

Chinese:

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

English:

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. How to choose 12 styles

11. Supported graph types

General Technical Chart:

-Architecture Diagram

-Data Flow Diagram

-Flowchart

-Agent Architecture Diagram

-Memory Architecture Chart

-Sequence diagram

-Comparison chart

-Mind Map

UML supports 14 categories:

-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 realm built-in Pattern:

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

12. Some directly reusable prompt words

RAG / Agent

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

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

Multi-Agent

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

Cloud Deployment

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

Event Flow

画一张订单系统事件流图：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. Output file

Common output:

14. My usage suggestion

My suggestion is to put it in three workflows:

14.1 Open Source Project Analysis

When analyzing a repo, write the text first and then let it generate:

-Overall architecture diagram.

-Data flow diagram.

-Agent workflow diagram.

-Deployment topology diagram.

-Comparison chart with the competition.

Obsidian notes will read better.

14.2 Pre-Sales Plan

If you want to tell the customer about the plan, use it to quickly produce the first layout:

-Current system diagram.

-Target architecture diagram.

-Access flow chart.

-Privatization deployment map.

-PoC verification flowchart.

The figure can not pursue perfection first, but the module relationship should be clearly explained. It is also possible to use draw.io/Figma for refinement later.

14.3 Technical Training

When talking about Agent, RAG, MCP, tool call, and memory system, use it to turn concepts into diagrams. It will be easier for students to keep up without you having to draw on the whiteboard for half a day.

15. FAQ & Pit

16. Version, License, and Maintenance Status

Highlights of v1.2.0 updates:

-New SVG-to-GIF semantic dynamic workflow.

-12 styles are added to the accepted motion contract.

-Default GIF timeline changed to 5.75 seconds/115 frames/20fps.

-README presentation updated to GIF.

-Enhanced GIF/Geometry/Chromium/FFprobe validation.

17. REFERENCE

-GitHub repository

-Project Official Website

-Chinese README

-ENGLISH README

-Release v1.2.0

-CHANGELOG

-npm package