skills.rest
jleechanorg
jleechanorgOFFICIAL
Explore all skills by this author →
GitHub

concept-diagrams

Generate standardized SVG diagrams from subject briefs.

Updated Jun 28, 2026
Search Tags:#education#templates#visualization#svg#diagrams#concept-diagrams
One-click install
npx skills add https://github.com/jleechanorg/hermes-agent --skill concept-diagrams-jleechanorg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/jleechanorg/hermes-agent/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/jleechanorg/hermes-agent --skill concept-diagrams-jleechanorg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating consistent, high-quality diagrams across educational materials used to require manual drawing or multiple tools; Concept Diagrams provides a unified, frontmatter-driven system to generate flat, light/dark-aware SVG diagrams that render as standalone HTML files.

Core Features & Use Cases

  • Production-ready SVG diagrams with a single-source template and a unified educational visual language.
  • Supports a broad subject range (physics, chemistry, engineering, anatomy, floor plans, and more) for quick diagram creation.
  • Ships with 15 example diagrams to illustrate patterns and accelerate diagram authoring.
  • Optional resource directories (scripts/references/assets) can be leveraged to extend functionality.

Quick Start

Paste your subject SVG into the hosting template to render a ready-to-preview diagram.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I generate standardized SVG diagrams for educational materials?▼

To generate standardized SVG diagrams for educational materials, provide a subject brief to the system, which outputs ready-to-render SVG files using a unified visual language and template-based rendering pipeline.

Can I create scientific and engineering schematics across different subjects?▼

Yes, you can create scientific and engineering schematics across physics, chemistry, biology, engineering, and information design, as the system supports a broad subject range for quick diagram creation.

What is the best way to render SVG diagrams as standalone HTML files?▼

The best way to render SVG diagrams as standalone HTML files is to paste your subject SVG into the provided hosting template, which outputs a ready-to-preview diagram.

How do I extend diagram functionality with custom resources?▼

You extend diagram functionality with custom resources by leveraging optional directories for scripts, references, and assets to supply additional data or logic to the rendering pipeline.

Are there example diagrams available to help author educational visuals?▼

Yes, 15 example diagrams are included to illustrate authoring patterns and accelerate the creation of educational visuals across various supported subjects.

Related Skills

Explore More Design & Creative Skills→
jolequesjoleques

workflow-init-bounded-context

Collect service paths, create symlinks, and generate a context.md document.

Community
Intermediate
Yangel-hideYangel-hide

concept-diagrams

Create standalone HTML/SVG diagrams for multiple educational disciplines with light/dark mode support.

Community
Intermediate
Cuki2910Cuki2910
1

_svg-drawing

Convert SVG source code into PNG images for visual feedback.

Community
Basic
BAIZ1DBAIZ1D

draw

Create vector diagrams and convert between ODG, SVG, PDF, and PNG formats.

Community
Intermediate