Tools· Design & Creative

fireworks-tech-graph

fireworks-tech-graph is an open-source tool that generates production-ready technical SVG and PNG diagrams from natural-language descriptions, including all UML types and built-in AI architecture patterns.

generatingdesigningexecutableOpen Source

Open provider

Description

The open-source project was originally designed as a skill for Claude Code and supports several visual styles, including flat icon, dark terminal, blueprint, Notion-clean and glassmorphism, plus all 14 UML diagram types. This is complemented by built-in knowledge of common AI and agent architecture patterns such as Retrieval Augmented Generation, agentic search, Mem0 and multi-agent flows, so that corresponding diagrams can be derived directly from a description.

The project is written primarily in Python, and documentation and community are maintained bilingually in English and Chinese, which can be relevant for questions or contributions. As a community project maintained by a single author or a small group, it differs from established diagramming tools with a larger ecosystem and broader support.

For Voyage Digital, the tool is more of a niche helper for technical documentation and architecture visualization than a widely established standard tool. Maturity and update frequency should be checked before any production use.

Strengths

12 visual styles

Eleven generator-backed profiles plus one AI-authored style (Dark Luxury) are available.

Full UML coverage

14 diagram types cover class, component, deployment, sequence and state diagrams, among others.

Geometry-safe routing

Deterministic orthogonal routing with fixed waypoints, automatic legend placement and verified bridge crossings.

Structured SVG validation

XML and marker integrity are checked along with nodes, labels, and edge overlaps or crossings.

Unified CLI with interactive export

Render, validate and inspect from one command, with export to a single offline HTML file featuring pan, zoom and themes.

40+ product icons

Brand-colored icons for providers such as OpenAI, Anthropic, Pinecone, Weaviate, Kafka and PostgreSQL are built in.

Assessment

AI features

Natural-language diagram generation A system description in English or Chinese is automatically translated into a diagram type and matching style.
Agent-driven validation loop The first render is treated as a candidate; a bounded feedback loop of deterministic and visual checks produces the verified result, with at most two targeted correction passes by default.
Visual readback Exported PNGs are checked for clipping, overlap, label placement and routing errors before a result counts as complete.
Built-in AI architecture patterns Patterns for RAG, agentic search, Mem0 and multi-agent flows are stored as domain knowledge and can be referenced directly.
Semantic shape and arrow vocabulary Components such as LLM, agent or vector store get fixed symbols, and arrow color and pattern encode write, read, async and loop relationships.

Suitable for

Developers and technical writers who want to generate architecture or UML diagrams from text descriptions instead of manually in a diagram editor
Teams that need diagrams of AI and agent architectures such as RAG, multi-agent or tool-call flows, using built-in patterns
Users of Claude Code or similar AI coding environments who want to integrate diagram generation directly as a skill
Less suitable for Less suitable for teams that need an established, widely supported diagramming standard with a large ecosystem

Limitations and notes

Community project Maintained by a single author or a small group; maturity and update frequency should be checked before production use.
Visual review not guaranteed If the runtime cannot read images, the visual review is skipped and explicitly marked as skipped in the status, rather than claiming an unverified pass.
Bounded self-correction The validation loop allows at most two targeted correction passes by default, which also limits automatic error fixing.
Built for skill integration The recommended installation wires the tool in as a skill for Claude Code or Codex; other environments require their own integration effort.

Quick start

Install the skill via the `skills` CLI for both runtimes at once: `npx -y [email protected] add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy`. This creates full copies at `~/.agents/skills/fireworks-tech-graph` (Codex) and `~/.claude/skills/fireworks-tech-graph` (Claude Code).
Alternatively, set up an editable Git checkout, for example for Claude Code with `git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph`.
Write the desired diagram as a natural-language description, for example "Generate a Mem0 memory architecture diagram, dark style"; the system selects the diagram type and style from it.
Receive the result as SVG and a 1920px PNG, and optionally validate it via the CLI or export it to an interactive HTML file.
Pull updates with `git -C ~/.claude/skills/fireworks-tech-graph pull` or by rerunning the `skills` CLI command.

Tips

For shared use by Codex and Claude Code, set up a single editable checkout and link it into both discovery paths with symlinks, instead of maintaining two separate copies.
State the scenario and desired style explicitly in the prompt, and include composition constraints such as maximum crossings, spacing and gutter width, for more consistent results.
Before production use, check the validation and visual-review status in the result instead of relying on the first render alone.
Check the repository's maturity and activity on GitHub before each use, since it is a community project without a fixed update cadence.

Access

fireworks-tech-graph is open source and free to use via GitHub. Installation typically involves cloning the repository into your own skill or project environment. A current look at github.com/yizhiyanhua-ai/fireworks-tech-graph is worthwhile to assess the project's maturity and activity level before use.