SkillFoxx

Type a name, a task or a service

Fireworks Tech Graph

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

Skill

Low risk

We rate an entry low when it mostly gives the agent instructions and reference material.

Why this level

  • The skill runs locally with rendering scripts and does not send data out
All reasons and checks

yizhiyanhua-ai/fireworks-tech-graphAuthor:yizhiyanhua-ai

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/fireworks-tech-graph

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Assembled automatically, review before installing.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a claude-code -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .claude/skills
cp -R "$tmp/skills/fireworks-tech-graph" .claude/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a cursor -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .agents/skills
cp -R "$tmp/skills/fireworks-tech-graph" .agents/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a github-copilot -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .github/skills
cp -R "$tmp/skills/fireworks-tech-graph" .github/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a codex -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .agents/skills
cp -R "$tmp/skills/fireworks-tech-graph" .agents/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a gemini-cli -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .agents/skills
cp -R "$tmp/skills/fireworks-tech-graph" .agents/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .devin/skills
cp -R "$tmp/skills/fireworks-tech-graph" .devin/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Formerly Windsurf.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a cline -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .cline/skills
cp -R "$tmp/skills/fireworks-tech-graph" .cline/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a roo -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .roo/skills
cp -R "$tmp/skills/fireworks-tech-graph" .roo/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

A fork of Roo Code, same .roo folders.

Run in a terminal in the project folder

npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph -a opencode -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 31fea36
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .agents/skills
cp -R "$tmp/skills/fireworks-tech-graph" .agents/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .agents/skills
cp -R "$tmp/skills/fireworks-tech-graph" .agents/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/fireworks-tech-graph/
git -C "$tmp" checkout 31fea364eda5f1852b1175f3d9e29ea31d22dcb4
mkdir -p .agents/skills
cp -R "$tmp/skills/fireworks-tech-graph" .agents/skills/fireworks-tech-graph

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 26, 2026, commit 31fea36.

Text for your agent

Install the skill with: npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent claude-code -g -y --copy

Other ways from the author
npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy

Copies the skill in full, with scripts and references, into ~/.claude/skills and ~/.agents/skills.

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 PNG

Limitations

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.

Security check

  • The skill runs locally with rendering scripts and does not send data out

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.

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.

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.

Editors’ pick

A skills library that gives coding agents a development process: brainstorming, planning, TDD, subagents and code review

PluginMedium riskNo VPN needed292.5K
Editors’ pick

Small composable skills for engineering with agents: plan grilling, TDD, bug diagnosis, code review and architecture

SkillLow risk271.4K
Editors’ pick

GitHub toolkit for spec-driven development: the specify CLI adds agent commands and skills to a project, from principles to implementation

CLIMedium riskNo VPN needed139.3K

Reference MCP servers

Model Context Protocol servers

Official

Official reference MCP servers: Filesystem, Fetch, Git, Memory, Sequential Thinking, Time and Everything

MCP serverMedium risk90.6K
Foxx AIFireworks Tech Graph

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.