skills.rest
mostafa-K-raihan
mostafa-K-raihanCOMMUNITY
Explore all skills by this author →
GitHub

diagram-design

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

Updated Jun 4, 2026
Search Tags:#architecture#documentation#visualization#svg#editorial#design-system#diagram
One-click install
npx skills add https://github.com/mostafa-K-raihan/skills --skill diagram-design-mostafa-k-raihan
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ilandahanilandahan
9

phase-enforcement

Enforce phase gates and validate transitions across AI.D project stages.

Community
Advanced
EigenwiseEigenwise
20

architecture-diagram

Generate self-contained architecture diagrams as standalone HTML files with inline SVG and CSS.

Community
Intermediate
gyuhagyuha

mermaid-diagrams

Create and render Mermaid diagrams for documentation and system architecture.

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate