Fireworks Tech Graph: Natural Language to Technical Diagrams (+ AutoFigure Comparison)
Describing a system architecture and getting a polished diagram in seconds — that’s the promise of Fireworks Tech Graph, an Agent Skill that turns natural language into publication-ready technical diagrams. It works unchanged in both Codex and Claude Code.
Updated September 2026: Now ships 12 visual styles (up from 8), adds SVG-to-GIF semantic motion and offline interactive HTML output, four new engineering-first styles (C4, cloud deployment, event streams, reliability), and geometry-checked / complete-text validation. It’s now a single Agent Skill that runs in both Codex and Claude Code.
We covered AutoFigure earlier this year for scientific figure generation. Fireworks Tech Graph tackles a different problem: engineering and architecture diagrams for developers, not researchers.
What Is Fireworks Tech Graph?
An Agent Skill that generates SVG + PNG diagrams (plus GIF motion and interactive HTML) from natural language. Describe your system, pick a style, get a diagram.
"Generate a Mem0 memory architecture diagram, dark style"
→ Classifies: Memory Architecture, Style 2 (Dark Terminal)
→ Generates SVG with swim lanes, cylinders, semantic arrows
→ Exports 1920px PNGKey capabilities:
- 12 visual styles — 11 generator-backed styles plus 1 AI-authored (from clean corporate to neon terminal to blueprint aesthetics)
- 14 UML diagram types — Full UML coverage (class, sequence, activity, deployment, etc.)
- AI/agent domain patterns — RAG, Agentic Search, multi-agent, tool call flows, memory systems built-in
- Engineering-first styles — Executable contracts for C4 reviews, cloud deployments, event streams, and reliability investigations
- SVG-to-GIF motion — Turn a semantic SVG into a compact, validated animated GIF (routes draw in, then live data flows)
- Offline interactive HTML — Self-contained interactive diagrams, no server needed
- Semantic shape vocabulary — LLMs get double-border rectangles, agents get hexagons, vector stores get ringed cylinders
- Smart arrow colors — Dash patterns and colors encode meaning (read vs write vs async)
- Geometry-safe + complete-text validation — Optional
"text_policy": "strict"rejects visible truncation before output is written - 40+ product icons — OpenAI, Anthropic, Pinecone, Kafka, PostgreSQL with brand colors
The 12 Visual Styles
Unlike most diagram generators that output one generic look, Fireworks Tech Graph has distinct aesthetics:
| Style | Look | Best For |
|---|---|---|
| 1. Flat Icon | White, clean, semantic arrows | Product docs, READMEs |
| 2. Dark Terminal | Neon accents, monospace | Dev blogs, terminal UIs |
| 3. Blueprint | Deep blue, grid lines, cyan strokes | Engineering specs |
| 4. Notion Clean | Minimal white, single accent | Documentation |
| 5. Glassmorphism | Frosted cards, soft glow | Modern presentations |
| 6. Claude Official | Warm cream, Anthropic palette | Anthropic-themed docs |
| 7. OpenAI Official | Pure white, green accents | OpenAI-themed content |
| 8. Dark Luxury | Black + gold, serif titles | Premium presentations |
| 9–12. Engineering-first | C4, cloud deployment, event stream, reliability | Architecture reviews, ops runbooks |
Styles 1-7 (and 9-12) are generator/template-driven with executable contracts. Style 8 (Dark Luxury) is AI-authored — the model reads style guidelines and hand-crafts the SVG.
Installation
It’s an Agent Skill — install once, use in Codex or Claude Code:
npx skills add yizhiyanhua-ai/fireworks-tech-graphVerify and diagnose your setup:
python3 "$SKILL_ROOT/scripts/fireworks.py" version
python3 "$SKILL_ROOT/scripts/fireworks.py" doctorFor PNG export, install one renderer:
# Recommended
pip install cairosvg
# Alternatives
brew install librsvg # macOS
npm install puppeteer # Highest fidelity, heavyweightUsage Examples
Basic
Draw a RAG pipeline flowchartWith Style
Draw a microservices architecture diagram, style 3 (blueprint)AI/Agent Patterns
Generate a Mem0 memory architecture diagram with vector store,
graph DB, KV store, and memory managerDraw a Multi-Agent diagram: Orchestrator dispatches 3 SubAgents
(search / compute / code execution), results aggregatedFull UML
Create a sequence diagram showing OAuth 2.0 authorization code flowFireworks Tech Graph vs AutoFigure: When to Use Which
Both generate diagrams from natural language. They target different audiences.
| Fireworks Tech Graph | AutoFigure | |
|---|---|---|
| Primary audience | Engineers, developers | Researchers, academics |
| Diagram types | Architecture, UML, agent flows | Scientific method figures |
| Style control | 12 preset styles | Style transfer (match any reference) |
| Output | SVG + 1920px PNG + GIF motion + interactive HTML | Editable SVG with embedded editor |
| Hosted version | No (Agent Skill for Codex / Claude Code) | Yes (deepscientist.cc) |
| Paper integration | No | Yes (PDF → Figure extraction) |
| Domain knowledge | AI/agent patterns, UML | Scientific methodology |
Use Fireworks Tech Graph When:
- You’re documenting a software architecture
- You need UML diagrams (class, sequence, component, etc.)
- You want AI agent flow diagrams (RAG, multi-agent, tool calls)
- You need consistent visual branding (Claude/OpenAI/corporate styles)
- You’re using Codex or Claude Code
Use AutoFigure When:
- You’re creating figures for a research paper
- You need to match another paper’s visual style
- You want to extract methodology figures from PDFs
- You need the embedded SVG editor
- You’re not using Codex or Claude Code
Why Not Mermaid or draw.io?
| Mermaid | draw.io | Fireworks Tech Graph | |
|---|---|---|---|
| Natural language input | ✗ | ✗ | ✅ |
| AI/agent domain patterns | ✗ | ✗ | ✅ |
| Multiple visual styles | ✗ | Manual | ✅ 12 built-in |
| High-res PNG export | ✗ | Manual | ✅ Auto 1920px |
| GIF motion / interactive HTML | ✗ | ✗ | ✅ |
| Semantic arrow colors | ✗ | Manual | ✅ Auto |
| No online tool needed | ✅ | ✗ | ✅ |
Mermaid requires learning its DSL. draw.io requires clicking around a GUI. Fireworks Tech Graph: describe in English, get a diagram.
Stable Prompt Recipes
The repo includes tested prompts for each style. Here’s the Dark Terminal example:
Draw a tool call flow diagram in style 2 (Dark Terminal).
Show User query, Retrieve chunks, Generate answer, Knowledge base,
Agent, Terminal, Source documents, and Grounded answer.
Use terminal chrome, neon accents, monospace typography, and
semantic arrows for retrieval, synthesis, and embedding update.These regression-tested prompts produce consistent outputs across sessions.
Technical Implementation
Under the hood:
- Skill classification — Detects diagram type and style from prompt
- Domain knowledge — Built-in patterns for AI/agent architectures
- Semantic vocabulary — Shape and arrow rules encoded, not just documented
- SVG generation — Pure inline SVG, no external font fetching
- PNG export — cairosvg (recommended), rsvg-convert, or puppeteer
The semantic shape vocabulary is interesting: every component type has a consistent visual representation. LLMs always get double-border rectangles. Agents always get hexagons. This creates instantly recognizable diagrams across styles.
The Bigger Picture
We’ve now covered two text-to-diagram tools:
- AutoFigure — For researchers creating publication figures
- Fireworks Tech Graph — For engineers creating architecture diagrams
Both eliminate the tedious manual drawing step. The difference is domain knowledge: AutoFigure understands scientific methodology and journal aesthetics. Fireworks Tech Graph understands software architecture and AI agent patterns.
As these tools mature, expect more domain-specific variants. Medical diagrams. Financial flowcharts. Legal process maps. The pattern is clear: encode domain expertise into the generation process, not just generic drawing capabilities.
Links: