cathrynlavery/diagram-design

What is it?

Key features

• 01Produces one self-contained HTML file with inline SVG that opens in any browser.
• 02Supports 45 diagram types, including architecture, sequence, flowchart, ER, Gantt and charts.
• 03Extracts palette and fonts from a website to apply a brand across all diagrams.
• 04Redraws existing draw.io, Mermaid and Excalidraw files in the same style.
• 05Exports diagrams to SVG or PNG, with an optional offline font mode.

Use cases

• Creating architecture or sequence diagrams for a technical blog post or documentation page.
• Turning a Mermaid or draw.io diagram into a polished visual for slides.
• Keeping diagrams consistent with a company's website brand across a project.
• Producing quadrant, Venn or timeline graphics for presentations.

Quick start

1. 1

   Install the skill with the skills CLI

   npx skills add cathrynlavery/diagram-design
2. 2

   In Claude Code, add the plugin marketplace (optional)

   /plugin marketplace add cathrynlavery/diagram-design
3. 3

   In Claude Code, install the plugin (optional)

   /plugin install diagram-design@diagram-design
4. 4

   Ask your agent in plain words for a diagram; it writes one .html file you can open in a browser

Things to know

• !Output quality depends on the model used, and the same prompt can produce different layouts.
• !The output is not an editable source format, so there is no text to diff and no canvas to edit directly.
• !The README says the skill's style guide can be replaced by package updates if you customize it through a managed install.

Topics

FAQ

What is diagram-design?

An agent skill that makes editorial diagrams as one self-contained HTML + SVG file, with 45 diagram types and brand matching. Diagram Design is an agent skill for coding agents such as Claude Code, Codex, GitHub Copilot, Cursor and Pi. You describe the diagram in plain language, and the agent picks one of 45 diagram types and writes a single HTML file containing inline SVG that opens directly in a browser, with no build step or JavaScript.

Is diagram-design free to use? What license does it have?

diagram-design is open source under the MIT license. Check the license terms before using it in commercial products.

Is diagram-design still maintained?

Actively maintained. The last commit to diagram-design was on Oct 16, 2026.

What can I use diagram-design for?

Creating architecture or sequence diagrams for a technical blog post or documentation page. Turning a Mermaid or draw.io diagram into a polished visual for slides. Keeping diagrams consistent with a company's website brand across a project. Producing quadrant, Venn or timeline graphics for presentations.

How do I install diagram-design?

Install the skill with the skills CLI: npx skills add cathrynlavery/diagram-design In Claude Code, add the plugin marketplace (optional): /plugin marketplace add cathrynlavery/diagram-design In Claude Code, install the plugin (optional): /plugin install diagram-design@diagram-design Ask your agent in plain words for a diagram; it writes one .html file you can open in a browser

Where can I get diagram-design?

The source code and installation instructions are on GitHub: https://github.com/cathrynlavery/diagram-design