concept-diagrams

Name: concept-diagrams
Availability: InStock
Author: dawsonblock

Generate self-contained SVG diagrams as standalone HTML files with light/dark mode.

Updated Apr 26, 2026

Search Tags:#template #education #visualization #svg #design-system #diagram #dark-mode

Ready to run

npx skills add https://github.com/dawsonblock/HERMY --skill concept-diagrams-dawsonblock

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/dawsonblock/HERMY/tree/main/hermes-agent-2026.4.23/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/dawsonblock/HERMY --skill concept-diagrams-dawsonblock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate self-contained diagrams that render as standalone HTML files using a unified flat design system, enabling quick visualization without dependencies.

Core Features & Use Cases

Portable SVG diagrams rendered as HTML with built-in light/dark mode support
Predefined color ramps, typography rules, and responsive sizing for consistent visuals
Use cases include educational visuals, architectural sketches, physics diagrams, and hub-spoke system maps

Quick Start

Paste your SVG into the provided template and save as a standalone HTML file.

Frequently Asked Questions about concept-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate self-contained SVG diagrams with dark mode support?▼

Self-contained SVG diagrams with dark mode support are generated as standalone HTML files using a fixed template and frontmatter-driven metadata. This enforces predefined color ramps, typography rules, and validation rules to ensure proper layout and accessibility.

Can I create educational diagrams for physics and chemistry without external dependencies?▼

Educational diagrams for physics, chemistry, and engineering can be created without external dependencies. The system renders portable SVG visuals as standalone HTML files with built-in light and dark mode, ensuring quick visualization and safe execution.

How do I build a hub-spoke infrastructure diagram as a standalone HTML file?▼

Hub-spoke infrastructure diagrams are built by applying the fixed SVG template to your structural data. The system produces a single diagram or a gallery of diagrams rendered as standalone HTML files with responsive sizing and unified design system visuals.

Does this diagram template enforce accessibility and validation rules?▼

The diagram template enforces accessibility and validation rules to ensure proper layout and safe execution. It uses frontmatter-driven metadata, predefined color ramps, and optional resources like scripts and references to validate the final SVG output.

What is the best way to maintain a consistent design system across multiple architecture diagrams?▼

A consistent design system across multiple architecture diagrams is maintained through a fixed SVG template. It applies predefined color ramps, typography rules, and responsive sizing to generate a unified gallery of flat SVG visuals with light and dark mode support.

Do I need external scripts to render flat SVG diagrams as standalone HTML files?▼

External scripts are not required to render flat SVG diagrams as standalone HTML files. The system uses optional resources like scripts, references, and assets, but the final output is fully self-contained and portable without dependencies.