concept-diagrams

name	concept-diagrams
description	Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software/cloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.
version	0.1.0
author	v1k22 (original PR), ported into sonic-agent
license	MIT
dependencies	[]
platforms	["linux","macos","windows"]
metadata	{"sonic":{"tags":["diagrams","svg","visualization","education","physics","chemistry","engineering"],"related_skills":["architecture-diagram","excalidraw","generative-widgets"]}}

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")

The template embeds the full CSS design system (c-* color classes, text classes, light/dark variables, arrow marker styles). The SVG you generate relies on these classes being present on the hosting page.

---

Design System

Philosophy

• Flat: no gradients, drop shadows, blur, glow, or neon effects.