What problem does it solve? Creating consistent, well-designed technical diagrams by hand is slow and often produces generic-looking output. This Skill generates editorial-quality diagrams as self-contained HTML files with inline SVG, enforcing a coherent design system, layout rules, and complexity budgets across 41 visual types. ## Core Features & Use Cases - 41 Visual Types: Architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, radar, Sankey, Wardley map, Gantt, kanban, user journey, UML class, database schema, and more, each with a dedicated layout reference. - Skinnable Design System: Semantic color roles, typography ramp, and brand profiles that can be customized from a website URL, local design system, or pasted tokens, with saved client profiles. - Import & Export: Import .drawio, .excalidraw, and Mermaid files via deterministic extraction scripts, and export diagrams to PNG or SVG with verification tooling. - Use Case: Ask for an architecture diagram of your content platform and receive a branded HTML/SVG file with orthogonal connectors, masked arrow labels, a legend strip, and an accessibility-ready SVG structure. ## Quick Start Ask the assistant to create an architecture diagram of your system as a branded HTML/SVG file using the diagram-design skill.
