fireworks-tech-graph

yizhiyanhua-ai/fireworks-tech-graph

fireworks-tech-graph is a free, MIT-licensed skill for Codex and Claude Code that turns a description of a system into geometry-checked SVG diagrams, PNG exports, short animated GIFs and offline interactive HTML. It ships 12 visual styles, 14 diagram types including all UML types, and deep patterns for AI and agent architectures.

By yizhiyanhua-aiMIT licenseWorks with 2 agentsDesign and frontend

Facts checked on 14 October 2026 against the sources listed at the end of this page.

View on GitHub Install

GitHub stars: 11,717
Skills in the pack: 1
Agents supported: 2named in the README
License: MIT
Last commit: 1 month ago5 September 2026
Instruction size: 722 wordsacross its SKILL.md file

How to install fireworks-tech-graph

Agent Command Copy

Codex and Claude Code

Agent	Command	Copy
Codex and Claude Code	`npx -y [email protected] add \ yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \ --agent codex claude-code -g -y --copy` Use the nested skill path. Restart both runtimes afterwards.
Git checkout	`git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph` For Codex clone into ~/.agents/skills instead.

npx -y [email protected] add \
  yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \
  --agent codex claude-code -g -y --copy

Use the nested skill path. Restart both runtimes afterwards.

Git checkout

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph

For Codex clone into ~/.agents/skills instead.

Commands as given in the README on 14 October 2026.

What fireworks-tech-graph runs on your machine

Hooks: None found in the repo.
Bundled scripts: Yes. The skill runs Python 3.9 or newer scripts. PNG export needs cairosvg or rsvg-convert. GIF export also needs FFmpeg, Chrome or Chromium and puppeteer on Node 22.12 or newer.
Network calls: None needed. The SVG is pure inline with no external font fetching. Installing dependencies uses pip and npm.
API keys needed: None.

These are facts read from the repo, not a security rating. Read the files before you install any skill.

What is inside fireworks-tech-graph

Skill or command	What it makes the agent do
fireworks.py	The command line tool: version, doctor, validate, render, check, export-png, export-html and animate.
12 visual styles	Eleven generator-backed styles plus one AI-authored style, Dark Luxury.
Engineering styles	Four styles with contracts for C4 reviews, cloud deployments, event streams and reliability investigations.
Validation	Checks XML, markers, labels, canvas, edge overlap and edge crossings before output.
Motion	Turns a generated semantic SVG into one compact GIF.

The repo has one skill with scripts, schemas, fixtures and reference files. The list above describes its parts.

A good fit for

Engineers who document architecture, sequence flows or agent systems
Writers who need clean SVG or PNG diagrams for docs and articles
Anyone who wants UML in an agent without drawing by hand
People who want a short animated GIF of a system flow

Skip it if

Free-form whiteboard sketching, since the diagrams come from structured layouts
Machines without Python, where the scripts cannot run
Diagrams you want to edit by hand in a drawing app, since the output is SVG, PNG, GIF and HTML

How fireworks-tech-graph works

The generator checks its own output. Layout rules include at most eight bends per route, at least 40px between nodes and labels kept clear of nodes and routes. Setting text_policy to strict rejects visible truncation before a file is written.

The README carries sponsor blocks and a section where the maker offers paid work. They are separate from the skill.

Made by: yizhiyanhua-ai
Repo: yizhiyanhua-ai/fireworks-tech-graph
Topic: Design and frontend
Works with: Claude Code, Codex
Website: yizhiyanhua-ai.github.io

How much context fireworks-tech-graph uses

The skill	722 words in its SKILL.md file
Loaded at start	Only each skill's name and description. The full text loads when a task needs that skill.

Word counts are measured from the repo every day. Reference files a skill loads on demand are not counted.

Is fireworks-tech-graph still maintained?

Last commit	5 September 2026, 1 month ago
Latest release	v1.2.0, 17 July 2026
Stars gained in 7 days	Shown after 7 days of tracking
Stars gained in 30 days	Shown after 30 days of tracking
Open issues and pull requests	1
Forks	925

Tools fireworks-tech-graph works with

Claude CodeTool page

Similar skill packs

Archify

Turns a description or a repo into a checked, interactive HTML diagram of your system or workflow.

5 skills, 83.2k stars

Diagram Design

Makes on-brand diagrams and charts as HTML, SVG or PNG, in 42 visual types, matched to your site.

1 skill, 54.6k stars

Draw.io skill

One skill that makes editable draw.io diagrams from a description, code, infrastructure files or SQL.

1 skill, 10.1k stars

Questions about fireworks-tech-graph

What does it need installed?

Python 3.9 or newer, plus cairosvg or rsvg-convert for PNG. GIF export also needs FFmpeg, Chrome or Chromium and puppeteer.

Which agents does it work with?

Codex and Claude Code. The README gives one install that copies it to both.

Can I get a PNG?

Yes. The export-png command writes a PNG at the width you choose, 1920px in the README example.

Is it free?

Yes. It is MIT licensed.

Sources

Something wrong or out of date? Email [email protected] with a link to the source. Stats come from the public GitHub API and update every day.

For the maker

Add the badge to your README or site. The number updates every day.

Claim this page

Light

Dark

Markdown

[![fireworks-tech-graph on ScratchDB](https://scratchdb.com/badge/skills/fireworks-tech-graph.svg)](https://scratchdb.com/skills/fireworks-tech-graph/)

Markdown, dark

[![fireworks-tech-graph on ScratchDB](https://scratchdb.com/badge/skills/fireworks-tech-graph.svg?theme=dark)](https://scratchdb.com/skills/fireworks-tech-graph/)

HTML

<a href="https://scratchdb.com/skills/fireworks-tech-graph/"><img src="https://scratchdb.com/badge/skills/fireworks-tech-graph.svg" alt="fireworks-tech-graph on ScratchDB" width="290" height="52"></a>

Sharing on X? Open the share card with the pack's live numbers.