diagram-design
27 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.
Diagram Design is a Claude Code plugin that creates 39 editorial-quality diagram types as self-contained HTML+SVG files without shadows or generic styling. It supports architecture diagrams, flowcharts, sequence diagrams, pyramids, Wardley maps, Sankey flows, and more, all rendered in a clean design system. The plugin can brand-match diagrams to your website's colors and fonts in 60 seconds, import and redraw existing draw.io/Mermaid/Excalidraw files, and export to PNG or SVG. Compatible with Claude Code, Codex, Factory Droid, Pi, GitHub Copilot, and Agent Skills-compatible hosts.
Key Features
Use Cases
- 01Creating technical architecture diagrams for documentation or blog posts that match your brand
- 02Generating slide-optimized flowcharts and sequence diagrams for presentations without manual design work
- 03Redrawing legacy draw.io or Mermaid diagrams at different detail levels for executive vs. engineer audiences
- 04Building editorial-quality data visualizations (treemaps, waterfalls, radar charts) for reports and articles
- 05Visualizing system states, decision logic, and cross-functional processes with clean swimlane and state-machine diagrams
- 06Producing brand-consistent Wardley maps, user journeys, and story maps for strategic planning documents
Related Plugins
View moreandrej-karpathy-skills
A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
claude-mem
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
Understand-Anything
Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
rtk
CLI proxy that reduces LLM token consumption by 60-90% on common dev commands. Single Rust binary, zero dependencies
diagram-design — FAQ
What is the diagram-design Claude Code plugin?+
It's a Claude Code plugin that generates 39 types of editorial-quality diagrams as self-contained HTML+SVG files, with automatic brand matching and support for importing existing diagram sources.
How do I install diagram-design in Claude Code?+
Run '/plugin marketplace add cathrynlavery/diagram-design' then '/plugin install diagram-design@diagram-design', enable auto-update in the Marketplaces menu, and reload plugins when prompted.
Which AI clients support diagram-design?+
Claude Code, Codex, Factory Droid, Pi, GitHub Copilot, Kiro, OpenCode, and any Agent Skills-compatible host that loads SKILL.md files.
Do I need API keys or external services to use diagram-design?+
No API keys required. PNG export needs one-time Playwright+Chromium setup (pip install playwright && playwright install chromium), but HTML/SVG generation works immediately with no dependencies.
Is diagram-design free to use?+
Yes, it's open source on GitHub and free to use. The repository is publicly available at github.com/cathrynlavery/diagram-design.
How does brand onboarding work?+
Ask the agent to 'onboard diagram-design to https://yoursite.com' and it will extract your site's colors and fonts, verify contrast, then apply them to all future diagrams with a fidelity receipt.
How do I install diagram-design?+
Open the source repository on GitHub and follow its README. diagram-design is a plugin — MCP Agents Market links you directly to the official repo.
Is diagram-design free?+
diagram-design is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.