Fireworks Tech Graph: A Deep-Dive Comparison of AI Diagramming Skills in 2026

The Flood of AI Diagramming Skills

If you've been following the agent skills ecosystem, you've probably noticed a pattern: diagramming and visualization skills are multiplying fast. In my Hermes Agent setup alone, there are currently six distinct skills that can, in one way or another, generate diagrams, charts, or visual representations:

Excalidraw — hand-drawn JSON diagrams for whiteboard-style sketches
architecture-diagram — dark-themed SVG infrastructure diagrams as HTML
FlowForge — draw.io XML with 13 layout algorithms and 5 themes
baoyu-infographic — 21 layouts × 21 styles infographic generator
graphify — knowledge graph extraction from code/docs (not really a diagramming tool, but adjacent)
fireworks-tech-graph — the newcomer with 4.9K installs and ambition to cover everything

When a new skill enters this crowded space, the natural question is: does it earn its place, or is it just another wrapper around SVG that we don't need? Today, I'm taking fireworks-tech-graph through a rigorous multi-angle analysis — and the results surprised me.

What Is Fireworks Tech Graph?

Fireworks Tech Graph is an open-source skill by yizhiyanhua-ai, installable via npx skills add yizhiyanhua-ai/fireworks-tech-graph. It generates production-quality SVG diagrams (exported to PNG via rsvg-convert) with a scope that is, frankly, staggering:

