# Diagram Design

> Your agent draws editorial diagrams in your brand, as one self-contained HTML and SVG file, and redraws Mermaid, draw.io and Excalidraw.

Cathryn Lavery's Diagram Design is a plugin and Agent Skill that gives your agent one opinionated editorial style for diagrams. Describe what you need in plain words: the agent picks the diagram type, says what it plans to draw, and writes one self-contained HTML file with inline SVG that opens in any browser. The style is strict: one accent colour for the one or two things that matter, 1px hairlines, no shadows, and every coordinate on a 4px grid.

What you can do with it
- Draw 45 diagram types, from architecture, flowcharts, sequence diagrams and state machines to ER and database schemas, timelines, swimlanes, quadrants, Gantt charts, Sankey diagrams, Wardley maps and org charts
- Match your brand: point it at your website and it pulls your palette and fonts into its style guide, checking contrast first
- Save each brand as a named profile, so different clients or projects keep their own look
- Redraw existing draw.io, Mermaid and Excalidraw files in this style, sized for a doc, a slide, a social card or print, with a list of what it merged or dropped
- Export the diagram as a standalone SVG (for Figma or Illustrator) or a PNG

How to install it
In Claude Code, run /plugin marketplace add cathrynlavery/diagram-design, then /plugin install diagram-design@diagram-design. That also adds its commands: /diagram-design:export-diagram, the draw.io, Mermaid and Excalidraw imports, /diagram-design:profile and /diagram-design:doctor. Codex, GitHub Copilot and Factory Droid install it from the same repository's marketplace, and the skill alone installs in Cursor and other Agent Skills hosts with npx skills add cathrynlavery/diagram-design.

Good to know
- It has no server, account or telemetry. Diagrams load their fonts from Google Fonts unless you ask for system fonts.
- PNG export needs Playwright with Chromium (pip install playwright, then playwright install chromium).
- The first time you use it in a project, it asks whether to set up your brand or keep its default jet-black and tangerine style.
- The result is a finished diagram, not an editable source format. For diagrams in Git that change every sprint, the maker says Mermaid is still the better fit.
- Official builds come only from the cathrynlavery/diagram-design repository.

- Type: Plugin
- Made by: cathrynlavery
- Category: Design
- Formats: Claude plugins
- Version: latest
- Website: https://github.com/cathrynlavery/diagram-design
- Source: https://github.com/cathrynlavery/diagram-design
- Page: https://pluginboard.ai/plugins/diagram-design

## Works with

- Claude
- GitHub Copilot
- Claude Code
- OpenClaw

## Install

### Claude

In Claude (web or desktop): Customize → Plugins → Add → Add marketplace, enter cathrynlavery/diagram-design, then add diagram-design

### Claude Code

In Claude Code:

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

---
From Pluginboard (https://pluginboard.ai).