diagram-design for Claude Code and Codex: 44 diagram types drawn in your brand colors

diagram-design is a skill that draws diagrams as a single HTML and SVG page, with no image files involved. According to its SKILL.md, it covers 44 diagram types, and new ones such as heatmaps, before-and-after architecture comparisons, and isometric diagrams are being added over time. It ships as a plugin under the MIT license. This post covers the problem it solves, who it suits, how to install it and make the first request, and the setup choices worth making before your first diagram.

What problem it solves

A diagram an agent draws for you usually comes out in its own default palette. It looks like a generic diagram, not like something from your blog or your slide deck, and getting it to match means editing colors and fonts by hand every time. Existing diagrams have the same problem in reverse: a Mermaid chart or a draw.io file you already have does not look like anything else you publish.

diagram-design starts from your brand instead. It reads background, text, and accent colors and fonts from a website URL and writes them into a style guide. It then picks a diagram type, such as an architecture diagram or a flowchart, to fit the format, size, and audience level, and exports a single HTML page that opens directly in a browser without a build step. When a color in your palette lacks enough contrast, it suggests an adjusted value. It can also read draw.io, Mermaid, and Excalidraw sources and redraw them under the same design rules, so old diagrams can join the new look.

Who it fits

The chapter rates four situations. Three cover most decisions.

Situation	Fit	Reason
Architecture diagrams for blog posts	Good fit	Reads site colors
Styling Mermaid diagrams for presentations	Good fit	Creates slide-sized outputs
Manually editing Figma designs	Poor fit	Focuses on code outputs

If your workflow ends with a designer adjusting the diagram in Figma, this skill gives you a starting point at best. Its strength is output you can open, export, and publish as it is.

Install and first run

The plugin installs from its own marketplace in both Claude Code and Codex.

# Enter inside Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

# Run in the Codex terminal
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

After installation, the first request names the content and the output format in plain language.

Draw [content for the diagram] in [output format]

In a project using it for the first time, if style-guide.md still holds default values, the skill asks you to choose onboarding from a website, direct token entry, or the defaults. Rules for each diagram type are read from references/, and the README explains commands such as /diagram-design:export-diagram for exporting SVG and PNG.

What trips people up

The brand setup lives inside the plugin’s own files, and that has a consequence. Editing the installed style-guide.md may not persist when the marketplace updates the package, so the colors you tuned can quietly revert to defaults. Keep a copy of your tokens somewhere you control, and check the first diagram after an update before you publish it. The other setup detail is PNG output, which requires Playwright and Chromium. Install them once before you need a PNG, not in the middle of a deadline.

Where this comes from

This post adapts part of chapter 04-03 of The Claude Code & Codex Skills Guidebook. The full chapter covers the complete table of included commands, including profile for separate brand profiles and doctor for diagnosing the execution environment, and how client-specific proposals fit into that setup, and the book has 52 more skills like this one. Read the full chapter in The Claude Code & Codex Skills Guidebook on Gumroad.