Agent skill · design visual · nousresearch
concept-diagrams
Generate flat, minimal educational SVG visuals as HTML.
Why this skill is useful
Provides a specific design system and templates for generating educational SVG diagrams that the AI wouldn't reliably create on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-08-07. 226,679 stars on the source repository.
What this skill does
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: The template embeds the full CSS design system (c- color classes, text classes, light/dark variables, arrow marker styles). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nousresearch/concept-diagrams