Technical Diagram Skill

Archify transforms plain-language descriptions or JSON specifications into self-contained, explorable HTML diagrams for system architecture, workflows, API sequences, data pipelines, and state machines. Output includes interactive features like pan/zoom, theme switching, and optional trace animation, with exports to SVG, PNG, JPEG, WebP, and WebM.

Fireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.

Dashmotion generates professional animated technical diagrams as single self-contained HTML+SVG files. Use it for flowcharts, workflows, architecture diagrams, and system topologies—especially when you want connectors that visibly flow and requests that travel as light dots through the system. Output is lightweight, loops forever, and opens in any browser without dependencies.

Mermaid to GIF transforms Mermaid diagram code into animated GIF files with four distinct animation styles tailored to different diagram types. Extract diagrams from .mmd files or markdown code blocks, then customize animation, theme, and rendering options to suit your presentation or documentation needs.

Architecture Diagram creates polished technical diagrams rendered as standalone HTML files with embedded SVG and CSS. It uses a dark color scheme with semantic styling for different component types—frontend, backend, database, cloud services, security, and messaging systems—making complex system layouts clear and visually consistent.

Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.