Diagram Design
Clean editorial diagrams as one self-contained HTML + SVG file, matched to your brand
About
Ask in plain words for an architecture diagram, a quadrant, a sequence of an auth flow or any of 45 diagram types, and the agent picks the type, states its plan and writes one .html file you can open by double clicking. A one-time onboarding step reads your website's palette and fonts so every diagram after that matches your brand. It can also redraw draw.io, Mermaid or Excalidraw files and export to PNG or SVG. The look is deliberately calm: no shadows and no default Mermaid styling.
Install
Works with Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp
Access
HighWhat this skill's own files let it touch on your machine and accounts. Access isn't a verdict: check the publisher and the security audits too.
- Bundles scripts
- Runs shell commands
- Writes files in your project
- Uses the network
- No credentials needed
Instructions, HTML templates and small local scripts. No server, accounts, analytics or telemetry (see PRIVACY.md). The only network use is when you ask it to onboard your brand from a website address. Official builds come only from cathrynlavery/diagram-design; listings under other names are unofficial copies.
Reviewed from source on Oct 22, 2026. Read the files yourself before installing.
More Design skills
All skillsRelated articles
All articles
How to Let Claude Code Test Your Mobile App
Give Claude Code hands in the iOS Simulator or an Android emulator so it checks its own UI changes. Five MCP tools, real setup commands, honest tradeoffs.
Best Memory Tools for Claude Code (2026)
Five tools that give Claude Code memory across sessions, agents and machines, with install commands, honest caveats and when CLAUDE.md is enough.
7 Tools to Cut Your Coding Agent's Token Bill (2026)
Seven tools that cut Claude Code, Codex and Cursor token usage by compressing shell output, searching code and fetching current docs, with honest caveats.