English | 中文

Release history · Changelog

fireworks-tech-graph

Stop drawing diagrams by hand. Describe your system in English or Chinese — get geometry-safe SVG, PNG, focused SVG-to-GIF motion, and offline interactive technical diagrams.

---

Overview

fireworks-tech-graph is one Agent Skill that works unchanged in Codex and Claude Code. It turns natural language descriptions into polished, geometry-checked SVG diagrams, high-resolution PNGs, validated SVG-to-GIF semantic motion, and offline interactive HTML. The focused animation path accepts a generated semantic SVG and emits one compact, probed GIF. It ships with 11 generator-backed styles and 1 AI-authored style (Dark Luxury). Four engineering-first styles add executable contracts for C4 reviews, cloud deployments, event streams, and reliability investigations, alongside deep AI/Agent domain patterns and all 14 UML diagram types.

User: "Generate a Mem0 memory architecture diagram, dark style"
  → Skill classifies: Memory Architecture Diagram, Style 2
  → Generates SVG with swim lanes, cylinders, semantic arrows
  → Exports 1920px PNG
  → Reports: mem0-architecture.svg / mem0-architecture.png

---

Work With the Builder

This project is also a proof surface for a broader capability: turning vague AI/devtool workflows into constrained, reusable systems with validation, documentation, export paths, and product-facing polish.

If you are building agent infrastructure, AI IDEs, internal copilots, developer tools, technical documentation systems, or applied AI workflow products, I am open to scoped paid sprints, design-partner work, and founding engineer conversations.

• Founder-facing profile: https://bradzhang.dev/en
• Commercial case study: https://bradzhang.dev/en/case-studies/fireworks-tech-graph
• Work with me: https://bradzhang.dev/en/work-with-me

---

Showcase

The animated previews use the user-approved 5.75-second settled-flow timeline: routes draw in first, then the final topology keeps live data moving for two additional seconds. Each full-size GIF is 960px wide at 20fps / 115 frames; the 3×4 overview is an optimized 1200px preview. Lossless 1920px PNGs remain in assets/samples/ as static regression baselines.

The v1.2.0 overview above and every full-size animated sample below come from the approved regression set. Each style keeps a distinct scenario while sharing the same geometry, text-fit, wire-routing, and semantic-motion quality gates.

Style 1 — Flat Icon (default)

Mem0 Memory Architecture — personal-memory extraction, conflict resolution, storage, and retrieval

Style 2 — Dark Terminal

Tool Call Flow — dark terminal execution, source grounding, retrieval, and answer synthesis

Style 3 — Blueprint

Microservices Architecture — engineering grid, domain services, data stores, events, and telemetry

Style 4 — Notion Clean

Agent Memory Types — minimal hierarchy from sensory and working context to durable memory

Style 5 — Glassmorphism

Multi-Agent Collaboration — coordinator, specialists, shared state, review, and synthesis

Style 6 — Claude Official

System Architecture — warm interface, runtime, safety, memory, tools, and operations layers

Style 7 — OpenAI Official

API Integration Flow — clean SDK, prompt, model, tool, delivery, and release stages

Style 8 — Dark Luxury (AI-authored)

Agent Runtime Architecture — control plane, execution and state layers, champagne-gold structure, semantic color buckets

Style 9 — C4 Review Canvas

Checkout Container Review — one abstraction level, explicit responsibilities, technologies, and protocols

Style 10 — Cloud Fabric

Active–Active Checkout Deployment — global ingress, regions, VPC ownership, and cross-region replication

Style 11 — Event Transit

Checkout Event Line — topics as rails, processors as stations, a declared junction, DLQ, and state projection

Style 12 — Ops Pulse

Checkout Reliability Pulse — golden signals, one critical path, OTel export, and a correlated trace

---

Stable Prompt Recipe

The public showcase keeps a distinct domain scene for every style. They remain comparable because every fixture passes the same executable composition contract. A same-topology regression set remains internal under fixtures/quality-baseline/.

Draw the scenario assigned to style N:
1 Mem0 Memory Architecture; 2 Tool Call Flow; 3 Microservices Architecture;
4 Agent Memory Types; 5 Multi-Agent Collaboration; 6 System Architecture;
7 API Integration Flow; 8 Agent Runtime Architecture; 9 C4 Checkout Review;
10 Active–Active Cloud Deployment; 11 Checkout Event Line; 12 Checkout Reliability Pulse.
Preserve the scenario-specific nodes, sections, and reading direction.
Apply the showcase composition contract: zero crossings, zero bridge jumps, at most two bends per edge,
at most eight bends overall, at least 40px between nodes, at least 20px container gutter,
short orthogonal segments, and labels kept clear of nodes, routes, and section headers.
Preserve the selected style's typography, palette, card material, and brand details.

