concept-diagrams
Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
Concept Diagrams generates clean, minimal SVG educational visuals as standalone HTML files that work in any browser.
AI-generated summary based on this skill's SKILL.md
Install
NousResearch/hermes-agent/concept-diagrams · repository language: Python
git clone https://github.com/NousResearch/hermes-agent
cp -r hermes-agent/optional-skills/creative/concept-diagrams ~/.claude/skills/concept-diagramsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can concept-diagrams generate SVG diagrams for education?
Yes. Concept Diagrams produces production-quality SVG visuals designed specifically for educational use. The skill generates self-contained HTML files that render complete diagrams in any modern browser—no server or external dependencies required. Output includes automatic light and dark mode support, making diagrams accessible across different viewing contexts.
What types of diagrams can concept-diagrams create?
Concept Diagrams excels at flowcharts, process pipelines, system architecture layouts, physics mechanisms, chemistry reaction visuals, anatomy cross-sections, floor plans, and technical infrastructure drawings. The skill uses a unified flat, minimal design system across all diagram types, ensuring consistent visual quality whether you're illustrating microservice topologies, data ETL flows, IoT networks, or educational concept illustrations.
How does concept-diagrams handle light and dark mode?
Concept Diagrams automatically detects the user's system theme preference and renders diagrams in the appropriate mode. The flat, minimal design system supports both light and dark variants seamlessly within a single self-contained HTML output file. No configuration or manual switching is needed—the diagram adapts to the viewer's browser settings.
What output format does concept-diagrams produce?
Concept Diagrams generates a single self-contained HTML file containing embedded SVG markup. This file requires no server, build process, or external dependencies to display. Simply open it in any modern browser to view production-quality diagrams with full interactivity and theme support built in.
Is concept-diagrams suitable for technical system diagrams?
Yes. Concept Diagrams is designed to handle technical system architecture, infrastructure integration, hardware pipelines, and microservice topology visualizations. The skill produces clear, minimal flat-design diagrams that communicate complex technical relationships effectively while maintaining visual simplicity and professional presentation.
What license does concept-diagrams use?
Concept Diagrams is released under the MIT license, allowing free use, modification, and distribution in both personal and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
optional-skills/creative/concept-diagrams/SKILL.md
optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md
optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md
optional-skills/creative/concept-diagrams/examples/autonomous-llm-research-agent-flow.md
optional-skills/creative/concept-diagrams/examples/banana-journey-tree-to-smoothie.md
optional-skills/creative/concept-diagrams/examples/commercial-aircraft-structure.md
optional-skills/creative/concept-diagrams/examples/cpu-ooo-microarchitecture.md
optional-skills/creative/concept-diagrams/examples/electricity-grid-flow.md
optional-skills/creative/concept-diagrams/examples/feature-film-production-pipeline.md
optional-skills/creative/concept-diagrams/examples/hospital-emergency-department-flow.md
optional-skills/creative/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md
optional-skills/creative/concept-diagrams/examples/place-order-uml-sequence.md
optional-skills/creative/concept-diagrams/examples/smart-city-infrastructure.md
optional-skills/creative/concept-diagrams/examples/smartphone-layer-anatomy.md
optional-skills/creative/concept-diagrams/examples/sn2-reaction-mechanism.md