concept-diagrams

You can generate educational SVG diagrams by using template-driven inputs to produce production-ready, self-contained HTML files. The system applies automatic dark mode and semantic color ramps to create clear visuals for teaching, documentation, and presentations.

Supported subjects include physics, chemistry, engineering, anatomy, floor plans, and lifecycle narratives. The system includes 15 example diagrams to help educators and documentation engineers quickly create consistent visuals.

Yes, you can export a self-contained diagram as a standalone HTML page without specialized software. The output is a flat, minimal SVG file wrapped in HTML, ideal for documentation engineers seeking consistent visuals.

You customize templates by choosing a base layout, modifying the content inputs, and letting the styling system apply semantic color ramps. This template-driven approach ensures consistent educational visuals across multiple subjects.

Yes, the standalone HTML output features automatic dark mode support alongside nine semantic color ramps. This ensures educational diagrams remain clear and visually polished across different presentation environments.

You need a YAML frontmatter block in a SKILL.md file with a name and description before generating diagrams. Optional scripts, references, and assets directories can be included to support the template and styling system.