yizhiyanhua-ai/fireworks-tech-graph

Generate production-quality SVG+PNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.

What it solves

fireworks-tech-graph removes the need to draw technical diagrams by hand. It allows users to describe a system architecture or flow in natural language (English or Chinese) and automatically generates polished, geometry-checked diagrams in SVG, PNG, and interactive HTML formats, as well as semantic GIF animations.

How it works

The project operates as an Agent Skill for AI assistants like Codex and Claude Code. It follows a bounded validation loop to ensure quality:

  1. Generation: It converts a natural language prompt into a semantic Intermediate Representation (IR) and then into an SVG.
  2. Deterministic Validation: It checks the XML structure, marker integrity, and path geometry to prevent errors like overlapping edges or malformed waypoints.
  3. Perceptual Validation: It renders the SVG to a PNG and performs a visual readback to inspect for clipping, label collisions, and routing quality.
  4. Targeted Revision: If errors are found, the system performs focused corrections on specific coordinates or labels before final delivery.

Who it’s for

  • Software Engineers: For creating C4 reviews, cloud deployment maps, and event-driven architecture diagrams.
  • AI/Agent Developers: For visualizing RAG pipelines, multi-agent collaborations, and memory architectures.
  • Technical Writers: For generating consistent, high-quality documentation visuals without manual drawing tools.

Highlights

  • 12 Visual Styles: Includes 11 generator-backed styles and one AI-authored "Dark Luxury" style.
  • Engineering Contracts: Enforces strict rules for specific diagram types (e.g., C4, Cloud Fabric, Event Transit) to ensure technical accuracy.
  • Comprehensive Support: Supports 14 UML diagram types and specialized AI/Agent domain patterns (e.g., Mem0, Tool Call flows).
  • Semantic Motion: Converts SVGs into GIFs where connectors draw in a specific semantic order with a "settled-flow" timeline.
  • Geometry-Safe Routing: Uses deterministic orthogonal routes to avoid line crossings and minimize bends.
  • Interactive Exports: Generates offline HTML files with pan/zoom, theme switching, and multiple export formats.

Related

  • Project
    GiMi-Xiaomi/gimi-illustration-skill

    An AI Agent Skill that converts text articles and scripts into conceptual illustrations using customizable styles and consistent character IPs.

  • Project
    plannotator/effective-html

    A collection of agent skills that enable AI agents to generate self-contained HTML artifacts like wireframes, prototypes, and diagrams for better visual communication.

  • Project
    inkboard/system-atlas

    An agent skill that converts architecture discussions into a single-source-of-truth data file, generating both an interactive isometric map and a synchronized text document.

  • Project
    Agents365-ai/drawio-skill

    A skill that converts natural language, codebases, and infrastructure configurations into professional, editable .drawio diagrams with automated layout.

  • Project
    op7418/guizang-ppt-skill

    An AI agent skill for generating professional single-file HTML presentations with built-in presenter mode and two distinct high-end visual styles.