concept-diagrams

Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files.

Updated Apr 9, 2026

Search Tags:#education #svg #dark mode #generate #diagram design #standalone html #chemistry mechanism

Ready to run

npx skills add https://github.com/MarbleSodas/Mavis --skill concept-diagrams-marblesodas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/MarbleSodas/Mavis/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/MarbleSodas/Mavis --skill concept-diagrams-marblesodas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the friction of hand-designing consistent educational diagrams by generating a unified, minimal SVG/HTML visual style that works well in both light and dark mode.

Core Features & Use Cases

Standalone educational SVG output: Produces flat, minimal, production-quality SVG embedded in a single self-contained HTML file (no server, no dependencies for rendering).
Unified design system: Enforces consistent typography, spacing, stroke widths, and a 9-ramp semantic color language so diagrams look coherent across topics.
Diagram coverage via patterns: Best for textbook-style visuals such as physics setups, chemistry mechanisms, math curves, anatomy/cross-sections, floor plans, narrative journeys, hub-and-spoke system integrations (IoT/smart city), and exploded layer views (with 15 example diagrams included).

Quick Start

Use the concept-diagrams skill to generate an SN2 reaction mechanism and save it as a standalone HTML file you can open in your 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 educational SVG diagrams for chemistry mechanisms?▼

You can generate educational SVG diagrams by using this Skill to output flat, minimal SVG visuals embedded in a standalone HTML file. It applies a unified design system with sentence-case typography and a 9-ramp semantic color language for chemistry mechanisms and other educational topics.

What is the best way to create light and dark mode physics diagrams without external dependencies?▼

Creating light and dark mode physics diagrams without dependencies is best achieved by generating a standalone HTML file with embedded SVG. This Skill renders offline without a server, enforcing fixed stroke and spacing rules for coherent visuals across modes.

Can I use this tool to draw anatomy cross-sections and floor plans?▼

Yes, you can draw anatomy cross-sections and floor plans. This Skill generates textbook-style visuals including anatomy, cross-sections, floor plans, and narrative journeys, providing a fallback general SVG diagram output for topics outside these core patterns.

Does the generated standalone HTML file require any rendering dependencies?▼

No, the generated standalone HTML file requires no rendering dependencies. The SVG diagram output is entirely self-contained, allowing you to open it directly in any browser for offline use without needing a server or additional software libraries.

How do I ensure my educational diagrams have a consistent design system across different topics?▼

You can ensure educational diagrams have a consistent design system across different topics because this Skill enforces sentence-case typography, fixed stroke widths, and a 9-ramp semantic color language. This unified styling applies automatically to physics setups, chemistry mechanisms, and exploded layer views.