Editorial Diagrams Your Designer Won't Hate

29 Professional Diagram Types for Claude Code

Self-contained HTML + SVG. No shadows, no Mermaid-slop. Generate beautiful, brand-matched diagrams in seconds with Claude, Codex, or Pi.

🚀 Install Now 👁️ View Gallery
27
Visual Types
13,126
Stars
796
Forks
MIT
License

Why Diagram Design?

Stop fighting with generic rounded boxes. Create professional diagrams that match your brand.

🎨

Editorial Quality

Professional diagrams that match your brand's aesthetic, not generic AI output.

⚡

60-Second Brand Match

Automatically extract colors and fonts from your website for perfect brand consistency.

📦

Self-Contained

No build step, no JavaScript, no external dependencies. Just HTML and SVG.

🔄

Import & Redraw

Convert existing draw.io or Mermaid diagrams with improved design and layout.

♿

Accessible by Default

WCAG compliant with proper ARIA labels and support for reduced motion.

🎬

Optional Motion

Add animated explanations while maintaining static output as default.

Brand Matching in 60 Seconds

The whole point: ship editorial-quality diagrams in your colors and typography, not a generic template.

  • 1
    Simply ask: "onboard diagram-design to https://yoursite.com"
  • 2
    The skill fetches your homepage and extracts your brand palette + font stack
  • 3
    It maps detected values to semantic roles: paper, ink, muted, accent, link
  • 4
    Shows a proposed diff for approval, then applies your brand to all diagrams
Brand Preview

Install in Seconds

Available for Claude Code, Codex, Pi, and Claude Cowork

Claude Code
Codex
Pi
Claude Cowork

Claude Code Installation

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

Then enable updates once: run /plugin, open Marketplaces, select diagram-design, and choose Enable auto-update.