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.
Updates
- September 9, 2026: Stars 32,934 → 35,747.
- September 7, 2026: Stars 31,216 → 32,934.
- September 5, 2026: Stars 29,169 → 31,216.
- September 1, 2026: Stars 27,683 → 29,169.
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
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-designIf 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
TreScout did not build this tool · we found it in GitHub trends and wrote it up. This page describes the repository as of 2026-08-13: The star count and our text belong to that day, the repository may have changed since. Check the repository link for the current state. This page was machine-translated from the Turkish original · the Turkish version prevails.