14 diagram types: Architecture, Data Flow, Flowchart, Agent Architecture, Memory Architecture, Sequence, Comparison Matrix, Timeline/Gantt, Mind Map, UML Class Diagram, Use Case Diagram, State Machine, ER Diagram, and Network Topology
7 visual styles: Flat Icon (white), Dark Terminal (#0f0f1a), Blueprint (#0a1628), Notion Clean, Glassmorphism, Claude Official (#f8f6f3), OpenAI Official (#ffffff)
Shape vocabulary: 17 semantic shape mappings (LLM = gradient rounded rect, Agent = hexagon, Memory tiers = dashed/solid rects + cylinders, Vector Store = gridded cylinder, etc.)
Arrow semantics: 7 arrow types with distinct color + dash conventions (primary data flow = blue solid, memory write = green dashed, async events = gray dotted, embedding transforms = purple, etc.)

But numbers are just numbers. Let's see how it actually stacks up.

Angle 1: Diagram Type Coverage

This is where fireworks-tech-graph pulls dramatically ahead.

Diagram Type	Excalidraw	Architecture Diagram	FlowForge	Fireworks Tech Graph
Architecture	✅	✅ (primary)	✅	✅
Data Flow	✅ (manual)	❌	✅	✅ (specialized)
Flowchart	✅	❌	✅ (12 layouts)	✅
Sequence	✅ (manual)	❌	✅	✅ (with lifelines)
Agent Architecture	❌	❌	❌	✅ (dedicated)
Memory Architecture	❌	❌	❌	✅ (Mem0/MemGPT)
UML Class	❌	❌	❌	✅ (full notation)
Use Case	❌	❌	❌	✅
State Machine	❌	❌	❌	✅
ER Diagram	❌	❌	❌	✅
Network Topology	❌	❌	❌	✅
Timeline/Gantt	❌	❌	✅	✅
Mind Map	❌	❌	❌	✅

FlowForge wins on layout variety within its supported types (snake flow, hub-and-spoke, matrix), but its scope is fundamentally "process and structure diagrams." Fireworks Tech Graph covers UML, network, agent internals, and memory systems — domains that no other single skill touches.

The agent architecture and memory architecture types are genuinely novel. They encode domain knowledge about how AI agents work (reasoning loops, short-term vs long-term memory, tool layer, episodic memory) directly into layout rules. FlowForge can draw these, but you have to design them from scratch; fireworks-tech-graph has the patterns baked in.

Angle 2: Visual Quality & Style

This is where the comparison gets nuanced. No single skill dominates.

excalidraw: The hand-drawn aesthetic is distinctive and approachable. Diagrams feel like whiteboard sketches, which is great for brainstorming and internal docs. But for formal blog posts or presentations, the "sketchy" look can feel unpolished.

architecture-diagram: The dark-themed SVG with JetBrains Mono font and pulsing dot indicators looks stunning. The double-rect masking technique (opaque background + semi-transparent overlay) is clever. But it only works for one aesthetic — dark tech-infra — and the "three summary cards below the diagram" pattern is opinionated to the point of being rigid.

FlowForge: draw.io's rendering engine produces the most "professional" looking output of any tool here. The 5 themes with 10 semantic colors each give real control over the visual language. The "4+6 rule" and color budget system are the most thoughtful color design guidelines I've seen in any diagramming skill. The downside: draw.io XML is verbose and fragile, and rendering requires opening the file in an external app.

fireworks-tech-graph: SVG output with proper markers, gradients, drop shadows, and 7 style variants. The Flat Icon style on white background looks excellent for blogs and docs. The Claude Official (#f8f6f3) and OpenAI Official styles are a nice touch — they let you generate diagrams that feel native to those ecosystems. The arrow semantics system (blue for data, green for memory R/W, purple for embedding) makes multi-path diagrams immediately readable without a legend in most cases.

Winner depends on use case: FlowForge for formal architecture docs, excalidraw for whiteboard sketches, fireworks-tech-graph for blog-ready technical diagrams.

Angle 3: Technical Depth & Correctness

This is where fireworks-tech-graph shows its engineering maturity.

The skill mandates a Python list method for SVG generation — building SVG line by line through Python lists rather than writing raw SVG strings — specifically to prevent character truncation, typo-triggered tag mismatches, and syntax errors. It's an annoying extra step, but after generating dozens of AI-produced SVGs that silently broke on rsvg-convert, I understand why it's necessary.

Other technical highlights:

Jump-over arcs for line crossings: when two arrows must cross, the spec mandates a 5px semicircle "bridge" to prevent visual overlap. This is the kind of detail that separates "technically correct" from "actually usable" diagrams.
Arrow labels with background rects: every arrow label gets a semi-transparent background rect matching the canvas color, so labels remain readable when they land on top of shapes or other arrows. FlowForge and excalidraw don't mandate this — you can get unreadable labels in dense diagrams.
Self-review loop: after generating and validating the SVG, the skill recommends loading the exported PNG back for visual inspection. Syntactic validity ≠ visual correctness. This is a workflow insight from someone who's been burned by "valid but ugly" diagrams before.
Error recovery protocol: first error → targeted fix; second error → switch method entirely; third error → stop and report. No infinite retry loops. The pre-tool-call checklist ("Can I write out the COMPLETE command right now?") is practical AI agent hygiene.

FlowForge also has strong quality checks (14 validation rules covering overlap, alignment, text fit, XML correctness), but they're check-after-generation rather than prevent-during-generation.

Angle 4: Ecosystem & Integration

Here's where the comparison gets honest about the current state.

Excalidraw and architecture-diagram are built-in Hermes skills, first-class citizens with guaranteed compatibility. You load them with skill_view(), follow the spec, write the file, done.

FlowForge and graphify are personal skills in ~/.hermes/personal-skills/, maintained via git sync. They work reliably but require the sync workflow to be healthy.

fireworks-tech-graph installed to ~/.agents/skills/, the npx skills add ecosystem directory. This is where friction emerges:

Dual skill directories: Hermes skills live in ~/.hermes/skills/ or ~/.hermes/personal-skills/. The npx skills add CLI installs to ~/.agents/skills/. The skills_list tool won't show fireworks-tech-graph unless you've configured Hermes to scan both directories.
rsvg-convert dependency: firework-tech-graph's PNG export requires rsvg-convert (from librsvg). This is a system-level dependency that npx skills add won't check or install. On macOS, brew install librsvg; on Linux, apt install librsvg2-bin.
Cross-tool visibility: the skill's helper scripts (validate-svg.sh, generate-from-template.py) assume you're working from the skill's directory. Hermes sessions usually run from project directories, so scripts need absolute paths.

None of these are deal-breakers, but they add friction that built-in skills don't have. For a skill that promises "production-quality" output, the one-time setup tax is reasonable; for quick one-off diagrams, excalidraw or FlowForge are lower-friction.

Angle 5: Learning Curve & UX

excalidraw: Easiest. Write JSON, save as .excalidraw, drag to excalidraw.com. No external tools needed. The skill doc is 200 lines, entirely self-contained.

architecture-diagram: Moderate. The template HTML is substantial, but the "generate once, open in browser" workflow is simple. The color palette is hardcoded — you don't need to learn a theming system.

FlowForge: Steepest. You must understand 13 layout algorithms, coordinate math, theme files, XML element templates, and the ASCII sketch confirmation workflow. The skill doc is 500+ lines with 10 supporting files. It produces excellent output, but the learning investment is real.

fireworks-tech-graph: Moderate-to-steep. You need to internalize 14+ diagram types, shape vocabulary, arrow semantics, 7 styles, the Python list generation method, and validation + PNG export. The SKILL.md alone is 441 lines. However, if you're already comfortable writing SVG for AI-generated diagrams, the incremental learning is mostly "where do I put the labels and which colors do I use."

Should You Add It to Your Toolbox?

After thorough comparison, here's my recommendation matrix:

Add fireworks-tech-graph if you:

Regularly create architecture or data flow diagrams for blog posts or docs
Need UML diagrams (class, use case, state machine) and don't want to use dedicated UML tools
Write about AI agent internals, memory systems, or RAG pipelines — the dedicated diagram types save hours
Want SVG output that embeds cleanly in markdown-based static sites (like this blog)
Value arrow semantics as a first-class design element (different arrow types = different meanings, not just different colors)

Stick with excalidraw if you:

Need hand-drawn whiteboard aesthetics
Want the fastest path from idea to diagram (no rsvg-convert, no styles to choose)
Are diagramming for internal team docs where "professional polish" isn't required

Stick with FlowForge if you:

Already use draw.io in your workflow
Need fine-grained control over layout algorithms
Want output that can be further edited in a GUI (draw.io desktop app)
Prefer Chinese-labeled diagrams (FlowForge has explicit bilingual support)

Stick with architecture-diagram if you:

Only ever make dark-themed cloud/infrastructure diagrams
Love the summary cards below the diagram as a design pattern
Want a single-file HTML deliverable with no PNG conversion step

The Real Win: Complementary, Not Competitive

After spending hours with all six skills, my conclusion is that they're better understood as a toolbox than a competition.

fireworks-tech-graph doesn't replace excalidraw — the hand-drawn aesthetic has a different purpose (internal communication vs public presentation). It doesn't replace FlowForge — draw.io's rendering engine and editable XML output serve a different audience. It doesn't replace graphify — knowledge graph extraction is a fundamentally different problem.

What it does is fill gaps:

UML diagrams that no other skill handles
Agent and memory architecture diagrams with domain-specific layout rules
Arrow semantics as a design system rather than an afterthought
7 styles spanning from "Notion clean" to "glassmorphism" to "vendor-official"

The skill ecosystem is maturing from "one skill to rule them all" to "specialized tools that compose well." Fireworks Tech Graph earns its place not by being better at everything, but by being the only skill that handles the specific, deep-technical diagram types that AI engineers and researchers actually need.

Install it. Learn the Python list method (you'll hate it at first, but you'll appreciate it when your SVGs stop silently breaking). Set up rsvg-convert. And then — this is the real insight — use it alongside your existing skills, not instead of them.

The best diagram is the one that communicates. The second-best is the one that was easy to make. Sometimes that's a 2-minute excalidraw sketch. Sometimes it's a 20-minute fireworks-tech-graph architecture diagram with memory tiers and arrow semantics. Your toolbox should let you choose.

Quick Start

# Install
npx skills add yizhiyanhua-ai/fireworks-tech-graph@fireworks-tech-graph -g -y

# Install PNG export dependency (macOS)
brew install librsvg

# Generate a diagram (example: RAG pipeline architecture)
# Load the skill: skill_view(name="fireworks-tech-graph")
# Follow the workflow: classify type → extract structure → plan layout → load style ref → write SVG → validate → export PNG

The skill is available on skills.sh and npm.