concept-diagrams

Generate production-quality SVG diagrams from subject content using a unified design system.

Updated Jun 19, 2026
One-click install
npx skills add https://github.com/AnandaAnugrahHandyanto/savarez_agent --skill concept-diagrams-anandaanugrahhandyanto
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/AnandaAnugrahHandyanto/savarez_agent/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/AnandaAnugrahHandyanto/savarez_agent --skill concept-diagrams-anandaanugrahhandyanto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps educators and designers quickly produce consistent, publication-ready SVG diagrams across a wide range of domains without requiring specialized drawing software.

Core Features & Use Cases

  • Unified design system with 9 semantic color ramps, accessible typography, and dark-mode support for educational visuals.
  • Generates stand-alone diagrams for physics, chemistry, anatomy, architecture, floor plans, processes, and narratives using a common pattern library.
  • Includes 15 example diagrams and templates to accelerate concept visualization and gallery generation.

Quick Start

Populate an SVG using the provided template and save as a standalone HTML file to view offline.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I generate consistent SVG diagrams for educational content?

To generate consistent SVG diagrams, this Skill uses a unified design system with 9 semantic color ramps and accessible typography. It creates publication-ready visuals for education, science, and architecture without specialized drawing software.

Can I export SVG diagrams as a standalone HTML file for offline viewing?

Yes, you can export SVG diagrams as a standalone HTML file for offline viewing. The workflow involves populating an SVG using the provided template, which generates a self-contained file viewable without internet.

Does this diagram generator support dark mode and accessible typography?

The diagram generator supports dark mode and accessible typography through its unified design system. It includes 9 semantic color ramps to ensure educational visuals remain readable and accessible across different viewing contexts.

What is the best way to create reusable process and architecture diagrams?

The best way to create reusable process and architecture diagrams is using the common pattern library included in this Skill. It provides 15 example diagrams and templates to accelerate concept visualization across physics, chemistry, and floor plans.

Do I need specialized drawing software to produce publication-ready SVG diagrams?

You do not need specialized drawing software to produce publication-ready SVG diagrams. This Skill generates production-quality visuals from subject content directly, eliminating the need for external vector graphics editors.

What types of science visualization templates are included for concept modeling?

Science visualization templates included for concept modeling cover physics, chemistry, anatomy, and architecture. The Skill provides 15 example diagrams using a common pattern library to accelerate gallery generation and consistent visual output.