What problem does it solve? Creating clean, consistent educational diagrams usually requires design tools or manual SVG work. This Skill generates production-quality SVG diagrams with a unified flat design system, output as a single self-contained HTML file that renders in any browser with automatic light/dark mode. ## Core Features & Use Cases - Unified design system: 9 semantic color ramps, sentence-case typography, fixed spacing rules, and CSS classes that auto-adapt to light and dark mode. - Eight diagram types: Flowcharts, structural/containment layouts, API maps, microservice topologies, data flows, physical objects, hub-spoke infrastructure, and dashboard mockups. - 15 tested examples: Ready-made patterns for aircraft structures, chemistry mechanisms, floor plans, CPU pipelines, electricity grids, narrative journeys, and more. - Use Case: Ask for a diagram of an SN2 reaction mechanism, and receive a standalone HTML file with molecules, curved arrows, and an energy profile that you open directly in a browser. ## Quick Start Ask the agent to generate a concept diagram of your subject, for example: create a diagram showing the lifecycle of a banana from tree to smoothie as a standalone HTML file.
