diagram-design for Claude Code: editorial diagrams, not Mermaid

What is cathrynlavery/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 actually 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 the five commands are 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 this is worth reaching for

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 it

Flowy indexes cathrynlavery/diagram-design from its public GitHub repository. Install it from the listing page linked at the top of this guide, which derives the current install command from the plugin's own manifest rather than repeating one here.