Skip to content
Get packs

Guide · Agent skill

How to use the Diagram Design agent skill (diagram-design)

Updated · written with AI from the project's own documentation and checked against our catalogue data

The diagram-design skill is an agent skill that lets a SKILL.md-compatible agent, such as Claude Code or the Claude apps, turn a description of a system, process, data model or chart into a self-contained HTML file with inline SVG. This guide explains what the skill does, how to install it, how to ask for diagrams in plain language, and what to check for safety and quality. After reading it you should be able to install the skill and request a diagram that follows your project's style.

Diagram Designcathrynlavery/diagram-design · MIT

Quick start

  1. 1Download the skill. Download the ZIP of skills/diagram-design from the page where you found this guide.
  2. 2Unzip it into a skills folder. Place it in ~/.claude/skills/ for personal use, or in the project's .claude/skills/ folder for a single project.
  3. 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
  4. 4Describe the diagram you need. Ask in plain language, naming the system, process or data and the audience.
  5. 5Set up the style guide. If the agent asks about your style guide on the first diagram, choose a website, folder, pasted tokens, a saved profile or the default.
  6. 6Open the HTML output. View the generated self-contained HTML file in a web browser and check that nothing needs removing.

What the diagram-design skill makes the agent do

Once installed, the agent produces diagrams as self-contained HTML files with inline SVG, following an editorial design system. The skill covers about 45 visual types, including architecture, flowchart, sequence, state machine, ER/data model, Gantt, Sankey, org chart, treemap, Venn and many more.

The skill can also export to PNG and import existing .drawio, Mermaid or .excalidraw files. Before drawing, it asks whether a diagram would teach the reader more than a well-written paragraph, table or list, and it advises against unnecessary diagrams.

  • Output: self-contained HTML with inline SVG, optional PNG export
  • Input: a description, or an existing .drawio, Mermaid or .excalidraw file
  • Coverage: about 45 visual types, selected by the agent for the content

Install the diagram-design skill

Download the ZIP of skills/diagram-design from the page where you found this guide, then unzip it into one of two locations. Use ~/.claude/skills/ for a skill available across your projects, or a project's .claude/skills/ folder to limit it to that project.

In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Ask for a diagram with a natural request

You do not need special syntax. Describe what you want shown, who the audience is and, if you have one, the brand to follow. The agent chooses a suitable diagram type from the list, so you can name a type if you already know which one you need.

The skill's guidance is that behaviour, state, enforcement or risk should be shown with the matching pattern and type, so describe those aspects clearly in your request.

  • Draw a sequence diagram of the login flow between the browser, API and auth service.
  • Make an ER diagram of our orders, customers and invoices tables.
  • Create a Gantt chart for the three migration phases, in our client's brand style.
  • Turn this Mermaid file into a presentation-ready architecture diagram.

Set up your style guide on the first diagram

Before the first diagram in a new project, the skill checks whether the style guide has been customised. If the colours and typography are still the shipped defaults (paper #f5f5f5, ink #2d3142, accent #bf4520), the agent pauses and asks how to proceed.

You can point it to a website URL, an installed skill, a local folder or design system, pasted tokens, or keep the default. You can also load a saved profile. After onboarding the agent can offer to save the settings as a named profile.

  • Website URL, installed skill, local folder/design system, or pasted tokens
  • Keep the default if you do not need branding
  • Load a saved profile for a client or project

Review the example files and output

The skill ships example HTML files showing architecture, architecture delta and axonometric plan layouts, including dark variants and an animated campus plan. Open them in a web browser to see the visual range before you request your own diagram.

Open the generated HTML file in a web browser to view it. Keep the design density moderate: the skill's target is about 4 out of 10, and it suggests splitting a diagram into two once it has more than nine nodes.

  • Example files include example-architecture.html and example-architecture-delta.html
  • Open generated files in any web browser
  • PNG export needs an image export tool, which the skill does not specify
assets/example-architecture.html

Safety, requirements and limits

The skill's metadata says it runs no scripts and uses no network. It requires a SKILL.md-compatible agent and a web browser to view the HTML output. PNG output is optional and needs an image export tool that the skill files do not name.

The skill is a schematic and editorial tool. It is not suited to ultra-precise engineering drawings or CAD-style formal modelling, and for quick plain-text sketches it recommends a separate text tool.

  • Runs scripts: no
  • Uses network: no
  • Licence: MIT
  • Not for CAD-grade engineering drawings or quick text sketches

What people use it for

  • Architecture or sequence diagrams for a developer design document
  • Client-facing process, data or security diagrams in a consistent brand style
  • Converting an existing Mermaid, .drawio or .excalidraw diagram into a polished HTML version
  • Gantt charts or org charts for a product or team presentation

Frequently asked questions

Is the diagram-design skill free?

The skill is published under the MIT licence, as stated in its metadata. The licence terms apply to the skill files themselves, and any agent or Claude app you use to run it may have its own terms.

How do I install the diagram-design skill?

Download the ZIP of skills/diagram-design and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.

What does the diagram-design skill need to run?

It needs a SKILL.md-compatible agent such as Claude Code or the Claude apps, and a web browser to view the generated HTML files. PNG export is optional and needs an image export tool that the skill files do not specify.

Does diagram-design run scripts or use the network?

According to its metadata, the skill runs no scripts and uses no network. Its output is a self-contained HTML file with inline SVG.

Can it import diagrams from other tools?

Yes. The skill can import existing .drawio, Mermaid and .excalidraw files and redraw them in its editorial style.

What is an alternative for quick plain-text sketches?

The skill itself recommends a separate plain-text tool such as wiretext for quick unicode diagrams, and it does not ship one. For ultra-precise engineering drawings, use a CAD or formal modelling tool instead.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use diagram-design if you need presentation-ready architecture, sequence, process or data diagrams, especially when they must follow a brand style guide. Pick something else for quick text sketches, CAD-grade engineering drawings, or cases where a table or paragraph explains the information just as well.

Download the skill