Diagram Design: publishable diagrams without fighting Figma
Ask an agent for a diagram and you usually get generic rounded boxes that clash with the rest of your site. Diagram Design writes taste down as rules: one accent colour for the one or two nodes that matter, 1px hairlines, no shadows, every coordinate on a 4px grid. The result is a single HTML file with inline SVG that opens with a double click.
45 types, including architecture, flowchart, sequence, ER model, timeline, swimlane, quadrant, Sankey, Wardley map and Gantt
Every type in three static variants, minimal light, minimal dark and full editorial, with no build step or external images
Brand onboarding: give it your site URL and it pulls the palette and fonts; client profiles live in ~/.diagram-design/profiles/
Imports existing draw.io, Mermaid and Excalidraw files and exports the result to SVG or PNG
Before the first diagram in a project it asks whether to customise the style, so default colours do not ship by accident
When to use it
You need an architecture diagram for a blog post that looks like part of the site, not an editor screenshot
You are preparing a leadership deck and want a quadrant of projects by impact and effort
Old Mermaid or draw.io diagrams need redrawing in one consistent house style
Ask your agent
Make me an architecture diagram of my app: frontend, backend, database and a Redis cache
I need a quadrant of our Q2 projects by impact versus effort
Onboard diagram-design to our website and redraw this Mermaid chart
Questions
How do I install Diagram Design?
Run npx skills add cathrynlavery/diagram-design. In Claude Code the plugin is better: /plugin marketplace add cathrynlavery/diagram-design and /plugin install diagram-design@diagram-design bring updates and slash commands.
Does Diagram Design work in Codex and Cursor?
Yes. The README has a Codex plugin via codex plugin marketplace add, Cursor uses npx skills, and Copilot, Gemini CLI, Windsurf and others are supported too.
How is Diagram Design different from Mermaid?
Mermaid is text you can keep in Git and diff. Diagram Design gives a publish-ready, on-brand picture but no editable source, and the author recommends Mermaid for docs that change every sprint.
