Diagram Design
cathrynlavery/diagram-design
Diagram Design is an MIT-licensed skill from Cathryn Lavery of LittleMight that has your agent draw editorial-style diagrams and charts as self-contained HTML with inline SVG. It covers 42 visual types, from architecture and sequence diagrams to Sankey, Wardley and database schema, and can pick up your colors and fonts from your website. It also redraws draw.io, Mermaid and Excalidraw files.
Facts checked on against the sources listed at the end of this page.
- GitHub stars
- 60,080
- Skills in the pack
- 1
- Agents supported
- 8OpenCode is a manual copy of the skill folder
- License
- MIT
- Last commit
- 1 day ago21 October 2026
- Instruction size
- 4.2k wordsacross its SKILL.md file
How to install Diagram Design
| Agent | Command | Copy |
|---|---|---|
| Claude Code | Claude Code leaves auto-update off for third-party marketplaces. Turn it on under /plugin, Marketplaces. | |
| Codex | | |
| GitHub Copilot | |
Commands as given in the README on 2 October 2026.
What Diagram Design runs on your machine
- Hooks
- None found in the repo.
- Bundled scripts
- Yes. Small Python scripts parse draw.io, Excalidraw and Mermaid input, run a self-check and export SVG. PNG export uses Playwright with Chromium, which you install separately.
- Network calls
- Only when you ask. Generated diagrams load fonts from Google Fonts when opened in a browser, and brand onboarding fetches a few pages from the website you name. The privacy policy says the plugin has no server, accounts, analytics or telemetry.
- API keys needed
- None.
These are facts read from the repo, not a security rating. Read the files before you install any skill.
What is inside Diagram Design
| Skill or command | What it makes the agent do |
|---|---|
| diagram-design | One skill with reference files for 42 visual types, from architecture and flowcharts to Gantt, Sankey, Wardley maps and UML class diagrams. |
| /doctor | A command that checks the install and setup. |
| /export-diagram | A command that exports a diagram to SVG or PNG. |
| /import-mermaid | A command that redraws a Mermaid source. Matching commands exist for draw.io and Excalidraw files. |
| /profile | A command that saves a brand as a named profile you can attach to a project. |
The commands are named for Claude Code, and Pi and Factory Droid load them as prompt templates. The repo ships one skill, and the other entries are its commands.
A good fit for
- Designers and writers who want diagrams that match a site's colors and fonts
- Anyone who needs charts and diagrams beyond software architecture, such as Wardley maps, fishbone and kanban
- Redrawing draw.io, Mermaid or Excalidraw sources at a chosen size and level of detail
- Agencies that keep a separate brand profile for each client project
Skip it if
- Diagrams that must be clickable and explorable, since the default output is static
- Mermaid-only workflows that want the diagram kept as text in a README
- Machines where Python and Chromium cannot be installed, if you need PNG export
How Diagram Design works
Every visual type comes in minimal light, minimal dark and full-editorial variants. The README says output is static by default, with optional motion modes for ordered explanations that fall back to a complete still frame when reduced motion is requested.
Brand onboarding reads your website's background, text and accent colors and fonts, checks contrast, and writes them as tokens after you approve the change. A saved profile lives in ~/.diagram-design/profiles, and a .diagram-design file in a project picks which one to use. On first use in a new project, the skill pauses and asks if the style guide is still the default.
- Made by
- Cathryn Lavery
- Topic
- Design and frontend
- Works with
- Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, OpenCode, Claude Cowork
- Website
- cathrynlavery.github.io
How much context Diagram Design uses
| The skill | 4,221 words in its SKILL.md file |
|---|---|
| Loaded at start | Only each skill's name and description. The full text loads when a task needs that skill. |
Word counts are measured from the repo every day. Reference files a skill loads on demand are not counted.
Is Diagram Design still maintained?
| Last commit | , 1 day ago |
|---|---|
| Stars gained in 7 days | +4,103 |
| Stars gained in 30 days | Shown after 30 days of tracking |
| Open issues and pull requests | 41 |
| Forks | 3,873 |
Tools Diagram Design works with
Similar skill packs
Questions about Diagram Design
Which agents does Diagram Design support?
Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro and OpenCode, plus Claude Cowork through an organization marketplace. The README gives a separate install route for each.
Is it free?
Yes. It is MIT licensed.
Does it send my diagrams anywhere?
The privacy policy says the plugin has no server and collects no data. Generated files load Google Fonts when opened in a browser, and brand onboarding fetches the site you name.
How does it match my brand?
Ask it to onboard to your website. It reads the page's colors and fonts, maps them to roles such as paper, ink and accent, checks contrast and shows a diff before writing anything.
Can it convert my existing diagrams?
Yes. It accepts draw.io, Mermaid and Excalidraw scene files and redraws them in its style at a size and detail level you choose.
Sources
- cathrynlavery/diagram-design on GitHub
- Diagram Design README
- Diagram Design SKILL.md
- Diagram Design privacy policy
- Diagram Design gallery
Something wrong or out of date? Email [email protected] with a link to the source. Stats come from the public GitHub API and update every day.
For the maker
Add the badge to your README or site. The number updates every day.
Sharing on X? Open the share card with the pack's live numbers.
