concept-diagramslisted

# Concept Diagrams Generate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light/dark mode. ## Scope **Best suited for:** - Physics setups, chemistry mechanisms, math curves, biology - Physical objects (aircraft, turbines, smartphones, mechanical watches, cells) - Anatomy, cross-sections, exploded layer views - Floor plans, architectural conversions - Narrative journeys (lifecycle of X, process of Y) - Hub-spoke system integrations (smart city, IoT networks, electricity grids) - Educational / textbook-style visuals in any domain - Quantitative charts (grouped bars, energy profiles) **Look elsewhere first for:** - Dedicated software / cloud infrastructure architecture with a dark tech aesthetic (consider `architecture-diagram` if available) - Hand-drawn whiteboard sketches (consider `excalidraw` if available) - Animated explainers or video output (consider an animation skill) If a more specialized skill is available for the subject, prefer that. If none fits, this skill can serve as a general-purpose SVG diagram fallback — the output will carry the clean educational aesthetic described below, which is a reasonable default for almost any subject. ## Workflow 1. Decide on the diagram type (see Diagram Types below). 2. Lay out components using the Design System rules. 3. Write the full HTML page using `templates/template.html` as the wrapp