fireworks-tech-graph skill for Claude: SVG technical diagrams

Makes Claude Code or Codex draw architecture, UML and agent diagrams as SVG files and export PNG, HTML or GIF. For developers who document systems.

Installs: 18.2K; on skills.sh
Stars: 11.9K; on GitHub
Updated: Oct 2026; last commit

fireworks-tech-graph makes your agent turn a plain description into an SVG diagram, check it for overlaps and missing labels, and export a PNG, an offline interactive HTML file or an animated GIF. It offers 12 visual styles and covers architecture, UML, agent, cloud and workflow diagrams. It is not for photos, raster art or statistical charts.

It loads when you ask for a technical diagram. The agent runs bundled Python scripts on your machine, and PNG export needs a renderer such as cairosvg installed. GIF export also needs FFmpeg, Chrome or Chromium and puppeteer-core.

Good for

Engineers drawing architecture, cloud or event-flow diagrams
AI builders diagramming agents, memory and tool-call flows
Writers who need diagrams for docs, slides or blog posts
Claude Code and Codex users who can run Python locally

Install fireworks-tech-graph

Claude Code

Copy this prompt.

Install the fireworks-tech-graph skill in Claude Code. Run this command:

npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent claude-code -g -y --copy

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js, Python 3.9 or newer.

The README lists cairosvg (or rsvg-convert) for PNG export, and FFmpeg, Chrome or Chromium and puppeteer-core only for the optional GIF export. SVG and HTML export need none of them.

From the project README. Source.

What's in the skill

When it loads

Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or workflow diagrams; not photos, raster art or statistical charts.

Sections in SKILL.md

Locate and select
Generate and check
Additional outputs
Verify the requested outcome

Key facts

Author: yizhiyanhua-ai
License: MIT
Installs on skills.sh: 18,155 (Nov 2, 2026)
GitHub stars: 11,907 for the whole repo (Nov 2, 2026)
Last commit: Oct 21, 2026
Files: 295 files in the repo; the install route copies the 139-file nested skills/fireworks-tech-graph folder
Works in: Codex and Claude Code
Needs: Python 3.9+; cairosvg or rsvg-convert for PNG; Node.js 22.12+, FFmpeg, Chrome or Chromium and puppeteer-core for GIF
Styles: 12 (11 with JSON generators, Dark Luxury written by the agent)

What it includes

Print the installed version and skill folder
Run when you ask which version is installed or where the skill came from.
Runs code · version
Check for missing renderers, fonts or dependencies
Run only to diagnose a problem. Tells apart SVG and HTML support from the optional PNG and GIF parts.
Runs code · doctor
Check a JSON diagram description before drawing
Validates the input for a diagram type such as architecture.
Runs code · validate
Draw an SVG from the JSON description
Writes the SVG and an optional layout report. Styles 1 to 7 and 9 to 12 have generators; style 8 is written by the agent.
Try: “Draw a microservices architecture diagram in blueprint style.”
Runs code · render
Test the SVG for collisions and structure
Checks identity, arrow markers, collisions, geometry and layout. The skill says a pass is not a verdict on visual quality.
Runs code · check
Make a PNG up to the width you set
Reads the canvas size, limits output size, writes the file safely and reads the pixel size back.
Runs code · export-png
Make one offline interactive HTML file
Gives pan and zoom, source copy and image downloads in a single sanitized file.
Runs code · export-html
Turn a supported SVG into a GIF
Triggered by asking for a GIF or animation. Default is 960px, 20fps and 5.75 seconds, with a motion report file.
Try: “Animate this diagram as a GIF.”
Runs code · animate
Look at the final PNG and fix defects
The agent inspects text, contrast, clipping, arrow direction and spacing, or says the visual check was skipped if it cannot view images.
Read · Visual check

From the official docs

Permissions

Medium risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs bundled Python and Node scripts
The agent runs fireworks.py and, for GIF export, a Node script that drives headless Chrome. motion-effects.md says Chrome's sandbox is on by default and turning it off takes FIREWORKS_CHROME_NO_SANDBOX=1, which SECURITY.md reserves for isolated runtimes. png-export.md says the converter blocks external network requests. Approve commands you do not recognise. github.com
The README asks you to install packages
PNG export uses pip install cairosvg or a system package. GIF export uses FFmpeg and npm install of puppeteer-core with --ignore-scripts. png-export.md's alternate Puppeteer route runs a plain npm install puppeteer into /tmp/fireworks-tech-graph-puppeteer, without that flag. Install packages yourself rather than letting the agent choose. github.com
It writes files into your working folder
SVG, PNG, HTML, GIF and report files are created where the agent runs. Run it in a folder you do not mind adding files to. github.com

Technical details

Talks to	Package registries when you install cairosvg, librsvg, FFmpeg or puppeteer-core as the README describes
Sign-in and keys	No credentials are described.

Questions

What does fireworks-tech-graph do?

It makes your agent draw technical diagrams as SVG from a plain description, check them, and export PNG, offline HTML or GIF. It covers architecture, UML, agent, cloud and workflow diagrams in 12 styles.

How do I install it in Claude Code or Codex?

Use the install box above. The README says to use the nested skills/fireworks-tech-graph path, because a bare repository install can pick up only the root SKILL.md. After installing, restart the agent.

Does it work in the Claude app or ChatGPT?

The README names Codex and Claude Code only. It does not document uploading the skill to the Claude app, and the skill runs local Python scripts.

Does it need an API key?

No key is listed in the README or SKILL.md. It needs Python 3.9 or newer, and a renderer such as cairosvg to export PNG files.

Is it safe to install?

It runs bundled Python and, for GIF export, Node and a headless browser on your machine, and the README tells you to install packages for them. Approve installs yourself, and keep the browser sandbox on unless you have an isolated setup.

What extra software does it need?

PNG export needs cairosvg or rsvg-convert. GIF export needs Node.js 22.12 or newer, FFmpeg and FFprobe, Chrome or Chromium and puppeteer-core. SVG and offline HTML export are listed as working without them.

Will it publish or send my diagram anywhere?

The skill says publication or remote delivery needs its own authorization from you and is not covered by drawing the diagram. It describes the HTML export as a single offline file.

Information

updated Nov 2, 2026

Repository: yizhiyanhua-ai/fireworks-tech-graph

yizhiyanhua-ai/fireworks-tech-graph skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

fireworks-tech-graph README · github.com
fireworks-tech-graph SKILL.md · github.com
fireworks-tech-graph SECURITY.md · github.com
png-export.md · github.com
motion-effects.md · github.com