For the four engineering-first styles, use one of these prompt fingerprints so the router selects the domain contract as well as the visual theme:

Style 9 · C4 review board: show one C4 level, responsibilities, technologies, review state, and relationship protocols.
Style 10 · Multi-region deployment map: show global ingress, Region/VPC ownership, neutral cloud glyphs, deployment mode, and named boundary mechanisms.
Style 11 · Event metro map: show thin topic rails, numbered processor stations, declared junctions, consumer groups, DLQ, and state projections.
Style 12 · Reliability pulse: show one observation window, four golden signals per service, numbered critical hops, telemetry export, and one correlated trace.

Replace N with 1–12. Style 8 remains AI-authored and loads references/style-8-dark-luxury.md; Styles 9–12 also enforce their engineering semantic contract. All styles load references/composition-quality-contract.md.

---

Features

• 12 visual styles — 11 generator-backed profiles + 1 AI-authored style (Dark Luxury)
• Engineering semantic contracts — C4 abstraction levels, deployment ownership, event-rail topology, and exact golden signals fail closed before rendering
• Executable style system — style guides are encoded into the generator, not only documented in markdown
• Shared composition-quality contract — every official style enforces zero crossings/bridges, ≤2 bends per edge, route-stretch, spacing, gutter, micro-segment, and label-clearance budgets
• 14 diagram types — Full UML support (Class, Component, Deployment, Package, Composite Structure, Object, Use Case, Activity, State Machine, Sequence, Communication, Timing, Interaction Overview, ER Diagram) plus AI/Agent domain diagrams
• AI/Agent domain patterns — RAG, Agentic Search, Mem0, Multi-Agent, Tool Call, and more built-in
• Semantic shape vocabulary — LLM = double-border rect, Agent = hexagon, Vector Store = ringed cylinder
• Semantic arrow system — color + dash pattern encode meaning (write vs read vs async vs loop)
• Geometry-safe routing — deterministic orthogonal routes, exact waypoints, distinct ports, automatic legend relocation, labels kept inside the canvas, and verified bridge jumps for unavoidable crossings
• Versioned diagram IR — legacy JSON normalizes to schema v1; duplicate IDs, dangling references, malformed waypoints, and non-finite geometry fail before rendering
• Structured SVG validation — XML and marker integrity plus semantic node, reserved-region, label, canvas, edge-overlap, and edge-crossing checks
• Unified CLI + interactive export — render, validate, inspect, and export one offline HTML file with pan/zoom, themes, copy, and SVG/PNG/JPEG/WebP output up to 4×
• Focused semantic GIF motion — generated SVG in, validated GIF out; connectors begin absent and draw in semantic order. All twelve style contracts are user-approved. The shared +2s-settled-flow timing revision is also user-approved, so the default 5.75s/115-frame loop holds full settled flow on frames 38–109, then resets on 110–114
• Visual review gate — exported PNGs are inspected for clipping, overlap, label placement, and routing regressions before delivery
• Product icons — 40+ products with brand colors: OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL…
• Swim lane grouping — automatic layer labeling for complex architectures
• SVG + PNG output — SVG for editing, 1920px PNG for embedding
• Renderer-friendly — pure inline SVG, no external font fetching; renders cleanly in cairosvg, rsvg-convert, and headless Chrome

---

Loop Engineering

The first render is treated as a candidate, not an automatic final result. fireworks-tech-graph uses an agent-driven, bounded validation feedback loop to move each diagram toward a verified deliverable:

Prompt
  → Diagram Contract
  → Semantic IR
  → Style Spec
  → Route Planner
  → SVG Build
  → Structural Validation
  → PNG Visual Readback
  → Targeted Revision
  → Verified SVG + PNG

The loop follows five design principles:

1. Evaluate, don't assert — completion is backed by validator and render evidence, not by the model saying the diagram looks correct.
2. Deterministic checks first — XML structure, marker integrity, path geometry, arrow-component collisions, and renderability are checked before visual judgment.
3. Perceptual validation second — the exported PNG is read back to inspect clipping, label collisions, hierarchy, whitespace, and routing quality that syntax checks cannot see.
4. Targeted correction — each pass changes only the diagnosed labels, coordinates, corridors, or spacing, then reruns validation and rendering.
5. Bounded convergence — visual review allows at most two focused correction passes by default, preventing an unbounded self-editing loop.

The loop is observable in the final status:

validation: passed
visual_review: passed

If the runtime cannot read images, the skill reports visual_review: skipped (image reader unavailable) explicitly.