# Create professional diagrams with AI

Diagram-design, developed by Cathryn Lavery, includes 29 different editorial diagram types prepared for the artificial intelligence-supported coding tool Claude Code. This library cleanly presents complex diagrams directly using HTML and scalable vector graphics (SVG) instead of standard diagramming tools.

- ★ 35,747
- HTML
- GitHub Trending · 2026-08-13

## What you get
- Offers 27 different types of editorial quality diagrams
- Produces clean visuals using HTML and SVG
- Quickly creates designs suitable for your brand identity

## Installation
**Local installation and configuration**

```
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design

# Pi: register the checkout as a local package
pi install ~/code/diagram-design

# Claude Code: symlink the inner skill
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
```


## If you don't write code
Tell Claude Code or whatever AI assistant you use to analyze the architecture or workflow of my current project. Then, ask it to create a clean HTML and SVG diagram by choosing the one that best suits the topic I'm explaining from the 27 different visual types in the diagram-design library. Specify that the design reference my website so that it is compatible with the colors and visual language of my brand.

## Related dictionary terms

## Links
- GitHub repository →
- Read in Turkish →

---
Source: TreScout Discover · https://trescout.com/en/discover/diagram-design/