skills.rest
AlexiosBluffMara
AlexiosBluffMaraCOMMUNITY
Explore all skills by this author →
GitHub

concept-diagrams

Generate standalone SVG concept diagrams from YAML-frontmatter templates.

2|Updated Apr 25, 2026
Search Tags:#education#templates#learning#visualization#svg#frontmatter#diagram
One-click install
npx skills add https://github.com/AlexiosBluffMara/mercury --skill concept-diagrams-alexiosbluffmara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/AlexiosBluffMara/mercury/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/AlexiosBluffMara/mercury --skill concept-diagrams-alexiosbluffmara

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate self-contained SVG concept diagrams from subject content using a YAML frontmatter-driven template, reducing setup time for educational visuals.

Core Features & Use Cases

  • Flat, minimal visuals with automatic dark-mode readiness and a unified typography system.
  • Workflow-friendly templates for a wide range of subjects (physics, chemistry, biology, engineering, architecture) and supporting resources.
  • Reusable SVG boilerplate that renders offline as a standalone HTML file when pasted into the template.
  • Use case: quickly produce an explainer diagram for a science concept or a system architecture overview.

Quick Start

Generate a standalone SVG concept diagram using the built-in templates and paste your subject content.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I generate SVG concept diagrams from educational content?▼

To generate SVG concept diagrams, you use a YAML frontmatter-driven template that converts subject content into self-contained, flat SVG visuals. The template requires a root YAML block with name and description fields to structure the educational content.

Can I create dark-mode compatible diagrams for physics and chemistry topics?▼

Yes, you can create dark-mode compatible diagrams for physics, chemistry, biology, engineering, and architecture. The template provides flat, minimal visuals with automatic dark-mode readiness and a unified typography system.

Do I need any external dependencies to render SVG diagrams offline?▼

No external dependencies are required to render SVG diagrams offline. The reusable SVG boilerplate renders as a standalone HTML file when pasted into the template, ensuring self-contained offline functionality.

What's the best way to structure YAML frontmatter for educational visualization templates?▼

Structure YAML frontmatter by placing name and description fields at the root level. You can also specify optional resource directories alongside the shared SVG boilerplate to fully configure your educational visualization template.

Are flat SVG diagrams suitable for system architecture overviews?▼

Yes, flat SVG diagrams are suitable for system architecture overviews and science concepts. The workflow-friendly templates provide consistent, minimal visuals that effectively explain complex systems across multiple technical subjects.

Related Skills

Explore More Education & Research Skills→
mguinadamguinada

vitest

Identify valid Skill Units and extract metadata into a YAML document.

Community
Advanced
xiaoquqixiaoquqi

architecture-diagram

Generate standalone HTML/SVG architecture diagrams from component descriptions.

Community
Intermediate
mambisimambisi

poco-templates

Create and optimize pocopine .poco templates with SVG namespace support.

Community
Intermediate
nexu-ionexu-io
8.2k

card-twitter

Generate 16:9 Twitter share cards from quotes and author data.

Official
Intermediate