fireworks-tech-graph is an agent skill that turns a plain description, in English or Chinese, into a technical diagram. It runs unchanged in Codex and Claude Code, classifies the diagram type and style from the request, and writes SVG, a high-resolution PNG, an animated GIF, or one offline interactive HTML file.
Diagrams are built from a versioned semantic intermediate representation rather than drawn freehand. Nodes and edges are typed, routing is deterministic and orthogonal with exact waypoints and distinct ports, and labels and legends are relocated to avoid collisions. Duplicate identifiers, dangling references, malformed waypoints, and non-finite geometry fail before anything renders.
The first render is treated as a candidate. Deterministic checks run first on XML and marker integrity, path geometry, node semantics, reserved regions, label placement, canvas bounds, and edge overlaps and crossings. The exported PNG is then read back to inspect clipping, label collisions, hierarchy, whitespace, and routing quality, and at most two focused correction passes run by default before the status reports validation: passed and visual_review: passed. When the runtime cannot read images, it reports visual_review: skipped rather than claiming a visual check happened.
Twelve visual styles ship, eleven of them generator-backed profiles and one, Dark Luxury, AI-authored. Four styles carry an engineering contract on top of the visual theme: a C4 review canvas, a multi-region cloud deployment map, an event-rail transit map, and a reliability pulse built on golden signals. Coverage spans all 14 UML diagram types alongside AI and agent patterns such as RAG, agentic search, memory architectures, multi-agent collaboration, and tool-call flows.
Rendering needs Python 3.9 or newer plus cairosvg or rsvg-convert for PNG, and the Chromium path through Puppeteer stays available for higher fidelity. GIF export additionally needs FFmpeg and Chromium, and the default output is a 960px, 5.75-second, 20fps, 115-frame infinite loop written with a verification report beside it.
Features
- Natural-language input: English or Chinese descriptions, triggering on phrases such as draw, visualize, or architecture diagram
- 12 visual styles: 11 generator-backed profiles plus the AI-authored Dark Luxury style
- 14 UML diagram types: class, component, deployment, package, composite structure, object, use case, activity, state machine, sequence, communication, timing, interaction overview, and entity relationship
- AI and agent patterns: RAG, agentic search, memory architectures, multi-agent collaboration, and tool-call flows
- Semantic shape vocabulary: a double-border rectangle for a model, a hexagon for an agent, a ringed cylinder for a vector store
- Semantic arrows: color and dash pattern encode write, read, async, and loop
- Geometry-safe routing: orthogonal routes with exact waypoints, distinct ports, automatic legend relocation, and verified bridge jumps for unavoidable crossings
- Composition contract: budgets on crossings, bends per edge, route stretch, spacing, gutters, micro-segments, and label clearance are enforced for every official style
- Engineering semantic contracts: C4 abstraction levels, deployment ownership, event-rail topology, and golden signals fail closed before rendering
- Validation loop: structural checks, then PNG readback for visual review, bounded to two correction passes
- Export formats: SVG, 1920px PNG, validated GIF motion, and an offline HTML file with pan, zoom, themes, source copy, and 1× to 4× downloads
- Product icons: more than 40 brand marks with correct colors, inline as SVG with no external fetch
