# Fireworks Tech Graph

Creates precise SVG technical diagrams and exports PNG, HTML, or animated GIF.

- Repository: https://github.com/yizhiyanhua-ai/fireworks-tech-graph (11907 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -g -a claude-code -y`
Codex: `npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -g -a codex -y`
Cursor: `npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -g -a cursor -y`
Gemini CLI: `npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Fireworks Tech Graph

One portable Agent Skill for Codex and Claude Code. SVG is the canonical artifact;
PNG, offline HTML and supported GIF motion are output routes. Preserve requested
labels, topology and meaning; a successful command is not a visual quality verdict.

## Locate and select

Resolve the directory containing this file as `SKILL_ROOT`. Use
`${CLAUDE_SKILL_DIR}` in Claude Code or the absolute directory in Codex's loaded
skill metadata. Do not assume cwd or a previous shell variable persists.

Use the installed version for the task. Run `version` for source/version questions
and `doctor` when diagnosing a missing renderer, font or dependency; do not make
installation, updates or a complete test suite prerequisites for every diagram.

```bash
SKILL_ROOT="${CLAUDE_SKILL_DIR:-/absolute/path/from-codex-skill-metadata}"
python3 "$SKILL_ROOT/scripts/fireworks.py" version
```

- Honor the user's diagram type, content and style; choose sensible reversible
  details from the brief. Ask only for a material missing engineering fact or
  a choice the user explicitly reserved. A request to draw includes local rendering.
- Styles 1, 7 and 9, 12 have JSON generators. Style 8 (Dark Luxury) remains
  AI-authored SVG: use its style reference, then the same validation/export gates.
- Default to Style 1 Flat Icon when no user/workspace preference applies. Load the
  actual matching file from [the style matrix](references/style-diagram-matrix.md).
  Read other styles only for a requested comparison.
- Styles 9, 12 default to C4, cloud, event and observability semantic contracts.
  Validate facts before layout; do not invent responsibilities, protocols or metrics.
- Adapt an existing valid SVG directly when appropriate. JSON generation is not
  required for every edit. Use [diagram/layout guidance](references/diagram-layout-reference.md)
  and [icons](references/icons.md) only for the relevant type or symbols.

## Generate and check

The rest: https://github.com/yizhiyanhua-ai/fireworks-tech-graph/blob/HEAD//SKILL.md