# Concept Diagrams

Create flat, minimal SVG explainer visuals as HTML.

- Repository: https://github.com/NousResearch/hermes-agent (259479 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add NousResearch/hermes-agent --skill concept-diagrams -g -a claude-code -y`
Codex: `npx skills add NousResearch/hermes-agent --skill concept-diagrams -g -a codex -y`
Cursor: `npx skills add NousResearch/hermes-agent --skill concept-diagrams -g -a cursor -y`
Gemini CLI: `npx skills add NousResearch/hermes-agent --skill concept-diagrams -g -a gemini-cli -y`

## Description

Generate flat, minimal educational SVG visuals as HTML.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 rest: https://github.com/NousResearch/hermes-agent/blob/HEAD/optional-skills/creative/concept-diagrams/SKILL.md