diagram-design for Claude Code diagrams

Key takeaways#

• diagram-design is a Claude Code plugin and agent-skill resource for creating editorial diagrams as self-contained HTML and SVG.
• The repository lists 27 documented visual types in the README, while the GitHub description says 29 editorial diagram types.
• It is useful when teams want diagrams that look designed, avoid Mermaid defaults, and can be opened directly in a browser.
• The project is MIT licensed and includes install flows for Claude Code, Codex, Pi, and Agent Skills-compatible workflows.

What diagram-design is#

diagram-design is a practical diagramming resource for builders who use Claude Code or similar agent workflows. The repository describes the output as editorial diagrams your designer will not hate. Instead of generating Mermaid charts or generic rounded boxes, the skill creates standalone HTML and SVG files with a strict visual system.

The project is especially useful for product docs, architecture notes, internal RFCs, and technical explainers where the diagram needs to communicate clearly without a separate design pass. Each output can be opened in a browser, exported as SVG or PNG, and adapted to a project's colors and typography.

Diagram types covered#

The README documents visual types such as architecture diagrams, flowcharts, sequence diagrams, state machines, ER diagrams, timelines, swimlanes, quadrants, trees, org charts, Venn diagrams, layer stacks, funnels, radar charts, loops, bar charts, line charts, Gantt charts, scatter plots, process diagrams, medallion diagrams, data-flow diagrams, and security matrices. Because the repo description and README disagree on the exact count, this resource treats it as 27+ documented types rather than relying on one number.

Design rules that make it useful#

The skill's design system is intentionally strict. It favors one accent color, one or two focal elements, 1px hairline borders, no shadows, a small radius limit, and a 4px grid for coordinates and spacing. The README also separates semantic behavior patterns from visual layout, which lets an agent describe behavior such as queues, policy traces, or trust boundaries without inventing a new visual style each time.

How to install it in Claude Code#

The repository lists this Claude Code flow:

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

After installing, open /plugin, go to Marketplaces, select diagram-design, and enable auto-update if you want the plugin to refresh when Claude Code starts. Use /reload-plugins if Claude prompts you after installation.

When to use it#

Use diagram-design when a diagram is part of the deliverable, not just a scratchpad. It fits documentation pages, launch posts, architecture walkthroughs, process explanations, and agent-generated docs where the first draft still needs to look polished. If you only need a quick flow while thinking, Mermaid may be faster. If the output will be shared with customers, executives, or a public audience, diagram-design gives Claude Code a clearer visual target.

Source and verification#

This resource is based on the public GitHub repository at https://github.com/cathrynlavery/diagram-design. At the time of review, the repository described itself as MIT licensed, showed roughly 15k stars, and included installation notes for Claude Code plus related agent workflows. Recheck the repository before copying install commands into production docs because plugin marketplace commands can change.