Diagram Design editorial Claude Code diagrams, no Mermaid-slop

[0x9d38]

Diagram Design — 27 editorial diagram types for Claude Code

Repo: You do not have permission to view the full content of this post. Log in or register now.
License: MIT
Stars: 3.3k+

What it is
A Claude Code skill that generates clean, editorial-style diagrams instead of the generic "rounded boxes + Mermaid" look you usually get from AI. Self-contained HTML + SVG, no build step, no external dependencies — you can open the output straight in a browser.

Highlights

• 27 diagram types (architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, tree, org chart, Gantt, radar, and more)
• Every diagram ships in 3 variants: minimal light, minimal dark, full-editorial
• "Onboarding" flow — point it at your website and it pulls your color palette + fonts automatically, with WCAG AA contrast checks
• Design system is opinionated on purpose: one accent color, 1–2 focal points per diagram, everything divisible by 4px — no shadows
• Export to PNG/SVG for Figma, slides, or social cards

Install

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

Or as a plugin:

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

Quickstart
Just ask Claude Code things like:

"Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
"I need a quadrant showing Q2 projects by impact vs effort."

Worth a look if you're tired of AI-generated diagrams that all look the same. Made by You do not have permission to view the full content of this post. Log in or register now., founder of BestSelf.co.