Fireworks Tech Graph
Generate architecture, flow, sequence, and concept diagrams as validated SVG with PNG export when you need visuals for specs or docs.
Overview
fireworks-tech-graph is an agent skill most often used in Build (also Validate, Idea) that generates technical diagrams and exports SVG plus PNG from structured templates and helper scripts.
Install
npx skills add https://github.com/yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graphWhat is this skill?
- Covers architecture, data flow, flowchart, sequence, agent/memory, and concept map styles
- Exports production SVG plus PNG via cairosvg, rsvg-convert, or puppeteer
- Four helper scripts in scripts/ including generate-diagram.sh and generate-from-template.py
- Bilingual triggers: 画图, 架构图, flowchart, draw diagram, visualize
- Install from GitHub with npx skills add yizhiyanhua-ai/fireworks-tech-graph
- 4 helper scripts in scripts/
- 3 PNG export paths: cairosvg, rsvg-convert, puppeteer
Adoption & trust: 9.2k installs on skills.sh; 7.5k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You can describe your system in chat but lack fast, consistent architecture and flow visuals for specs, investors, or teammates.
Who is it for?
Indie builders who document systems in markdown and want agent-driven diagrams with scriptable export pipelines.
Skip if: Teams that need polished marketing creative or Figma-grade UI mockups without technical diagram semantics.
When should I use this skill?
User asks to 画图, draw/generate a diagram, visualize architecture or flow, or describes a system they want illustrated.
What do I get? / Deliverables
You receive validated SVG diagrams and PNG exports ready to drop into docs, decks, or repos without redrawing in a separate design tool.
- Validated SVG diagram files
- Exported PNG assets
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Fireworks Tech Graph is shelved under Build/docs because technical diagrams most often ship inside READMEs, ADRs, and onboarding material alongside code. Docs captures diagram workflows that explain systems—architecture, data flow, and agent/memory maps—rather than production UI mockups alone.
Where it fits
Sketch a concept map of competitor integrations before you commit to an API surface.
Publish a sequence diagram that explains how your MVP agent calls external memory.
Regenerate an architecture SVG after you split a monolith into two services.
Export a clean data-flow PNG for a launch blog post explaining privacy boundaries.
How it compares
Use this for engineer-facing SVG system diagrams instead of generic whiteboard image generators.
Common Questions / FAQ
Who is fireworks-tech-graph for?
It is for solo developers and technical founders who need architecture, flow, and sequence visuals embedded in documentation and validation artifacts.
When should I use fireworks-tech-graph?
Use it in Idea when mapping a concept, in Validate when illustrating a prototype architecture, and in Build when updating ADRs and README diagrams—whenever you say 画图, draw diagram, or visualize a flow.
Is fireworks-tech-graph safe to install?
The skill runs local Python/shell helpers and optional headless renderers; review the Security Audits panel on this page before running scripts on sensitive repos.
SKILL.md
READMESKILL.md - Fireworks Tech Graph
# Fireworks Tech Graph Generate production-quality SVG technical diagrams exported as PNG via `cairosvg` (recommended), `rsvg-convert`, or `puppeteer`. ## Install Source Install this skill from GitHub: ```bash npx skills add yizhiyanhua-ai/fireworks-tech-graph ``` Public package page: ```text https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph ``` Do not pass `@yizhiyanhua-ai/fireworks-tech-graph` directly to `skills add`, because the CLI expects a GitHub or local repository source. Update command: ```bash npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y ``` ## Helper Scripts (Recommended) Four helper scripts in `scripts/` directory provide stable SVG generation and validation: ### 1. `generate-diagram.sh` - Validate SVG + export PNG ```bash ./scripts/generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg ``` - Validates an existing SVG file - Exports PNG after validation - Example: `./scripts/generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg` ### 2. `generate-from-template.py` - Create starter SVG from template ```bash python3 ./scripts/generate-from-template.py architecture ./output/arch.svg '{"title":"My Diagram","nodes":[],"arrows":[]}' ``` - Loads a built-in SVG template - Renders nodes, arrows, and legend entries from JSON input - Escapes text content to keep output XML-valid ### 3. `validate-svg.sh` - Validate SVG syntax ```bash ./scripts/validate-svg.sh <svg-file> ``` - Checks XML syntax - Verifies tag balance - Validates marker references - Checks attribute completeness - Validates path data ### 4. `test-all-styles.sh` - Batch test all styles ```bash ./scripts/test-all-styles.sh ``` - Tests multiple diagram sizes - Validates all generated SVGs - Generates test report **When to use scripts:** - Use scripts when generating complex SVGs to avoid syntax errors - Scripts provide automatic validation and error reporting - Recommended for production diagrams **When to generate SVG directly:** - Simple diagrams with few elements - Quick prototypes - When you need full control over SVG structure ## Workflow (Always Follow This Order) 1. **Classify** the diagram type (see Diagram Types below) 2. **Extract structure** — identify layers, nodes, edges, flows, and semantic groups from user description 3. **Plan layout** — apply the layout rules for the diagram type 4. **Load style reference** — always load `references/style-1-flat-icon.md` unless user specifies another; load the matching `references/style-N.md` for exact color tokens and SVG patterns 5. **Map nodes to shapes** — use Shape Vocabulary below 6. **Check icon needs** — load `references/icons.md` for known products 7. **Write SVG** with adaptive strategy (see SVG Generation Strategy below) 8. **Validate**: Run `python3 -c "import xml.etree.ElementTree as ET; ET.parse('file.svg')"` to check XML syntax 9. **Export PNG**: Use `cairosvg` (recommended). See **SVG → PNG Conversion** section below for full method comparison 10. **Report** the generated file paths 11. **(Optional) Visual self-review** — if your runtime can read images, load the exported PNG back and inspect it. Syntactic validity does not guarantee visual correctness: arrows may cross through component interiors, labels may collide with lifelines or other labels, boxes may overlap, alt-frame text may sit on top of a message, or a legend may cover content. If you see any of these, revise the SVG and re-export; repeat until the rendered image is clean. Common fixes: - Route arrows through gaps between boxes, not through box interiors - Move arrow labels 6-8px a