AcademyResourcesDesign and media

Diagram Design for Claude Code

Product, design and engineering teams use it to get presentable diagrams straight from Claude Code.

  • Recommendedour rating
  • 48,642repository stars
  • MITlicence
  • todaylast update
git clone https://github.com/cathrynlavery/diagram-design.git
README.md

Loading the file...

What it does

A set of skills that makes Claude Code produce editorial diagrams as self-contained HTML and SVG files. Diagrams follow fixed design rules, with no shadows, and cover 44 diagram types. It can also be installed as a Claude Code plugin with slash commands.

Use cases

  1. 01Generate a system diagram for a technical document
  2. 02Create a quadrant to prioritise quarterly projects
  3. 03Produce a sequence diagram for an integration

Questions about
Diagram Design for Claude Code.

What is Diagram Design for Claude Code used for?

Product, design and engineering teams use it to get presentable diagrams straight from Claude Code. A set of skills that makes Claude Code produce editorial diagrams as self-contained HTML and SVG files. Diagrams follow fixed design rules, with no shadows, and cover 44 diagram types. It can also be installed as a Claude Code plugin with slash commands.

How do I install Diagram Design for Claude Code?

Run this in your terminal: git clone https://github.com/cathrynlavery/diagram-design.git

Is Diagram Design for Claude Code open source?

Yes. The code is on GitHub (cathrynlavery/diagram-design) under the MIT licence.

Is Diagram Design for Claude Code safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.