skills.rest
Yassimba
YassimbaCOMMUNITY
Explore all skills by this author →
GitHub

diagram-design

Generate branded architecture, flowchart, and data diagrams as self-contained HTML/SVG files.

9|Updated Jul 17, 2026
Search Tags:#architecture#html#design system#visualization#svg#diagram#drawio
One-click install
npx skills add https://github.com/Yassimba/loom --skill diagram-design-yassimba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-design
Source: https://github.com/Yassimba/loom/tree/main/skills/diagram-design
Command: npx skills add https://github.com/Yassimba/loom --skill diagram-design-yassimba

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Teams need consistent, on-brand technical diagrams but default diagramming tools produce generic output that clashes with project branding and lacks editorial design discipline. ## Core Features & Use Cases - 39 Visual Types: Create architecture, sequence, ER, state machine, Gantt, Sankey, Wardley map, kanban, user journey, database schema, and other diagrams as standalone HTML/SVG/PNG files. - Brand Onboarding: Pull style tokens from a website URL, local design-system folder, or saved client profiles so every diagram matches the project brand. - Import & Redraw: Redraw .drawio, .drawio.png, .drawio.svg, or Mermaid .mmd sources at a chosen size and detail level using the deterministic drawio_extract.py parser. - Use Case: A solutions architect needs a deployment diagram for a client proposal; the skill loads the saved client profile, applies the brand tokens, enforces the complexity budget, and outputs a self-contained HTML file with accessible SVG. ## Quick Start Use the diagram-design skill to create an architecture diagram of our payment processing system as a standalone HTML file.

Frequently Asked Questions about diagram-design

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

FAQPage Schema
How do I create an architecture diagram as HTML with SVG?▼

Choose the architecture visual type, load the type-architecture reference, and generate a self-contained HTML file with inline SVG following the design system tokens. The skill enforces orthogonal connectors, a 4px grid, and a maximum of 9 nodes per diagram.

How to convert a draw.io file into a styled SVG diagram?▼

Run the drawio_extract.py script on the .drawio, .drawio.png, or .drawio.svg file to produce a normalized intermediate representation with nodes, edges, and type candidates. The skill then redraws the diagram at your chosen size and detail level using the editorial design system.

Can I apply my own brand colors to generated diagrams?▼

Yes, the style guide is skinnable through semantic color roles like paper, ink, muted, and accent. Onboarding can pull tokens from a website URL, a local design-system folder, manual input, or a saved client profile.

What diagram types does this skill support?▼

It supports 39 visual types including architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, radar, Gantt, Sankey, fishbone, Wardley map, kanban, user journey, deployment, UML class, and database schema diagrams.

When should I not use HTML/SVG diagram generation?▼

Skip diagram generation when a table, bulleted list, or short paragraph communicates the same information, and use wiretext for quick unicode diagrams. The skill also refuses single-shape diagrams and simple before/after comparisons.

Does the skill support animated diagrams?▼

Yes, optional animation modes include reveal, step, and loop, loaded only when motion is requested or clarifies ordered change. All animated figures remain complete and meaningful without JavaScript and respect prefers-reduced-motion settings.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
7

blueprint-mcp-diagram-generation

Generate architecture diagrams and flowcharts as PNG files via Blueprint MCP.

Official
Intermediate
466852675466852675

fireworks-tech-graph

Generate validated SVG technical diagrams and export PNG images.

Community
Advanced
SirTheOracleSirTheOracle

proposal-reviewer

Audit final plans against the codebase for correctness and regressions.

Official
Advanced
awinogradovawinogradov
5

ascii-schemas

Render ASCII diagrams and UI wireframes using Unicode box-drawing characters.

Community
Intermediate