# Diagram Design

> MIT agent skill for editorial HTML/SVG diagrams — 40+ layout types, brand-matched, no server

**Category:** Design  
**Pricing:** open-source  
**URL:** https://diagramdesign.dev  
**GitHub:** https://github.com/cathrynlavery/diagram-design  
**Added:** 2026-10-07

---

## The Hook

Diagram Design is an Agent Skill that makes your coding agent draw clean, editorial-looking diagrams as self-contained HTML + SVG instead of the default rounded-box Mermaid look: architecture, sequence, state machines, ER, swimlanes, Sankey, Wardley maps, Gantt, schema and more, each in light, dark and full-editorial variants.

## What's Good

MIT (cathrynlavery/diagram-design). Free path: install as a plugin in Claude Code, Copilot CLI or Droid, pi install it, or import the skill folder into any Agent Skills host such as Kiro or Codex. Output opens straight in a browser with no build step or JavaScript. It can pull brand colors and fonts from a site you name, and redraw existing draw.io, Mermaid or Excalidraw sources. Privacy policy says no server, accounts, analytics or telemetry. Browse every type in the live gallery before installing. ★~44k.

## The Catch

It is instructions plus templates, so quality depends on the model running it, and a weak model still produces weak layouts. The look is deliberately opinionated (minimal, single accent color); if you want hand-drawn or diagrams-as-code you edit and diff, Excalidraw or D2 fit better. Generated files load fonts from Google Fonts unless you strip the link. Brand onboarding fetches the website you point it at.

## Verdict

Install this if your agent writes docs or READMEs — free, local, and it makes agent-drawn diagrams look designed; just know it is a skill, not a renderer.