Fireworks Tech Graph skill
fireworks-tech-graph
A skill that builds technical SVG diagrams from a text description: architecture, UML, agent and cloud schemes, with PNG and GIF export
- 11,981 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill runs locally with rendering scripts and does not send data out
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/fireworks-tech-graphDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill runs locally with rendering scripts and does not send data out
This is third-party code. Review the repository files before installing.
What it does
The agent describes a system in words, and the skill turns it into a geometrically correct SVG diagram through a Python script with validation: it checks line crossings, label readability and adherence to the chosen style. It supports 12 visual styles and up to 14 diagram types, including UML and cloud architecture. The result can be exported to PNG, a standalone zoomable HTML file, or an animated GIF.
Who it is for. For developers and technical writers who need architecture and process diagrams without manual editor work.
Good fit when
- You need an architecture diagram for documentation
- You need a UML diagram or an agent-workflow schema
- You need an animated GIF showing a data-flow schema
Not a fit when
- You need a photorealistic illustration or raster art
- You need a statistical chart or data dashboard
Example request
Draw an architecture diagram of this service in cloud fabric style and export it to PNGLimitations
Some styles use JSON generators with fixed templates; one style (Dark Luxury) is assembled by the agent by hand. PNG export and offline HTML depend on system rendering dependencies checked by the doctor command.
How to disable. Remove the fireworks-tech-graph folder from ~/.claude/skills or ~/.agents/skills.
FAQ
Can it be used in both Codex and Claude Code?
Yes, the same SKILL.md works for both runtimes; the README describes a shared git checkout symlinked into both skill folders.
How do I check the skill is set up correctly?
The python3 scripts/fireworks.py doctor command checks for the renderer, fonts and optional PNG/GIF dependencies.
Discussion
No questions or reviews yet.
Related
SkillsSkill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style
stack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.
Builds interactive architecture diagrams in one HTML file: animated data flows, environment toggles and a step detail panel
A skill that renders a system architecture as one HTML page with pan, zoom, node focus and a light or dark theme.
A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks
A skill that turns code into interactive diagrams: eleven types, source-line evidence and a single offline HTML file.
README in short
The README describes the skill as a single tool for Codex and Claude Code that builds SVG from a text brief through a Python script with validate, render, check and export stages. There is a matrix of 12 styles and references for diagram types, icons and composition quality. The recommended install is the skills CLI command with a nested skill path; a git-checkout-with-symlinks option covers sharing between both agents.
README badge
Original SKILL.md
---
name: fireworks-tech-graph
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.
---
# 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.