Fireworks Tech Graph
github.com/yizhiyanhua-ai/fireworks-tech-graph- Category
- Developer Tools
- Rank
- No. 253Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- yizhiyanhua-ai
- GitHub
- 11.3k stars
- Latest release
- v1.2.0
- Date
About
A Claude Code skill that generates production-quality SVG and PNG technical diagrams from natural language descriptions. Supports 8 diagram types, 7 visual styles, and specialized knowledge of AI/Agent domain patterns like RAG, Multi-Agent systems, and tool call flows.
What it does
Fireworks Tech Graph turns a written system description into a checked diagram through a staged pipeline: semantic modeling, style selection, route planning, SVG construction, structural validation, image inspection, and targeted correction. It can also produce static images, focused GIF motion, or a self-contained interactive HTML viewer.
Why it's ranked here
The strongest case is its emphasis on verifiable output rather than attractive rendering alone. It rejects malformed graph data, checks routing and label geometry, and limits automated correction to focused passes. Its engineering-specific contracts also make C4, deployment, event-stream, and reliability diagrams more disciplined than free-form illustration.
What's good
The canonical SVG carries semantic metadata, while deterministic layout checks cover nodes, labels, reserved regions, boundaries, crossings, and overlapping routes. Interactive exports reject active elements and external references. Static diagrams do not require the optional Chromium motion stack, and the same skill payload supports both Codex and Claude Code.
Tradeoffs
The motion path is deliberately narrow. It accepts generated semantic SVGs matching approved scene contracts, so arbitrary same-style topologies can fail validation. GIF generation also requires Python, Node.js, FFmpeg, a compatible Chromium installation, and Puppeteer Core. The roadmap still lists incremental layout for diagrams above 100 edges and browser-based text measurement as future candidates.
How to use it well
Use it when architecture documentation needs repeatable diagrams with machine-checked geometry and consistent visual conventions. Start from a precise scenario, choose the relevant engineering profile, then treat the first render as a candidate for validation and visual readback. It does not replace a general vector editor, unrestricted animation system, or collaborative diagram canvas.
Technical notes+
README.md describes the bounded prompt-to-contract-to-IR-to-render validation loop and optional visual readback. docs/CAPABILITIES.md specifies schema v1 normalization, fail-closed semantic profiles, deterministic rectilinear routing, SVG metadata, sanitized offline HTML, and CairoSVG or rsvg-convert PNG export. package.json exposes an npm CLI package, requires Node.js 18 or newer, and declares a Python unittest suite. scripts/motion.py defines the Python-side semantic motion contracts, validation limits, frame schedules, and GIF probing workflow. scripts/svg2gif.js implements the Node-side frame schedules and per-style stream behavior used by the optional Chromium renderer.
Observed
- License
- MIT
- Primary language
- Python, with JavaScript used for SVG-to-GIF rendering
- Packaging
- Agent Skill payload plus an npm package with a command-line executable
- Interfaces
- Agent Skill, unified CLI, and self-contained offline HTML viewer
- Agent platforms
- Codex and Claude Code
- Runtime support
- Python 3.9 or newer; Node.js 18 or newer for optional Chromium motion rendering
- Testing structure
- The npm test command runs Python unittest discovery from the tests directory
- Motion dependencies
- GIF generation requires FFmpeg and Puppeteer Core; static SVG, PNG, and HTML workflows do not
Read from README.md, package.json, docs/ROADMAP.md, docs/CAPABILITIES.md, docs/releases/README.md, docs/releases/v1.0.0.md, docs/releases/v1.0.1.md, docs/releases/v1.0.2.md, docs/releases/v1.0.3.md, docs/releases/v1.0.4.md, docs/releases/v1.0.5.md, docs/releases/v1.1.0.md, docs/releases/v1.2.0.md, scripts/motion.py, scripts/svg2gif.js.
What it can do
Generate technical diagrams from natural language descriptions
Text description in English or Chinese → SVG and PNG diagram files
Create RAG (Retrieval-Augmented Generation) system diagrams
Natural language description of RAG architecture → Technical diagram showing RAG components and flow
Generate multi-agent system diagrams
Description of multi-agent system architecture → Visual diagram of agent interactions and relationships
Create tool call flow diagrams
Description of tool call sequences and processes → Flow diagram showing tool call execution paths
Apply visual styling to diagrams
Diagram content and style preference → Styled diagram in one of 7 available visual styles
Convert diagrams between formats
Diagram data → Both SVG and PNG format versions
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.