Diagram Design: branded diagrams as one HTML file

Try it in 60 seconds

npx skills add cathrynlavery/diagram-design
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Install command copied from the project README. Check the README for the latest version.

What it does

45 diagram types as self-contained HTML+SVG in your brand, great for decks and carousels.

An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand. 45 diagram types. No shadows. No Mermaid slop.

Install · What it makes · Quickstart · Match your brand · Import · Export · Contributing

Quoted from the README of cathrynlavery/diagram-design.

Inside the repo

A prompt to try

Written by us so you can reuse it. Replace each [bracket] with your details.

Step by step

1. Open the GitHub repo and skim the README (install commands change often).
2. Install it: copy the skill folder into ~/.claude/skills/ (Claude Code) or ~/.codex/skills/ (Codex), or use the plugin/marketplace command from the README.
3. Restart Claude Code or Codex.
4. Ask for the job in plain words; the skill loads when your request matches.

Docs, demos & materials

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.