Showcase
Showcase media from the upstream repository, re-hosted with credit. cathrynlavery/diagram-design
How to use
- 1
Copy the install prompt
Click the black button. One click, done.
- 2
Paste it to your agent
Send it in Claude Code, Codex, Cursor or similar. It installs itself.
- 3
Ask in one sentence
Say what you want, like below, and the agent follows this skill.
/diagram-design make me: Docs, blog posts and decks that need clean diagramsExample message showing how to invoke it, not a real output.
What you get
- Light, dark and full-editorial variants for each type
- No build step, JavaScript or external images needed
- Brand colors and type picked up from your site
Good fit
- Docs, blog posts and decks that need clean diagrams
- Anyone tired of generic Mermaid output
Not for
- Diagrams you must keep editing in draw.io or Figma
- License
- MIT
- Author
- @cathrynlavery
- Source
- cathrynlavery/diagram-design/skills/diagram-design · ★ 43,679
Upstream description
Create branded architecture, architecture delta, 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, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph,…
Other ways to install
Prefer doing it yourself? These commands do the same as the button.
Read https://skilloop.dev/skills/diagram-design/install.md and follow the instructions to install the skill.
npx skills add https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design -g -a claude-code
npx skills add https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design -g -a codex
git clone --depth 1 https://github.com/cathrynlavery/diagram-design.git /tmp/diagram-design mkdir -p ~/.claude/skills && cp -r /tmp/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
Original work by its authors, redistributed under its license. We only link and describe it.
Related skills
Data Report Page
Turn a CSV, Excel or JSON file into a polished visual report page with charts and key takeaways.
Skill Creator
Create, edit and benchmark your own Agent Skills — including evals and description tuning for better triggering.
Brainstorming Before Building
Makes your coding agent clarify intent, requirements and design with you before it writes any code.
Systematic Debugging
A four-phase debugging discipline: find the root cause before proposing fixes, for any bug or failing test.