The author's Flat Icon animation of a Mem0 memory architecture, showing memory extraction, storage, and retrieval.
Project screenshotsAbout this Skill
Fireworks Tech Graph turns a natural-language brief into technical diagrams through one shared Skill for Codex and Claude Code. SVG is the main editable artifact. The project documents 12 visual styles: 11 use JSON generators, while Dark Luxury uses AI-authored SVG. Its workflow checks structure and geometry, then asks the agent to inspect the rendered image before delivery.
Why we picked it
A useful choice for explaining agent systems, cloud deployments, and event pipelines. Its workflow combines diagram generation with structural checks and visual review, with separate tools for static, interactive, and animated outputs. This listing links to the original MIT-licensed project; the three animations are the author's published examples.
What it helps with
- Explain RAG, memory, tool calls, or multi-agent architectures in technical documentation.
- Prepare cloud deployment, event-processing, C4 review, and reliability diagrams with explicit engineering facts.
- Create SVG and PNG diagrams for articles, slide decks, and design reviews.
- Share a standalone HTML diagram with pan, zoom, themes, and image export.
Outputs and visual styles
Use SVG for editable diagrams, PNG for embedding, or one offline HTML file for interactive viewing. The HTML viewer provides pan, zoom, reset, theme switching, SVG source copy, and static image downloads. Architecture, sequence, entity-relationship, and other technical diagrams use shared shapes, arrow roles, and layout rules.
Styles range from Flat Icon, Dark Terminal, and Blueprint to C4 Review Canvas, Cloud Fabric, Event Transit, and Ops Pulse. The last four add domain-specific requirements for responsibilities, boundaries, event topology, or observation data; provide those facts rather than asking the agent to invent them.
Official repository and installation guideOriginal Skill instructions
Install the complete original Skill
Keep the final /skills/fireworks-tech-graph segment in the installation source. The author warns that a bare repository installation can select only the root SKILL.md and omit supporting files. The documented command installs complete copies for Codex and Claude Code; use the official guide for platform-specific setup and optional export dependencies.
| Command | What it helps with |
|---|---|
npx -y skills add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy | Install the full nested Skill for the two documented hosts. |
Make your first technical diagram
Describe the system and reader
For example: draw an architecture diagram with a web frontend, API service, PostgreSQL database, and Redis cache. State the actual connections, important labels, and whether the result is for a document or a presentation.
Choose a style and output
Ask for a named style and the needed formats, such as Flat Icon SVG plus PNG, or Blueprint SVG plus offline HTML. Flat Icon is the documented default when no style preference is supplied.
Review the rendered result
Check exact labels, arrow direction, grouping, overlap, and readability at the intended display size. Split dense systems into an overview and a detail diagram when needed.
Checks and export tools
The bundled CLI can report the installed version, diagnose output dependencies, validate diagram inputs, render SVG, check SVG geometry, and export PNG or HTML. Run it from the actual installed Skill root using the paths in the author's guide.
Use text_policy: strict for JSON inputs when every label must remain fully visible. Structural checks are followed by image inspection; a successful command or a layout report alone does not establish visual quality.
Official repository and installation guideOriginal Skill instructionsOfficial visual quality guide
Animate supported diagram scenes
Ask for “Generate a GIF” or “让这张图动起来” to select the semantic SVG-to-GIF workflow. It animates supported scenes by drawing connections and showing live flow, and writes a motion report alongside the GIF. The documented default loop is 5.75 seconds at 20 fps.
Motion depends on the documented scene contracts, including roles, stages, colors, and routes. It is not promised for arbitrary diagrams that merely share a style. This gallery uses compressed copies of the author's showcase animations; GIF is the documented motion media format.
Official repository and installation guideOfficial SVG-to-GIF motion guide
Before you use it
- Use Codex or Claude Code with local file access and Python 3.9 or newer. The documented installer uses npx and the nested Skill path.
- PNG rendering needs CairoSVG or rsvg-convert. SVG generation and the standalone HTML export have separate capability checks in the doctor command.
- Optional GIF export needs Node.js 22.12 or newer, Chrome or Chromium, FFmpeg/FFprobe, and Puppeteer or puppeteer-core configured for the installed Skill.
- The repository is MIT-licensed and free to install. Agent or model usage may have separate charges. Review labels, relationships, and engineering assumptions before sharing a diagram.
Supported agents
Frequently asked questions
Is Fireworks Tech Graph free?
Yes. The original repository is MIT-licensed and free to install. Your Codex, Claude Code, or model provider may charge for usage; optional rendering dependencies need their own setup.
Can the exported HTML work offline?
The author documents a standalone offline HTML export with embedded SVG and viewing controls. Installation and agent/model operation have separate connectivity requirements.
Can every diagram become a GIF?
No. GIF export is constrained to supported semantic scenes and requires the optional browser and encoding dependencies. Read the motion guide before choosing an animated deliverable.
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
