v1.2.0 · Semantic SVG→GIF motion is live · 12 styles, one verified runtime→
v1.2.0 · Open-source · Codex + Claude Code Skill

Stop drawing diagrams by hand.

Describe your system in plain English or Chinese — get publication-ready SVG + PNG + semantic GIF technical diagrams. Connectors draw on from an empty frame, then stay alive with persistent data flow.

★ Star on GitHub See 12 styles → Open interactive demo ↗
~ install complete skill in Codex + Claude Code
npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy
12VISUAL STYLES
14UML TYPES
40+BRAND ICONS
5.75sDRAW-ON + SETTLED FLOW
Why teams use it

Mermaid is too limited. draw.io is too manual.

fireworks-tech-graph understands AI/Agent domain patterns, enforces a consistent visual language, and exports high-res static or semantic motion output — all from a sentence.

📝

Natural language in

"Draw a Mem0 memory architecture, dark style." The skill classifies the diagram type and style, then generates the SVG.

🎨

12 production styles

Styles 1–7 and 9–12 are deterministic generator profiles. Dark Luxury keeps its AI-authored editorial composition and static regression fixture.

🤖

AI/Agent patterns built-in

RAG, Agentic RAG, Mem0, Multi-Agent, Tool Call Flow — with the right shape vocabulary (hexagons for Agents, ringed cylinders for Vector Stores).

🧩

Geometry-safe semantic graph

Typed nodes and edges, orthogonal routing, exact waypoints, port fan-out, label and legend avoidance, plus verified bridge jumps keep wires out of boxes.

🏷️

40+ brand icons

OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL, LangChain, LangGraph, CrewAI, Kubernetes, Grafana — correct brand colors, inline SVG, no CDN fetch.

⚡

Validated SVG → GIF motion

Every style shares one fail-closed motion runtime: empty-frame draw-on, semantic connector timing, and an extended settled phase with persistent data flow.

How it works

From sentence to diagram in four steps.

1

Install the complete skill

npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy installs every bundled file for both runtimes.

2

Choose static or motion output

Use CairoSVG for PNG, or ask for a GIF to activate the focused SVG-to-GIF runtime with Chromium, FFmpeg, and ImageMagick.

3

Describe your system

"Draw a RAG pipeline flowchart." Or: "Generate a Mem0 architecture diagram, dark style." Triggers automatically on phrases like draw / visualize / architecture diagram / 画图.

4

Ship verified output

The skill checks geometry and engineering semantics, then probes GIF dimensions, frames, duration, cadence, and infinite looping before installing the final artifact atomically.

Style gallery

Twelve distinct engineering views.

Each style keeps its own engineering scenario and visual grammar. v1.2.0 adds the same approved motion contract to all twelve: draw the structure, hand off to the scene, then keep the final system alive with visible data flow.

All 12 fireworks-tech-graph styles animated with draw-on and persistent settled data flow
v1.2.0 · 12-style motion overview5.75 seconds · infinite loop · verified GIF
Animated Mem0 Memory Architecture in Flat Icon style
STYLE 01 · FLAT ICON

Mem0 Memory Architecture

 Animated Tool Call Flow in Dark Terminal style
STYLE 02 · DARK TERMINAL

Tool Call Flow

 Animated Microservices Architecture in Blueprint style
STYLE 03 · BLUEPRINT

Microservices Architecture

 Animated Agent Memory Types in Notion Clean style
STYLE 04 · NOTION CLEAN

Agent Memory Types

 Animated Multi-Agent Collaboration in Glassmorphism style
STYLE 05 · GLASSMORPHISM

Multi-Agent Collaboration

 Animated System Architecture in Claude Official style
STYLE 06 · CLAUDE OFFICIAL

System Architecture

 Animated API Integration Flow in OpenAI Official style
STYLE 07 · OPENAI OFFICIAL

API Integration Flow

 Animated Agent Runtime Architecture in Dark Luxury style
STYLE 08 · DARK LUXURY

Agent Runtime Architecture

 Animated Checkout Container Review in C4 Review Canvas style
STYLE 09 · C4 REVIEW CANVAS

Checkout Container Review

 Animated Active-Active Checkout Deployment in Cloud Fabric style
STYLE 10 · CLOUD FABRIC

Active–Active Deployment

 Animated Checkout Event Line in Event Transit style
STYLE 11 · EVENT TRANSIT

Checkout Event Line

 Animated Checkout Reliability Pulse in Ops Pulse style
STYLE 12 · OPS PULSE

Checkout Reliability Pulse
AI / Agent domain patterns

Speaks the vocabulary of modern AI systems.

Not just generic flowcharts — built-in patterns for the architectures you actually document.

RAG PipelineAgentic RAGAgentic SearchMem0 Memory LayerAgent Memory TypesMulti-AgentTool Call FlowClass · Component · DeploymentSequence · State MachineActivity · Use CaseER DiagramMind Map · Comparison Matrix
FAQ

Questions, answered.

How is this different from Mermaid?
Mermaid's DSL is limited and every diagram looks the same. fireworks-tech-graph takes natural language, understands AI/Agent domain patterns, enforces a consistent semantic shape vocabulary, and exports high-res PNG — across 12 distinct visual styles.
Do I need a specific renderer?
You need one PNG renderer. pip install cairosvg is recommended (best CSS support). brew install librsvg (rsvg-convert) and npm install puppeteer also work. SVG is always produced regardless.
What can I say to trigger it?
Natural phrases like "draw a diagram", "visualize", "architecture diagram", "flowchart", "sequence diagram" — in English or Chinese (画图 / 帮我画 / 生成图 / 出图). The skill auto-classifies the diagram type and style.
How do I generate the animated GIF?
Ask naturally: “把这张 SVG 做成 GIF” or “Generate a GIF for this diagram.” v1.2.0 keeps the path focused on semantic SVG input, then validates the draw-on sequence, settled data flow, 5.75-second timeline, frame cadence, and infinite loop.
Does it really understand engineering semantics?
Yes — in addition to AI/Agent patterns, Styles 9–12 validate C4 abstraction levels, deployment ownership, event-rail topology, and golden-signal/trace contracts before rendering. The visual treatment cannot hide missing engineering facts.
Can I use my own brand icons?
40+ brand icons ship built-in (OpenAI, Anthropic, Pinecone, Weaviate, Kafka, LangChain, LangGraph, CrewAI, Kubernetes, Grafana…) as inline SVG with correct brand colors — no CDN fetch needed.
Is it free?
MIT, open source, runs locally in Codex and Claude Code. If it saves you time, consider sponsoring.