What problem does it solve? Creating consistent, well-designed technical diagrams by hand is slow and error-prone, and generic diagram generators produce visually inconsistent output that clashes with a project's brand. This Skill produces editorial-quality diagrams as standalone HTML/SVG/PNG files following an opinionated, skinnable design system. ## Core Features & Use Cases - 39 visual types: architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, radar, polar, loop, tree, org chart, layer stack, Venn, pyramid, treemap, bar, line, Gantt, scatter, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, database schema, and more. - Brand onboarding: pull style tokens from a website URL, an installed skill, a local folder, or manual input, and save them as named client profiles. - Import and redraw: convert .drawio, .drawio.png, .drawio.svg, or Mermaid .mmd sources into the design system at a chosen size and detail level, using the deterministic drawio_extract.py parser. - Optional accessible motion: add reveal, step, or loop animation with reduced-motion fallbacks and keyboard controls. - Use Case: Ask for an architecture diagram of your content site, and receive a self-contained HTML file with inline SVG, brand-matched colors, a legend strip, and summary cards ready to share or export to PNG. ## Quick Start Ask the assistant to create an architecture diagram of your system using the diagram-design skill, and confirm the visual type and size preset before it draws.
