Diagram Studio
Dozens of diagram types as clean HTML, SVG or PNG.
What it does
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, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, service blueprint, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio, Mermaid, and .excalidraw import, plus lifecycle phase maps, block decomposition trees, and onboarding guidance.
Install in under a minute
Mac or Linux, after you download
unzip diagram-studio.zip -d ~/.claude/skills/Windows PowerShell
Expand-Archive diagram-studio.zip -DestinationPath $HOME\.claude\skills- Start a new Claude Code session so it sees the skill.
- Ask in plain words, for example: "Use Diagram Studio on this project."
- Unzip the download, then zip just the diagram-studio folder if your computer added an extra folder.
- In Claude.ai, open Settings, then Capabilities, and upload it under Skills.
- Turn the skill on and ask Claude to use it.
Diagram Studio uses the open SKILL.md format, so it also works in agents like Cursor, Gemini CLI, GitHub Copilot and Codex. Copy the diagram-studio folder into that agent's skills folder, for example .cursor/skills/ or .github/skills/ in your project.
What's inside
The 13 main sections of the SKILL.md, in order.
- First-time setup, style guide gate
- Philosophy
- When to Use
- Selection: semantic pattern, then visual type
- Universal Anti-patterns
- Design System
- Core SVG Primitives
- Layout & Spacing
- Summary Card Pattern
- Pre-Output Checklist (Taste Gate)
- Templates & Variants
- Importing an Existing Diagram
- Output
In the download: 288 files, including SKILL.md, LICENSE and NOTICE.md
Credit and license
Diagram Studio is a renamed, packaged copy of diagram-design by Cathryn Lavery (github.com/cathrynlavery/diagram-design), used under the MIT license. The license and a list of changes ship inside the download.
Questions
Does Diagram Studio work in Claude.ai, not just Claude Code?
Yes. In Claude.ai, upload the diagram-studio folder as a zip in Settings under Capabilities. It also works in other agents that support Agent Skills, like Cursor, Gemini CLI and GitHub Copilot.
What do I get?
A zip with the diagram-studio folder: its SKILL.md (672,531 words) and its license files. One payment, instant download.
Who made Diagram Studio?
It's a renamed, packaged copy of diagram-design by Cathryn Lavery, used under the MIT license. The license and a list of changes ship inside the download.