Diagram Design 🧩 Skill Open source

What it does

Diagram Design, by Cathryn Lavery, is an Agent Skill for producing clean, editorial-style diagrams as self-contained HTML and SVG files. You ask your agent for, say, an architecture diagram of your app or a sequence diagram of a token refresh. The skill picks a suitable diagram type and builds the file from its templates. It deliberately avoids generic Mermaid output, drop shadows and crowded layouts. Its style guide aims for low density, with one accent colour reserved for what the reader should see first.

What is inside

• 39 diagram types: including architecture, flowchart, sequence, quadrant, pyramid, loop or flywheel, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class and database schema.
• Three variants of each: minimal light, minimal dark and full editorial. All are static, with no build step or JavaScript. An optional template adds accessible motion.
• Brand onboarding: point the skill at your website and it proposes colour and font tokens, checks WCAG AA contrast, and writes them to a style guide once you approve. Named profiles let you keep separate brands for different clients.
• Extras: export, Mermaid and Excalidraw import, a doctor command, and accessible SVG titles and descriptions.

Works with

The README documents Claude Code, Codex, GitHub Copilot CLI, Factory Droid, Pi, Kiro, OpenCode and Claude Cowork. Its manual setup also covers Cursor and Cline skill folders, and any Agent Skills-compatible host can use it.

How to install

In Claude Code:

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

For Codex:

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

Maintenance and safety

MIT licensed and actively maintained, with frequent versioned releases. The skill mainly writes HTML files. Brand onboarding fetches the website you name. Profiles are stored in ~/.diagram-design/profiles/. Updates through a marketplace can overwrite local edits to the style guide, so use a profile or an editable clone if you customise it.

Who should use it

Developers, writers and founders who need presentation-quality diagrams for docs, blog posts or pitch material in their own brand, without opening a design tool.