Diagram Design
A third-party skill from Cathryn Lavery that makes diagrams as single HTML files with inline SVG. It covers about forty visual types, including architecture, flowchart, sequence, ER, org chart, Gantt, Sankey, kanban and bar or line charts, each in light, dark and full-editorial variants. On first use it asks for your website, design system or color tokens so the output matches your brand. It also imports .drawio, .excalidraw and Mermaid files. The skill runs a few local Python scripts for import and self-checks and needs Python 3 for those. It makes no network calls. Use it when you need a diagram that looks designed instead of default boxes. Licensed MIT.
This skill hasn't been reviewed yet.
What it does
Editorial diagrams as self-contained HTML and SVG: architecture, flowcharts, ER, timelines, charts and more, matched to your brand.
How to use this
Once it is installed, this skill picks itself up. You do not need to name it.
- Created by
- Cathryn Lavery
- Category
- Productivity
- Source
- View source
Run this on Skills and Agents
You can run the skill on Skills and Agents by creating an account. You don't need to install anything. We provide the model and tokens. Your connected tools and company brain are ready to use.
Skills give you best practices and templates to get the most out of your AI
Add this skill
This skill is from a third party and hasn't been reviewed yet.
Copy this prompt into your AI tool to install this skill
Install the "Diagram Design" skill from https://raw.githubusercontent.com/cathrynlavery/diagram-design/dc1ace47b99a419e42d01a03cb6ace5346efa8ae/skills/diagram-design/SKILL.md. Read the SKILL.md there and follow it as a skill.SKILL.md, then in Claude go to Customize > Skills, click the + button, choose Create skill, then Upload a skill and pick the file. See Claude's help page.Not sure which? See the install guide.
Share this skill
Diagram Design
A third-party skill from Cathryn Lavery that makes diagrams as single HTML files with inline SVG. It covers about forty visual types, including architecture, flowchart, sequence, ER, org chart, Gantt, Sankey, kanban and bar or line charts, each in light, dark and full-editorial variants. On first use it asks for your website, design system or color tokens so the output matches your brand. It also imports .drawio, .excalidraw and Mermaid files. The skill runs a few local Python scripts for import and self-checks and needs Python 3 for those. It makes no network calls. Use it when you need a diagram that looks designed instead of default boxes. Licensed MIT.
Third-party, by Cathryn Lavery
September 19, 2026
Simple install — no setup required
Open the Claude desktop app and go to the Project you want this in
Go to Code, then Customize, then click Create a new skill and upload the skill file below
Say a trigger phrase to activate it
Download the skill file below
In ChatGPT, create a Project and attach the file (or paste its contents into the project instructions). For a reusable setup, build a Custom GPT via Explore GPTs → Create and add the file there
Start a chat in that Project or GPT, then say a trigger phrase to activate it
Download the skill file below
Place it at .cursor/skills/diagram-design/SKILL.md (rename the downloaded file to SKILL.md). The shared .agents/skills/diagram-design/SKILL.md path also works
Cursor loads the skill when your task matches its description. Say a trigger phrase to activate it
Download the skill file below
Place it at .github/skills/diagram-design/SKILL.md in your repository (rename the downloaded file to SKILL.md)
Copilot loads the skill when it is relevant to your task. Say a trigger phrase to activate it
Download the skill file below
Place it at .agents/skills/diagram-design/SKILL.md in your repository (rename the downloaded file to SKILL.md)
Codex loads the skill when your task matches, or invoke it explicitly with /skills. Say a trigger phrase to activate it
Your skill is downloading.
Create a free account and the platform does the rest:
- Get an email the moment this skill updates
- See every skill and agent you've installed, in one place
- Get your next recommendation based on what you actually use
No credit card. Takes about a minute.
What this skill does
This is an overview of the skill from the site, not the skill's real instructions. The full SKILL.md Claude reads when this skill is active lives on GitHub at the source below.
What it does
Turns a description into a finished diagram, saved as one HTML file you can open in a browser. Pick from about forty types, from architecture and flowcharts to Sankey and kanban. Every type comes in light, dark and full-editorial versions.
- Matches your brand. The first time, it asks for your site, design system or tokens.
- Imports what you have. Converts .drawio, .excalidraw and Mermaid files.
- Keeps it simple. Aims for the fewest nodes and lines that still tell the story.
Source: cathrynlavery/diagram-design, MIT license.
View full SKILL.md on GitHub