diagram-design: a Claude Code skill by Cathryn Lavery
For people who want clean, on-brand diagrams and charts as single HTML files with inline SVG. Skip it if a quick Mermaid sketch or ASCII drawing is all you need.
The skill's text changed on Nov 10, 2026, after we last read it. Our description may be behind.
- Score
- 69of 100
- Rank
- #186of 239
- Installs
- 27.4Kon skills.sh
- Security
- Clear 3 scanners
- Updated
- 2026
- Context
- ~216tokens always
Install
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design
Run it in your terminal. View the source
Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app
What does diagram-design do?
diagram-design is a skill that draws diagrams as one self-contained HTML file with inline SVG, styled by an editorial design system. It covers 45 visual types, from architecture, sequence and ER diagrams to Sankey, Wardley maps, Gantt and service blueprints. On the first run in a project it checks whether the style guide still has default colors and offers to brand it from a URL, a folder, pasted tokens or a saved profile. Before drawing it states the chosen type and size, then applies a nine-node budget, strict connector rules and a pre-output checklist. It can redraw .drawio, Mermaid and .excalidraw files and export PNG or SVG on request.
When should you use diagram-design?
Use it when
- You need an architecture or flow diagram for a doc or post
- You want a draw.io or Mermaid file redrawn cleanly
- Diagrams must match your brand colors and fonts
Skip it when
- A rough sketch inside a chat reply is enough
- A table or bullet list says the same thing
What it needs and what it can touch
You need
- Python 3 for the bundled import, check and export scripts
What it can do
- Writes HTML diagram files to your project
- Runs bundled Python scripts for import, checks and export
- Can read a website you name to copy its brand tokens
From reading its instructions, not from running it.
Why it scores 69
Strongest on upkeep (100 of 100), weakest on adoption (54).
Is diagram-design safe to install?
Every scanner that checked it passed it. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.
| Scanner | Result | Date |
|---|---|---|
| Gen Agent Trust Hub | Passed | Nov 9, 2026 |
| Socket | Passed | Nov 9, 2026 |
| Snyk | Low risk | Nov 9, 2026 |
Details
- Installs
- 27,443
- Repository stars
- 66,444
- Last repository change
- Tokens always loaded
- about 216
- Tokens when used
- about 7,440
- License
- MIT
- Data confidence
- High
Did it do the job for you?
Alternatives to diagram-design
All skills for this job-
Get excalidraw-diagram-generatorexcalidraw-diagram-generator
For people who want editable flowcharts, mind maps or architecture sketches made from a written description.
-
Get fireworks-tech-graphfireworks-tech-graph
For engineers who want clean architecture and workflow diagrams as SVG, PNG or GIF from a description.
-
Get archifyarchify
For developers who want checked, interactive HTML diagrams of systems, flows or schemas, including ones traced from a real repo.
-
Get drawio-skilldrawio-skill
For engineers who want editable draw.io architecture diagrams built from text, code or infrastructure files.
diagram-design