🎨 Design

diagram-design

Name: diagram-design
Author: cathrynlavery

by cathrynlavery15 days ago41.9k

Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, heatmap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio and .excalidraw import support, plus lifecycle phase maps and onboarding guidance.

Install

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/cathrynlavery--diagram-design--skills--diagram-design/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@heyrimsha

"A founder got tired of asking Claude for a diagram and getting the same generic rounded box every single time. So she built a skill that draws real diagrams..."

X@daniel_mac8

"Oh boy. This is amazingly cool. Very happy I found this. ‘diagram-design’ skill for Codex & Claude Code. Create 39 different diagrams types that are..."

X@LLMpsycho

"diagram-design is an agent skill for editorial HTML and SVG diagrams. Thirty eight diagram types for Codex, Cursor, and Pi. 33,181 stars."