# diagram-design

> A skill that makes on-brand HTML and SVG diagrams from a plain-language request

- Repository: https://github.com/cathrynlavery/diagram-design
- Category: Design & UI
- Stars: 60,089 · Forks: 3,874 · Language: HTML · License: MIT
- Experience: Beginner friendly
- Page: https://ir.adyog.com/repos/cathrynlavery/diagram-design/

Ask an AI coding assistant for a diagram and you often get a generic rounded-box picture that clashes with your site. This skill gives the assistant a set of diagram layouts with a restrained editorial style: no shadows, little decoration, and an accent color kept for the one or two things the reader should see first.

Each diagram type comes in three static variants: minimal light, minimal dark, and full editorial. The output is plain HTML with inline SVG, so you can open it in a browser with no build step, JavaScript or external images. The README says it can read your website to match your brand. It can also redraw existing draw.io, Mermaid or Excalidraw sources at a chosen size and level of detail.

The README lists dozens of layouts, from architecture, flowchart, sequence and ER diagrams to Sankey, Wardley map, kanban, UML class and database schema. Semantic patterns, such as a queue or a trust boundary, describe behavior separately from layout, so they reuse the nearest existing type. Motion is optional; static output is the default.

## What it does

- **Many diagram layouts**: Covers architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, radar, Sankey, fishbone, Wardley, kanban, UML class, database schema, waterfall and more.
- **Three variants per type**: Every type ships as minimal light, minimal dark and full editorial, each openable directly in a browser.
- **Self-contained output**: Files are HTML with SVG. There is no build step, no JavaScript and no external image dependency.
- **Brand matching**: The skill can read your website to match your brand in about a minute, according to the README.
- **Redraws existing diagrams**: It can take draw.io, Mermaid or Excalidraw sources and redraw them at a chosen format, size and detail level.

## What you could build

- Generate an architecture diagram for a blog post that matches your site's styling.
- Redraw a Mermaid or draw.io flowchart as a cleaner standalone HTML file.
- Build a database schema or UML class diagram for project documentation.
- Compare before and after system topologies with an architecture delta diagram.
- Make a Sankey, kanban or user journey graphic for a presentation.

## Who it's for

Suits developers, writers and teams who already use an AI coding assistant such as Claude Code and want better-looking diagrams; you need to know how to install a plugin from a marketplace.

## Get started

In Claude Code, add the marketplace and install the plugin with the two commands above. Then ask for a diagram in natural language. Codex, Copilot and Droid have their own install commands in the README.

```
/plugin marketplace add cathrynlavery/diagram-design
```
```
/plugin install diagram-design@diagram-design
```

Tags: diagrams, svg, agent-skills, claude-code, data-visualization