diagram-design

Name: diagram-design
Availability: InStock
Author: Raihan

Generate self-contained HTML diagrams with inline SVG and CSS.

Updated Jun 4, 2026

Search Tags:#architecture #documentation #visualization #svg #editorial #design-system #diagram

Ready to run

npx skills add https://github.com/mostafa-K-raihan/skills --skill diagram-design-mostafa-k-raihan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: diagram-design
Source: https://github.com/mostafa-K-raihan/skills/tree/main/diagram-design
Command: npx skills add https://github.com/mostafa-K-raihan/skills --skill diagram-design-mostafa-k-raihan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Teams need consistent, shareable diagrams that illustrate architecture, workflows, and data models without external dependencies.

Core Features & Use Cases

Self-contained HTML diagrams with inline SVG and CSS, ready for embedding in docs or slides.
14 diagram types with per-type conventions and a single design system in a central style guide.
First-run gate to customize brand tokens before generating diagrams.
Assets support (templates, sketches, and examples) to accelerate diagram creation.

Quick Start

Copy the closest template, replace the eyebrow and title, and run the taste gate before generating the diagram.

Frequently Asked Questions about diagram-design

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

FAQPage Schema

How do I create self-contained architecture diagrams for documentation?▼

Self-contained architecture diagrams are output as standalone HTML files with inline SVG and CSS, ensuring they remain shareable without external dependencies and ready for embedding in docs, slides, or dashboards.

Can I customize the design system tokens for my workflow diagrams?▼

Yes, you can customize design system tokens for workflow diagrams using a first-run gate. This enforces style-guide driven tokenization to match your branding before generating the final visualizations.

What is the best way to build data models and product diagrams without external dependencies?▼

Building data models and product diagrams without external dependencies is best achieved by outputting standalone HTML with inline SVG and CSS, ensuring consistent, shareable visualizations across teams.

Does diagram-design work with existing templates and sketches?▼

Yes, diagram-design works with existing templates and sketches through its assets support. You copy the closest template, replace the eyebrow and title, and run the taste gate before generating the diagram.

What types of diagrams can I generate using a centralized style guide?▼

Using a centralized style guide, you can generate 14 distinct diagram types with per-type conventions. These cover architecture, data models, workflows, and product diagrams for various documentation needs.