Fireworks Tech Graph
Overview
Fireworks Tech Graph turns natural language descriptions into publication-ready SVG and PNG technical diagrams. You describe a system in plain English (or Chinese), pick a visual style, and get a polished diagram back in seconds. It hit 7,700 GitHub stars in about two months after its April 2026 launch, which tracks with how much developers dislike drawing diagrams by hand.
The project is built by Brad Zhang, a developer who’s been working at the intersection of AI tooling and developer productivity. The repo positions itself as both a practical tool and a proof surface for “turning vague AI/devtool workflows into constrained, reusable systems.” That philosophy shows up in the design — it’s not a freeform image generator. It has strict templates, regression-tested prompt recipes, and deterministic output paths.
The core problem it solves is mundane but pervasive: every fullstack developer needs to produce architecture diagrams, sequence diagrams, database schemas, and system flowcharts. The options today are draw.io (manual, slow), Mermaid (text-based but limited styling), or AI image generators (unpredictable, no structural guarantees). Fireworks Tech Graph sits in a specific gap — structured enough to produce consistent, publication-quality output, flexible enough to accept natural language input. It ships with knowledge of AI and agent domain patterns (RAG flows, multi-agent architectures, tool call sequences, Mem0 memory systems) on top of standard UML support.
Why it matters
Technical diagrams are the unglamorous backbone of software documentation. Every RFC, every onboarding doc, every architecture decision record needs them. Yet the tooling has been stuck in a rut — either you spend 30 minutes in a drag-and-drop editor fighting alignment, or you write Mermaid/PlantUML markup and accept that the output looks like it was generated in 2015.
Fireworks Tech Graph represents a broader shift: AI tools moving from “generate text” to “generate structured artifacts.” The diagrams aren’t random illustrations. They use swim lanes, semantic arrows, layered containers, and domain-specific notation. The project understands that a microservices architecture diagram needs numbered sections with clear service boundaries, not just boxes and arrows.
For fullstack developers specifically, this fills a real gap in the workflow. You’re building systems with React frontends, NestJS APIs, Go microservices, and Postgres databases. You need to document those systems. Mermaid can handle sequence diagrams but falls apart on complex architecture views. draw.io gives you control but costs you time. Fireworks Tech Graph gives you a third option: describe what you built, get a diagram that looks like it belongs in a Stripe API doc.
Key Features
8 Visual Styles. The tool ships with eight distinct visual themes — Flat Icon (clean product-doc style), Dark Terminal (neon-on-black for README badges), Blueprint (engineering grid with cyan strokes), Notion Clean (minimal white with accent colors), Glassmorphism (frosted cards with soft glow), Claude Official (warm cream with Anthropic brand palette), OpenAI Official (white with OpenAI brand colors), and Dark Luxury (AI-authored champagne gold on black). Each style is regression-tested, meaning the same prompt produces consistent output across runs.
14 Diagram Types with Full UML Support. Beyond the standard sequence and class diagrams, it handles component diagrams, deployment diagrams, state machines, activity diagrams, use case diagrams, object diagrams, package diagrams, composite structure diagrams, timing diagrams, and interaction overview diagrams. The UML support is complete, not a subset — this matters when you’re documenting complex enterprise systems.
AI and Agent Domain Templates. The tool has built-in knowledge of patterns that are increasingly common in modern architectures: RAG (Retrieval-Augmented Generation) pipelines, agentic search flows, Mem0 memory architectures, multi-agent collaboration patterns, and tool call sequences. If you’re building an AI-powered product, you don’t have to explain the underlying architecture from scratch — the tool already understands these patterns.
Natural Language Input. You describe the diagram in plain English. The system classifies the diagram type, selects appropriate visual elements, and generates the SVG. The prompt recipes in the README are specific enough to produce consistent output — “Draw a microservices architecture diagram in style 3 (Blueprint) with numbered engineering sections” is a working prompt, not a vague aspiration.
SVG-First with PNG Export. The output is SVG (vector, infinitely scalable, editable in any design tool), with PNG export via cairosvg at configurable resolution (default 1920px for retina displays). SVG means you can edit individual elements after generation — move a box, change a label, adjust colors. The PNG export uses lossless rendering, which matters for technical diagrams where text sharpness is critical.
Claude Code and Codex Integration. The project ships as an agent skill, meaning you can invoke it directly from Claude Code or Codex CLI. Describe the diagram you want, and the agent generates it as part of your development workflow. No context switching to a separate tool. This integration model is where developer tooling is heading.
Regression-Tested Prompt Recipes. Each visual style has a set of “stable prompt recipes” — tested prompts that produce consistent, high-quality output. This is a different approach from most AI tools where you’re guessing at prompts. The recipes are specific: they name the sections, the visual elements, the arrow types, and the layout structure. It turns diagram generation from a creative exercise into a deterministic one.
Use Cases
- Architecture documentation — Generate system architecture diagrams for RFCs, ADRs, and onboarding docs. Describe your React frontend, NestJS API layer, Go microservices, and database topology, get a polished diagram in your preferred style.
- AI and agent workflow documentation — Document RAG pipelines, multi-agent systems, tool call flows, and memory architectures using the built-in domain templates. Useful for teams building AI-powered products who need to explain their architecture to stakeholders.
- Technical presentations — Produce slide-ready diagrams for conference talks, internal tech talks, and investor meetings. The Dark Luxury and Glassmorphism styles are specifically designed for visual impact.
- README and documentation sites — Generate diagrams that look consistent across your documentation. The Notion Clean and Flat Icon styles work well for developer-facing docs where clarity matters more than flash.
- UML diagram generation — Replace manual UML tools for class diagrams, sequence diagrams, state machines, and deployment diagrams. The full UML support means you can use it for formal software design documentation.
- Rapid prototyping — Sketch out system designs quickly during architecture discussions. Describe the system, get a diagram, iterate on the description. Faster than whiteboarding for remote teams.
Pros and Cons
Pros:
- Eliminates the most tedious part of technical documentation. Describing a system in English and getting a publication-quality diagram back in seconds is a genuine productivity win, especially for developers who can’t draw.
- The style system is well-designed. Eight distinct visual themes cover the main use cases — from formal documentation to flashy presentations — and the regression-tested recipes mean output is consistent.
- SVG output is the right architectural choice. Vector graphics mean diagrams are editable, scalable, and integrate cleanly with design tools and documentation pipelines.
- Active development with 7,700 stars and 675 forks in two months. The project has momentum and community interest, which matters for long-term viability.
- The AI domain templates (RAG, multi-agent, tool call) are genuinely useful for teams building modern AI-powered applications. This isn’t generic diagramming — it understands the patterns.
Cons:
- Python dependency with
cairosvgas the recommended PNG export path. Cairo can be finicky to install on some systems, especially Windows. Thersvg-convertandpuppeteeralternatives exist but add complexity. - It’s a skill/harness tool, not a standalone web app. You need Claude Code, Codex, or another compatible agent to use it. If you’re not already in the agent workflow ecosystem, the setup overhead is non-trivial.
- The natural language interface means output quality depends on prompt specificity. Vague descriptions produce vague diagrams. The stable prompt recipes help, but there’s a learning curve to writing effective prompts.
- No real-time editing or iteration UI. You generate a diagram, check it, adjust the prompt, regenerate. For fine-tuning specific visual elements, a traditional diagramming tool is still faster.
Getting Started
# Clone the repository
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git
cd fireworks-tech-graph
# Install dependencies (Python 3.10+)
pip install -r requirements.txt
# Generate a diagram from the command line
python generate.py --style 3 --prompt "Draw a microservices architecture diagram with API Gateway, Auth Service, User Service, Order Service, and PostgreSQL database"
# Or use it as a Claude Code / Codex skill
# Copy the skill file to your agent's skill directory
cp skills/fireworks-tech-graph.md ~/.claude/skills/The output SVG and PNG files are saved to the output/ directory. Each generation creates both formats by default.
Alternatives
Mermaid — The most popular text-based diagramming tool, built into GitHub, GitLab, and many documentation platforms. Mermaid is simpler to set up (just markdown syntax) and has wider platform support, but its visual output is limited and dated. Choose Mermaid when you need diagrams embedded directly in markdown files with zero dependencies, or when your team already uses it and the visual quality is acceptable.
Excalidraw — A collaborative whiteboard tool with a hand-drawn aesthetic. Excalidraw is excellent for brainstorming and informal architecture sketches. It has a web UI, real-time collaboration, and a growing library of components. Choose Excalidraw when you want a visual, interactive diagramming experience and don’t need publication-quality output.
D2 (by Terrastruct) — A modern diagram scripting language that compiles to SVG. D2 is code-first (like Mermaid) but with better layout algorithms and more visual customization. It’s gaining traction in the developer community. Choose D2 when you want diagrams-as-code with deterministic output and don’t need natural language input.
Verdict
Fireworks Tech Graph is the most practical AI-to-structured-artifact tool I’ve seen for developers. It doesn’t try to be a general-purpose image generator — it focuses specifically on technical diagrams and does that job well. The 7,700 stars in two months reflect genuine demand: developers want better diagram tooling, and the “describe it in English, get a polished SVG” workflow is compelling. The style system and regression-tested recipes elevate it above “AI slop” territory. If you’re a fullstack developer who needs to document systems regularly and you’re already using Claude Code or Codex, this is worth adding to your workflow today. If you’re not in the agent ecosystem yet, the value proposition is weaker — you’d need to buy into that workflow first. But the trend is clear: diagram generation is moving from manual to automated, and Fireworks Tech Graph is ahead of the curve.