Skip to content
Get packs

Fireworks Tech Graph

Makes the agent draw precise SVG technical diagrams and export them as PNG, offline HTML or GIF

Source Download skill
Repository
yizhiyanhua-ai/fireworks-tech-graph
Stars
11,922
Licence
MIT
Files
10 files

What it does

Once installed, the agent can turn a description of a system into a technical diagram such as architecture, UML, cloud, agent or workflow diagrams. The SVG file is the main output, and the skill adds steps to export it as a PNG image, a self-contained offline HTML page with pan and zoom, or an animated GIF. The skill asks the agent to check labels, connectors and layout with bundled Python scripts rather than trusting a successful render alone.

Great for

  • Engineers who want architecture or sequence-style diagrams drawn from a text brief
  • Documentation writers who need clean SVG and PNG figures for a README or slide deck
  • Teams who want diagrams that stay editable as SVG source

Skip it if

  • Photos, raster art or statistical charts, which the skill description explicitly excludes
  • Diagrams where facts about systems are unknown, since the skill warns against inventing responsibilities, protocols or metrics and the output is only as accurate as the brief

Try asking

  • “Draw an architecture diagram of our API gateway, three microservices and a Postgres database, export it as PNG at 1920 wide”
  • “Make a UML sequence diagram of the login flow and export an offline HTML version”
  • “Animate this SVG architecture diagram to a GIF”
Step-by-step guide: how to use Fireworks Tech GraphInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 10 original files, the MIT licence and an attribution note.

    fireworks-tech-graph.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip fireworks-tech-graph.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip fireworks-tech-graph.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for the exact labels you need and use strict text policy so no text is silently truncated
  • Review the exported PNG at reading size, since the skill itself says a successful command is not a visual quality verdict
  • Run the validate, render and check steps on a copy first to see what the scripts write to disk

What's inside

  • CHANGELOG.md
  • CONTRIBUTING.md
  • index.html
  • package.json
  • README.md
  • README.zh.md
  • robots.txt
  • SECURITY.md
  • sitemap.xml
  • SKILL.md

Redistributed unmodified from yizhiyanhua-ai/fireworks-tech-graph under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.