# diagram-design for Claude Code: install and use

> cathrynlavery/diagram-design is a Claude Code plugin with 1 skill and 5 commands for producing editorial-style diagrams instead of the default boxes and arrows look, output as self-contained HTML and SVG. Use it when a diagram needs to look designed for a document, deck, or client, and use its `import-mermaid` or `import-drawio` commands to redraw a diagram you already made.

Canonical: https://www.flowy.sh/plugins/cathrynlavery-diagram-design/guide
Published: 2026-10-29
Updated: 2026-10-29
Author: Flowy

## What is diagram-design?

`cathrynlavery/diagram-design` is a Claude Code plugin that Flowy indexes from
its public GitHub repository, which carries 26,720 stars. It ships 1 skill,
`diagram-design`, and 5 commands: `doctor`, `profile`, `import-drawio`,
`import-mermaid`, and `export-diagram`, for 6 components total. The point of
the plugin, per its own description, is diagrams that look designed for a
report, a slide deck, or a piece of documentation, rather than the generic
boxes and arrows a diagram gets when it is rendered straight out of a default
renderer. Output is self-contained HTML with embedded SVG. It is not limited
to Claude Code either: the repository also lists Codex, Factory Droid, and Pi
as agents it works with, using that same portable HTML and SVG output.

## What can the diagram-design skill draw?

The `diagram-design` skill's own description names a long list of diagram
types, grouped here by what they are for. The repository's own summary puts
the running total at 39 editorial diagram types.

- **Process and flow.** Flowchart, sequence, state machine, swimlane, and
  loop or flywheel diagrams, for how something runs or repeats.
- **Structure and hierarchy.** Architecture, IT current state, layer stack,
  nested, tree, and org chart diagrams, for how a system or a team is put
  together.
- **Relationships and sets.** ER and data model diagrams for how records
  relate to each other, and Venn diagrams for overlap between groups.
- **Comparison and position.** Quadrant, radar or spider, and polar charts,
  including the polar and radial lollipop variants, for placing several
  items against two or more axes at once.
- **Proportion and share.** Pyramid or funnel diagrams and treemaps, for a
  value that narrows at each stage or splits into nested parts.
- **Time and quantity.** Timeline and Gantt charts for schedules, plus plain
  bar and line charts for numbers against categories or time.

The skill's own description also calls the output "branded," meaning the
color and type choices are meant to match a specific client or project
rather than a generic default.

## What are the five commands in diagram-design for?

Two of them bring in a diagram you already have. `import-mermaid` redraws an
existing Mermaid diagram in the editorial style, and `import-drawio` does the
same for a draw.io file, and both let you choose the output format, size,
and level of detail as you convert. That is the practical answer to a
diagram you already made somewhere else: you do not start over, you redraw
it.

`export-diagram` takes the plugin's normal HTML output and turns it into
matching .svg and .png files placed next to the source, since HTML on its
own does not paste into most slide decks or a written document.

The remaining two manage the plugin rather than a specific diagram. `doctor`
runs a one-shot check of your environment to confirm it is ready before you
start. `profile` saves, loads, inspects, updates, resets, or deletes client
profiles, which is how the branding above stays consistent across more than
one diagram for the same client or project, instead of being re-specified
every time.

## When is diagram-design worth installing?

This plugin answers a specific complaint: a diagram a coding agent draws by
default tends to look like a flowchart, all boxes and arrows in a default
palette, which is fine for a debugging note to yourself and wrong for
anything a designer, a client, or a reader outside the team will see. If you
are writing documentation, a blog post, a pitch, or a report, and the
diagram needs to look intentional, this plugin is built for exactly that
gap, and the `profile` command is worth setting up as soon as you are
producing more than one diagram for the same brand.

If all you need is a fast, disposable diagram for your own reference, the
extra commands and the branding step are more setup than the job needs. A
plain Mermaid block in a markdown file is quicker for that, and
`import-mermaid` is there for the day it needs to look better than that.

## How do I install diagram-design in Claude Code?

Flowy indexes `cathrynlavery/diagram-design` from its public GitHub
repository. Install it from [the install card on the listing page](https://www.flowy.sh/listings/cathrynlavery-diagram-design#install), which derives the current install command from the plugin's own
manifest rather than repeating one here.

Sources: [cathrynlavery/diagram-design on GitHub](https://github.com/cathrynlavery/diagram-design), [cathrynlavery/diagram-design README](https://github.com/cathrynlavery/diagram-design#readme)

## Common questions

### What does the cathrynlavery/diagram-design plugin do?

It adds a `diagram-design` skill and five commands to Claude Code for producing editorial-style diagrams, output as self-contained HTML with embedded SVG. Instead of the generic boxes and arrows look of a default renderer, it aims for something closer to what a designer would put in a document, a deck, or a report.

### How is this different from asking for a Mermaid diagram?

A default renderer produces a fixed, generic look. `diagram-design` instead produces branded output meant to match a specific client or project, and its `import-mermaid` command can take a Mermaid diagram you already made and redraw it in that style.

### Can it convert a draw.io or Mermaid diagram I already have?

Yes. `import-mermaid` redraws a Mermaid diagram and `import-drawio` redraws a draw.io file, both as an editorial diagram at a format, size, and detail level you choose. Neither command starts you over, they take the diagram you already have as the input.

### What do the doctor and profile commands do?

`doctor` runs a one-shot check of your environment to confirm it is ready to produce diagrams. `profile` saves, loads, inspects, updates, resets, or deletes client profiles, which is how a consistent brand look is kept across more than one diagram for the same client instead of being re-specified each time.

### Does Flowy host or bundle this plugin?

No. Flowy indexes `cathrynlavery/diagram-design` from its public GitHub repository so you can see the real skill and commands before installing. The plugin itself stays on the author's own repository and releases from there.

## Related

- [The listing page](https://www.flowy.sh/listings/cathrynlavery-diagram-design): Install command, components and repository
- [Alternatives to this plugin](https://www.flowy.sh/alternatives/cathrynlavery-diagram-design): Peers in its category, ranked by stars
- [The Claude Code plugin marketplace](https://www.flowy.sh/marketplace/plugins): How plugins install, and every plugin in the index
- [ui-ux-pro-max-skill for Claude Code: install and use](https://www.flowy.sh/plugins/nextlevelbuilder-ui-ux-pro-max-skill/guide): another plugin guide
- [Impeccable for Claude Code: what it does and how to install it](https://www.flowy.sh/plugins/pbakaus-impeccable/guide): another plugin guide