back
loading skill details...
Create technical diagrams such as software architecture, data flow, flowcharts, sequence diagrams, agent/memory systems, UML, ER, network topology, timelines,…
Fireworks Tech Graph
Generate production-quality SVG technical diagrams exported as PNG via cairosvg (recommended), rsvg-convert, or puppeteer.
Runtime Compatibility
Use this repository unchanged in both Codex and Claude Code. It follows the Agent Skills layout: SKILL.md is the shared entry point, bundled resources use relative paths, and agents/openai.yaml adds optional Codex UI metadata without affecting Claude Code.
Before reading a reference or running a script, resolve the directory containing this SKILL.md as SKILL_ROOT. Do not assume the current working directory is the skill directory, and do not assume a variable set in one shell call persists into the next.
In Claude Code, use ${CLAUDE_SKILL_DIR}.
In Codex, use the absolute skill directory shown in the loaded skill metadata.
Every command block below sets SKILL_ROOT itself. In Codex, replace /absolute/path/from-codex-skill-metadata with the absolute skill directory before running the command.
Helper Scripts (Recommended)
Four helper scripts in scripts/ directory provide stable SVG generation and validation:don't have the plugin yet? install it then click "run inline in claude" again.