NewsletterSubmit a tool

Community · by cathrynlavery

Diagram design Claude skill

The Diagram design skill lets an AI assistant build standalone HTML diagrams that embed inline SVG.

  • MIT licence
  • ★ 58,228 on GitHub (whole repository)
  • Verified against its source 19 Oct 2026
View SKILL.md Repository

What the Diagram design skill does

The assistant can produce standalone HTML diagrams drawn with embedded SVG, styled by an editorial design system. The skill spans forty-five visual types and applies when a graphic would teach a reader more effectively than prose, a table, or a bulleted list. The description also notes importing from .drawio, Mermaid, and .excalidraw files, plus an export section covering PNG and SVG.

What it covers

  • Forty-five visual diagram types
  • Import from .drawio, Mermaid, and .excalidraw
  • Export to PNG or SVG

How to install it

In Claude Code

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Other ways

npx skills add cathrynlavery/diagram-design

Steps change between versions. Check the official instructions before you install.