skills.rest
Chensihakniroth
ChensihaknirothCOMMUNITY
Explore all skills by this author →
GitHub

concept-diagrams

Generate flat, minimal SVG diagrams as standalone HTML files with automatic dark mode.

Updated Jun 7, 2026
Search Tags:#education#html#flowchart#visualization#SVG#dark mode#diagram
One-click install
npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill concept-diagrams-chensihakniroth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/Chensihakniroth/ANAKOT-AGENT/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill concept-diagrams-chensihakniroth

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 diagrams with a unified flat design system, delivered as a single self-contained HTML file that renders in any browser with automatic light/dark mode. ## Core Features & Use Cases - Unified Design System: 9 semantic color ramps, sentence-case typography, fixed spacing rules, and automatic light/dark adaptation via CSS classes. - Multiple Diagram Types: Flowcharts, structural containment, API maps, microservice topologies, data flows, physical objects, hub-spoke infrastructure, and UI dashboard mockups. - Use Case: Ask for a diagram of an SN2 reaction mechanism, and receive a standalone HTML file showing molecules, curved arrows, and an energy profile that you can open directly in a browser with no server or dependencies. ## Quick Start Use the concept-diagrams skill to create a diagram of a wind turbine cross-section and save it as an 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 a standalone HTML file?▼

Load the provided template.html, paste your SVG content where the template indicates, and save the result as a single .html file. The file opens directly in any modern browser with no server or dependencies required.

What diagram types can this SVG generator create?▼

It supports flowcharts, structural containment diagrams, API endpoint maps, microservice topologies, data flows, physical object renderings, hub-spoke infrastructure layouts, and UI dashboard mockups. Fifteen tested example diagrams ship with the skill for reference.

Does the SVG output support dark mode automatically?▼

Yes. All colors adapt via CSS classes defined in the template, using prefers-color-scheme media queries. You apply c-* color classes to elements and the template handles both light and dark rendering without per-mode SVG.

When should I use a different diagram tool instead?▼

Prefer a dedicated architecture-diagram skill for software or cloud infrastructure with a dark tech aesthetic, excalidraw for hand-drawn whiteboard sketches, or an animation skill for animated explainers. This skill serves as a general-purpose fallback otherwise.

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

SVG paths default to fill: black, so every connector path or line must explicitly set fill="none". The validation checklist requires this on all arrow connectors, along with the arrow marker defs block at the start of every SVG.

Related Skills

Explore More Design & Creative Skills→
AgentientAgentient
2

er-diagram-and-data-modeling

Identify and visualize entity-relationship structures from domain data.

Official
Basic
latitude-devlatitude-dev
4.6k

explain-diff-html

Generates a self-contained interactive HTML explanation of a code change or diff.

Official
Intermediate
bailynlovebailynlove
1

excalidraw

Convert Excalidraw element JSON into hand-drawn style diagrams using Python.

Community
Basic
nexu-ionexu-io
93.2k

video-template-frame-decision-tree

Generate animated flowchart videos with branching paths using HTML, CSS, and GSAP motion.

Official
Intermediate