Fireworks Tech Graph
Generate production-quality SVG+PNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.
Last verified:
What is Fireworks Tech Graph?
Fireworks Tech Graph is a Claude Code skill that converts natural language descriptions into publication-ready SVG+PNG technical diagrams. Instead of writing Mermaid DSL syntax or clicking around draw.io's GUI, users simply describe their system in plain English or Chinese and get polished diagrams in seconds.
The tool features 7 visual styles (Flat Icon, Dark Terminal, Blueprint, Notion Clean, Glassmorphism, Claude Official, OpenAI Official) and supports 14 UML diagram types plus AI/Agent domain-specific diagrams. It includes built-in knowledge of AI/Agent patterns like RAG pipelines, Agentic Search, Mem0 memory architecture, Multi-Agent systems, and Tool Call flows. The semantic shape vocabulary encodes meaning (LLM = double-border rect, Agent = hexagon, Vector Store = ringed cylinder), and the semantic arrow system uses color and dash patterns to indicate flow types.
Fireworks Tech Graph is designed for software engineers, AI/ML engineers, technical writers, product managers, and anyone building agent infrastructure, AI IDEs, internal copilots, developer tools, or technical documentation systems. It outputs SVG files for editing and 1920px retina-quality PNG files ready for embedding in documentation, presentations, and GitHub READMEs.
The skill is open-source under the MIT license, has gained over 7,200 GitHub stars, and supports 40+ product icons with brand colors including OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL, and major cloud providers.
Fireworks Tech Graph pricing
Pricing model: Freemium
Fireworks Tech Graph is completely free and open-source under the MIT license. There is no paid tier or subscription. Users install it via npx skills add yizhiyanhua-ai/fireworks-tech-graph or by cloning the GitHub repository directly to ~/.claude/skills/fireworks-tech-graph. The only costs are the user's own system requirements (Node.js, Python for cairosvg, and optionally librsvg or Chromium for puppeteer).
Fireworks Tech Graph pros
- Converts natural language to diagrams without writing DSL syntax
- 7 built-in visual styles with executable style guides
- 14 UML diagram types with full support
- Built-in AI/Agent domain patterns (RAG, Mem0, Multi-Agent)
- Semantic shape vocabulary encodes meaning consistently
- Semantic arrow system with color and dash patterns for flow types
- 40+ product icons with official brand colors
- Outputs both SVG for editing and 1920px PNG for embedding
- No online tool needed - works offline in Claude Code
- MIT licensed open-source with 7.2k GitHub stars
- Swim lane grouping for complex architectures
- Supports English and Chinese input
- Pure inline SVG with no external font fetching
- Auto-triggered on common diagram request phrases
- Multiple PNG renderer options (cairosvg, rsvg-convert, puppeteer)
Fireworks Tech Graph cons
- Requires Node.js environment and npx skills CLI to install
- PNG generation requires separate renderer installation (cairosvg, rsvg-convert, or puppeteer)
- rsvg-convert has poor CSS support and may drop foreignObject elements
- puppeteer renderer is heavy (~150MB Chromium download)
- Only 7 visual styles available (no custom style creation)
- No web GUI - requires Claude Code terminal usage
- External CDN icon URLs may not render (must use inline SVG)
- ViewBox height issues can cut off diagrams at bottom
Frequently asked questions about Fireworks Tech Graph
What is Fireworks Tech Graph?
Fireworks Tech Graph is a Claude Code skill that converts natural language descriptions into publication-ready SVG+PNG technical diagrams. Instead of writing Mermaid DSL or using draw.io's GUI, you describe your system in English or Chinese and get polished diagrams in seconds with 7 visual styles and 14 UML diagram types.
How do I install Fireworks Tech Graph?
Install it by running npx skills add yizhiyanhua-ai/fireworks-tech-graph. This downloads the skill from GitHub to your .claude/skills/ directory. Alternatively, clone directly with git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph. Claude will automatically detect and use the skill.
What diagram types does it support?
It supports 14 UML diagram types (Class, Component, Deployment, Package, Composite Structure, Object, Use Case, Activity, State Machine, Sequence, Communication, Timing, Interaction Overview, ER Diagram) plus AI/Agent domain diagrams including Architecture, Data Flow, Flowchart, Agent Architecture, Memory Architecture, Sequence, Comparison, and Mind Map.
What are the 7 visual styles?
The 7 styles are: 1) Flat Icon (default, white background, colored accents), 2) Dark Terminal (dark bg, neon accents, monospace), 3) Blueprint (deep blue, grid lines, cyan strokes), 4) Notion Clean (minimal white, single accent), 5) Glassmorphism (dark gradient, frosted glass cards), 6) Claude Official (warm cream background, Anthropic brand colors), and 7) OpenAI Official (pure white, OpenAI palette, minimalist).
Does it support AI/Agent diagrams?
Yes, it has deep built-in knowledge of AI/Agent domain patterns including RAG pipelines, Agentic Search, Mem0 memory architecture, Multi-Agent systems, Tool Call flows, and the 5 agent memory types (Sensory, Working, Episodic, Semantic, Procedural). These patterns are regression-tested and optimized.
What PNG renderer should I use?
cairosvg is recommended as the default - it has the best balance of quality and easy installation (pip install cairosvg). rsvg-convert is a fallback but has poor CSS support. puppeteer provides the highest fidelity for browser-generated SVG but requires ~150MB Chromium download.
How do I specify a style in my prompt?
You can specify style by number or name: 'Draw a microservices architecture diagram, style 2 (dark terminal)' or 'Draw a multi-agent collaboration diagram --style glassmorphism'. The skill also auto-selects appropriate styles based on diagram type and use case.
What product icons are available?
The tool includes 40+ product icons with brand colors covering AI/ML (OpenAI, Anthropic, Gemini, LLaMA, Mistral, Cohere, Groq, Hugging Face), AI frameworks (Mem0, LangChain, LlamaIndex, LangGraph, CrewAI, AutoGen), vector DBs (Pinecone, Weaviate, Qdrant, Chroma), databases, messaging, cloud providers, and observability tools.
Can I export to formats other than SVG and PNG?
No, Fireworks Tech Graph only outputs SVG and PNG. SVG is for editing and PNG is exported at 1920px width (2x retina) for embedding in documentation, presentations, and GitHub READMEs. PNG is lossless with sharp edges, no JPEG compression artifacts.
Is there a web version or GUI?
No, Fireworks Tech Graph is exclusively a Claude Code skill that runs in the terminal. There is no web version or separate GUI. You trigger it by typing natural language prompts like 'generate diagram', 'draw diagram', 'architecture diagram', or 'flowchart' directly in Claude Code.