What problem does it solve? Creating consistent, well-designed technical diagrams is slow and error-prone: default tool output looks generic, connectors overlap, labels bleed through lines, and diagrams rarely match a project's brand. This Skill produces editorial-quality diagrams as self-contained HTML files with inline SVG, enforcing a strict design system, connector rules, and complexity budgets. ## Core Features & Use Cases - 40 visual types: architecture, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar, Gantt, Sankey, Wardley map, kanban, user journey, deployment, dependency graph, UML class, database schema, and more, each with a dedicated layout reference. - Import and redraw: convert .drawio/.drawio.png/.drawio.svg, Mermaid .mmd, and Excalidraw .excalidraw sources into the design system at a chosen size and detail level, using deterministic extraction scripts. - Brand onboarding and profiles: adopt brand tokens from a website, save reusable style profiles, and gate first use so default-skinned diagrams never ship into a branded project. - Optional accessible motion: add reveal, step, or loop animation with reduced-motion fallbacks, keyboard controls, and static export guarantees. - Use Case: Ask for a redraw of an existing draw.io architecture diagram as a branded HTML/SVG at presentation size; the Skill extracts the source structure, picks the right visual type, applies your saved brand profile, and outputs a self-contained file. ## Quick Start Create a branded architecture diagram of my web application showing the CDN, origin server, and database as a standalone HTML file.
