What is Diagram Design? Drawing diagrams with an agent: 45 types, setup and privacy
You describe what you want in plain language to an agent such as Claude Code, Codex or Cursor; with the Diagram Design skill, the agent draws a diagram as a single, self-contained HTML file with inline SVG. The README and SKILL.md count 45 diagram types (architecture, flowchart, sequence, state, ER, timeline, charts and more). By default the output is an .html file; SVG and PNG export are requested separately (PNG requires Playwright and Chromium). Install with `npx skills add cathrynlavery/diagram-design`. It is MIT-licensed; it has no server, no account and no telemetry, and the only outside request is the generated HTML loading fonts from Google Fonts.
- What it does
- Draws a diagram you describe in plain language as HTML and SVG
- Type
- Agent Skill (instructions, templates and small local scripts)
- Where
- Claude Code, Codex, Cursor, Copilot, Gemini CLI and more
- Output
- Single-file HTML + SVG; PNG separately
- Data
- No telemetry; the only outside request is Google Fonts
- Turkish
- Not stated in the official sources
- Price
- Free (MIT); no account
What does Diagram Design do?
You describe an architecture, a process or a database schema to your agent; the skill gives the agent instructions and templates that tell it which diagram type to choose and how to draw it well. The result is a page you can publish: the README says every type comes with 3 static variants (minimal light, minimal dark and full editorial).
The types listed include architecture, flowchart, sequence, state, ER, timeline, swimlane flow, quadrant, radar, bar, line and scatter charts, Sankey, Wardley map, Kanban, UML class and database schema. The number of types differs between sources: the README and SKILL.md say 45, the changelog says 44; this guide follows the two most recent documents.
Who it is for: people who want good-looking diagrams to publish in a presentation, a document or on a website. The README itself considers Mermaid a better fit for diagrams that live in Git and change often: the output is not an editable source format.
How do you install Diagram Design?
No account, API key or MCP server is needed; an agent that supports Agent Skills and a session that can write files are enough. The commands are taken as-is from the README's installation section.
› npx skills add cathrynlavery/diagram-design› npx skills update diagram-design› /plugin marketplace add cathrynlavery/diagram-design› /plugin install diagram-design@diagram-designThe slash commands (export, import, profile, doctor) only come with the plugin installation. Auto-update is off by default for third-party marketplaces; turn it on under /plugin › Marketplaces › diagram-design, then run /reload-plugins.
› codex plugin marketplace add cathrynlavery/diagram-design› copilot plugin marketplace add cathrynlavery/diagram-designThen run codex plugin add diagram-design@diagram-design and copilot plugin install diagram-design@diagram-design respectively. The README has separate sections for Pi, Kiro, Cursor, Gemini CLI, Cline, Windsurf and others.
› git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-designThen run ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design.
The README also describes the organization marketplace route for Claude Cowork (it requires a private or internal repository). The README says nothing about uploading it as a Skill in the claude.ai web chat; whether it works there is unclear.
How do you use Diagram Design?
At the start the agent only sees the skill's name and description; when your request matches the description, the instructions and the relevant type document are loaded. On first use, if the style guide is still the default, it asks whether to "brand it, paste manually or continue with the default".
› /diagram-design:export-diagram path/diagram.htmlThe README openly acknowledges that output quality depends on the model and that the same request can produce a different layout on two runs. If you do not like a layout, describe what you want to the agent and have it redraw.
Which agents does Diagram Design work in?
| Claude CodeYes | Both the skills CLI and the plugin marketplace; slash commands only with the plugin. |
|---|---|
| Codex, GitHub Copilot, Cursor, Gemini CLI, Cline, Windsurf, Zed and othersYes | The README gives separate installation sections. |
| Claude CoworkPartly | Organization marketplace route; requires a private or internal repository. |
| claude.ai (web chat)Unclear | The README does not mention uploading Skills to claude.ai; steps that need file writing and a browser require a code execution environment; the official documentation does not make clear whether it works on claude.ai. |
What does Diagram Design access, and what data leaves your machine?
The text and files you provide in your request (draw.io, Mermaid, Excalidraw), and for branding, a few pages from the website address you give (using the agent's own browsing tool).
The diagram .html file (and .svg, .png if requested). It writes brand values to references/style-guide.md in the skill folder; with a managed installation this can be overwritten on update. What persists is the brand profile under ~/.diagram-design/profiles/.
SKILL.md asks the agent to run a bundled python3 script (self_check.py) to validate the output; for import there are extractor scripts that parse text. No hooks or MCP (based on a scan of the file tree).
PRIVACY.md (October 1, 2026): no server, account, analytics or telemetry; LittleMight receives no data from your use. The only outside request is the opened HTML loading fonts from Google Fonts (Google sees the viewer's IP address, not the diagram content). If you ask for system fonts, there are zero requests.
There is no published security advisory; that does not mean "safe". Your data stays with your agent provider.
Is Diagram Design free?
Yes. The skill is free and MIT-licensed; the cost is the plan of the agent client and model you use (for example, a Claude subscription for Claude Code). Icons come from Tabler Icons (MIT) and Simple Icons (CC0); fonts load from Google Fonts.
- MIT: free to use, modify and use in commercial work
- The agent client's own plan terms apply
Source: README and LICENSE. This is not legal advice.
Common problems and fixes
| What happens | What to do |
|---|---|
| PNG export does not work | pip install playwright && playwright install chromium. /diagram-design:doctor checks the environment; Reported by users open issue #428: doctor may give a false warning for a working headless-shell installation. |
| The font changes when opened offline | The default fonts come from Google Fonts; ask for "system fonts" or set the font source to system in the style guide. |
| The same request gives a different layout on two runs | The README openly acknowledges this: output quality depends on the model. |
| Reported by users SVG export loses paint on some CSS-styled diagrams | Open issues #424 and #429; no workaround is documented. |
How do you remove Diagram Design?
- If you installed with the skills CLI: Delete the skill folder (for example ~/.claude/skills/diagram-design).
- If you installed the plugin: Remove it in Claude Code with
/plugin. - Brand profiles: They remain under ~/.diagram-design/profiles/; delete them if you do not want them.
The .html, .svg and .png files you generated are yours and are not deleted on removal.
Frequently asked questions
How many diagram types does it draw, and what output does it give?
The README and SKILL.md count 45 types (architecture, flowchart, sequence, state, ER, timeline, swimlane flow, charts, Sankey, Wardley, Kanban, UML class, database schema and more). The output is a single .html file (inline SVG); SVG or PNG can also be exported on request.
Can it replace Mermaid?
For diagrams that will be published and need to look good. The README itself considers Mermaid a better fit for diagrams that live in Git and change often: the output is not an editable source format.
What does it write to my computer, and does it send anything to the internet?
It writes the diagram file and saves brand settings to the style guide and (if you want) under ~/.diagram-design/profiles/. PRIVACY.md states there is no server and no telemetry. The only outside request is fonts loading from Google Fonts when the HTML file is opened.
Why does it ask questions on first use?
If the style guide is still the default, it says this is your first diagram and asks whether to brand it, paste manually or continue with the default.
Does it work in the claude.ai web chat?
Not clear. The README does not mention uploading Skills to claude.ai, and steps such as PNG export need a code execution environment.
Related guides
Sources
Not clear in the official sources: Whether it works as a Skill on claude.ai web · how Turkish characters render in diagrams · skills.sh install count · the absence of hooks is based only on the file tree. Each is covered in the relevant section.