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 wrapper, paste your SVG where the template says <!-- PASTE SVG HERE -->.
4. Save as a standalone .html file (for example ~/my-diagram.html or ./my-diagram.html).
5. User opens it directly in a browser, no server, no dependencies.

Optional: if the user wants a browsable gallery of multiple diagrams, see "Local Preview Server" at the bottom.

Load the HTML template:

skill_view(name="concept-diagrams", file_path="templates/template.html")