concept-diagrams
Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
Concept Diagrams generates clean, minimal SVG educational visuals as standalone HTML files that work in any browser.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-28
Concept Diagrams generates clean, minimal SVG educational visuals as standalone HTML files that work in any browser. Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
Use it when
- Concept Diagrams excels at flowcharts, process pipelines, system architecture layouts, physics mechanisms, chemistry reaction visuals.
- Concept Diagrams automatically detects the user's system theme preference and renders diagrams in the appropriate mode.
Verify before relying
Read SKILL.md below before installing (20 files). Open directory: indexed for reading, not audited.
Install
NousResearch/hermes-agent/concept-diagrams · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can concept-diagrams generate SVG diagrams for education?
Yes. Concept Diagrams produces production-quality SVG visuals designed specifically for educational use. The skill generates self-contained HTML files that render complete diagrams in any modern browser—no server or external dependencies required. Output includes automatic light and dark mode support, making diagrams accessible across different viewing contexts.
What types of diagrams can concept-diagrams create?
Concept Diagrams excels at flowcharts, process pipelines, system architecture layouts, physics mechanisms, chemistry reaction visuals, anatomy cross-sections, floor plans, and technical infrastructure drawings. The skill uses a unified flat, minimal design system across all diagram types, ensuring consistent visual quality whether you're illustrating microservice topologies, data ETL flows, IoT networks, or educational concept illustrations.
How does concept-diagrams handle light and dark mode?
Concept Diagrams automatically detects the user's system theme preference and renders diagrams in the appropriate mode. The flat, minimal design system supports both light and dark variants seamlessly within a single self-contained HTML output file. No configuration or manual switching is needed—the diagram adapts to the viewer's browser settings.
What output format does concept-diagrams produce?
Concept Diagrams generates a single self-contained HTML file containing embedded SVG markup. This file requires no server, build process, or external dependencies to display. Simply open it in any modern browser to view production-quality diagrams with full interactivity and theme support built in.
Is concept-diagrams suitable for technical system diagrams?
Yes. Concept Diagrams is designed to handle technical system architecture, infrastructure integration, hardware pipelines, and microservice topology visualizations. The skill produces clear, minimal flat-design diagrams that communicate complex technical relationships effectively while maintaining visual simplicity and professional presentation.
What license does concept-diagrams use?
Concept Diagrams is released under the MIT license, allowing free use, modification, and distribution in both personal and commercial projects with minimal restrictions.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Concept Diagrams
Generate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light/dark mode.
Scope
Best suited for: - Physics setups, chemistry mechanisms, math curves, biology - Physical objects (aircraft, turbines, smartphones, mechanical watches, cells) - Anatomy, cross-sections, exploded layer views - Floor plans, architectural conversions - Narrative journeys (lifecycle of X, process of Y) - Hub-spoke system integrations (smart city, IoT networks, electricity grids) - Educational / textbook-style visuals in any domain - Quantitative charts (grouped bars, energy profiles)
Look elsewhere first for: - Dedicated software / cloud infrastructure
(truncated - see the full file via the links below)
File tree — 15 files
optional-skills/creative/concept-diagrams/SKILL.md
optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md
optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md
optional-skills/creative/concept-diagrams/examples/autonomous-llm-research-agent-flow.md
optional-skills/creative/concept-diagrams/examples/banana-journey-tree-to-smoothie.md
optional-skills/creative/concept-diagrams/examples/commercial-aircraft-structure.md
optional-skills/creative/concept-diagrams/examples/cpu-ooo-microarchitecture.md
optional-skills/creative/concept-diagrams/examples/electricity-grid-flow.md
optional-skills/creative/concept-diagrams/examples/feature-film-production-pipeline.md
optional-skills/creative/concept-diagrams/examples/hospital-emergency-department-flow.md
optional-skills/creative/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md
optional-skills/creative/concept-diagrams/examples/place-order-uml-sequence.md
optional-skills/creative/concept-diagrams/examples/smart-city-infrastructure.md
optional-skills/creative/concept-diagrams/examples/smartphone-layer-anatomy.md
optional-skills/creative/concept-diagrams/examples/sn2-reaction-mechanism.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate educational diagrams as self-contained SVG/HTML files”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Generative UI equips Claude with the complete Anthropic design system for the `show_widget` tool, enabling inline rendering of interactive HTML/SVG widgets in claude.ai. Use it to build charts, dashboards, diagrams, flowcharts, and visual explainers without setup calls. The skill includes routing rules, component templates, CSS variables for light/dark mode, and Chart.js patterns to produce polished visuals that blend seamlessly with conversation.
Anthropic Style Diagram generates semantic SVGs following Anthropic's visual language and design system, then renders them to PNG. The skill handles architecture, flow, and structural diagrams—automatically managing colors, themes, viewBox cropping, and style baking. Author the geometry and meaning; the rendering pipeline owns the design.
Fireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.
Architecture Diagram transforms system descriptions into standalone, browser-ready HTML files with embedded SVG visuals. It handles technical architecture, infrastructure, deployment topology, and data-flow diagrams with semantic grouping and clear connection flows, outputting polished dark-themed artifacts you can open directly without external tools.
This skill teaches best practices for HackMD, a collaborative markdown platform supporting live editing, presentation mode with customizable themes, and embedded SVG diagrams. Learn proper SVG techniques—direct coordinates, simple markers, and opacity—while avoiding unsupported features like filters and transforms that break rendering.
Svg Diagram creates polished structural diagrams—flowcharts, architecture charts, sequence diagrams, hierarchies, and more—by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools.
More skills baoyu-diagram (MIT) · pixel-art (MIT) · Aris Pixel Art (NOASSERTION) · Diagram Design (NOASSERTION) · concept-to-image (MIT) · architecture-diagram (MIT)