skills.rest
loteiron
loteironCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

concept-diagrams

Generate flat, minimal educational SVG diagrams as self-contained HTML files.

Updated Sep 10, 2026
Search Tags:#education#html#design system#flowchart#visualization#SVG#diagram
One-click install
npx skills add https://github.com/loteiron/ZeusAgent --skill concept-diagrams-loteiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/loteiron/ZeusAgent/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/loteiron/ZeusAgent --skill concept-diagrams-loteiron

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating clean, consistent educational diagrams usually requires design tools or manual SVG work. This Skill produces production-quality SVG visuals with a unified flat design system, rendered as a single HTML file that opens in any browser with automatic light and dark mode. ## Core Features & Use Cases - Unified Design System: Nine color ramps, fixed typography, spacing rules, and arrow markers ensure every diagram looks consistent without design decisions. - Eight Diagram Types: Flowcharts, structural containment, API maps, microservice topologies, data flows, physical objects, infrastructure hub-spoke layouts, and dashboard mockups. - 15 Tested Examples: Ready-made patterns for aircraft structures, chemistry mechanisms, floor plans, CPU microarchitecture, electricity grids, and more. - Use Case: Ask for a diagram of an SN2 reaction mechanism and receive a standalone HTML file with molecules, curved arrows, and an energy profile that you open directly in a browser. ## Quick Start Generate a concept diagram of a wind turbine cross-section as a standalone HTML file I can open in my browser.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I generate an SVG diagram as an HTML file?▼

Choose a diagram type, lay out components using the design system rules, then paste the SVG into the provided template.html wrapper. Save the result as a standalone .html file and open it directly in any modern browser with no server or dependencies.

What diagram types can this SVG skill create?▼

It supports flowcharts, structural containment diagrams, API endpoint maps, microservice topologies, data flows, physical objects like aircraft and turbines, infrastructure hub-spoke layouts, and UI dashboard mockups. Fifteen tested examples ship in the examples directory.

Does the SVG output support dark mode?▼

Yes, all colors auto-adapt via CSS classes provided by the template page. Light mode uses light fills with dark strokes, while dark mode inverts the mapping automatically, so no per-mode SVG variants are needed.

When should I use a different diagram tool instead?▼

Prefer a dedicated architecture-diagram skill for dark tech-aesthetic cloud infrastructure, an excalidraw-style skill for hand-drawn whiteboard sketches, or an animation tool for video explainers. This skill serves as a general-purpose fallback with a clean educational aesthetic.

Why does my SVG connector render as a black filled shape?▼

SVG paths default to fill: black, so every connector path or line used as an arrow must explicitly set fill="none". The validation checklist in the skill requires this on all connectors before finalizing output.

Related Skills

Explore More Design & Creative Skills→
danieldekaydanieldekay
1

scientific-schematics

Generate publication-quality scientific diagrams from natural language descriptions.

Community
Advanced
l0lxl0lwl0lxl0lw

make-html

Generate self-contained HTML explainer pages with inline SVG diagrams from investigation findings.

Community
Intermediate
snake-dev-teamsnake-dev-team

ck:preview

Preview files and directories and generate diagrams and slides from text.

Official
Advanced
akashagl92akashagl92

Art

Generate hand-drawn Excalidraw-style visuals on dark backgrounds via CLI.

Community
Advanced