Agent skills and plugins

cathrynlavery/

diagram-design

Agent skill that draws 45 diagram types as self-contained HTML+SVG files, matched to your brand. No shadows. No Mermaid slop.

What’s new here

Diagram Design gives the layout job to your coding agent: you describe the diagram in plain language, and the agent places every element on a 4px grid, checks for overlaps and clipping in CI, and applies one opinionated editorial style. The design rules are explicit: one accent color for the one or two focal elements, 1px hairlines, no shadows, no gradients. Brand onboarding pulls your website’s palette and fonts so every diagram matches your site.

What it does

The skill installs into any Agent Skills-compatible host (Cursor, Claude Code, Codex, GitHub Copilot, Cline, Windsurf, Amp, Pi, Factory Droid, and others) and adds 45 diagram types: architecture, sequence, ER, Gantt, flowchart, Wardley map, treemap, Sankey, state machine, exploded axonometric, and more. Each type ships in three static variants: minimal light, minimal dark, and full-editorial.

Output is always one self-contained .html file with inline SVG, no JavaScript, no build step, no external image dependencies. The file opens by double-clicking. You can export it to SVG or PNG via slash commands or natural language, and the SVG export carries diagram CSS intact for use in Figma or Illustrator.

Brand onboarding works by pointing the skill at your website URL. The agent fetches the page, maps its palette and font stack to semantic roles (paper, ink, accent, and others), checks WCAG AA contrast, and writes the tokens to style-guide.md. Every diagram after that uses your colors. For teams with multiple clients, profiles save per-brand tokens and a .diagram-design marker file routes each project to the right one.

The skill also redraws existing diagrams from .drawio, .mmd/.mermaid, and .excalidraw source files. It does not convert coordinates or palette; it re-draws the content in its own editorial system, with a fidelity ledger that lists what was merged, collapsed, or dropped.

Who it’s for

Engineers and writers who want publication-ready diagrams for blog posts, docs, or slide decks and do not want to spend time in Figma or fight Mermaid’s auto-layout. Also useful for teams that already have draw.io or Excalidraw diagrams and want them redrawn in a consistent style before publishing.

Try it

Requires Node.js for the npx install. PNG export additionally requires Python and Playwright (pip install playwright && playwright install chromium).

npx skills add cathrynlavery/diagram-design

In Claude Code via the plugin marketplace:

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

To browse the gallery locally after cloning:

open skills/diagram-design/assets/index.html       # macOS
xdg-open skills/diagram-design/assets/index.html  # Linux

Then ask your agent: "Make me an architecture diagram of my app: frontend, backend, database, Redis cache." The agent writes one .html file you open by double-clicking.

To onboard your brand: "onboard diagram-design to https://yoursite.com"

How mature is it

59,265 stars, 3,813 forks, 57 contributors, 100+ commits in the last 90 days (capped), active CI, 16 open issues, 27 open PRs. No formal releases; the plugin version is tracked in .claude-plugin/plugin.json and the changelog. Created April 2026, last pushed October 2026. MIT license.