diagram-design
by cathrynlavery
An add-on for AI coding assistants such as Claude Code, Codex and Cursor that lets them draw diagrams as a single self-contained HTML and SVG file. It is for producing clean, brand-matched architecture diagrams, flowcharts, quadrants and sequences from plain-language requests.
- Stars
- 61.5k
- Licence
- MIT
- Runs on
- Your computer
- Setup
- Easy
- Language
- HTML
- Age
- 193 days
What you can do with it
- Ask your AI assistant for an architecture diagram, quadrant or sequence diagram and get one HTML file
- Point it at your website so it picks up your colours and fonts for every later diagram
- Import diagrams from draw.io, Mermaid or Excalidraw and export the results to PNG or SVG
Make money with it
A freelancer could offer branded diagram and documentation packages to clients, using this to produce them quickly.
An idea, not financial advice. Check the licence before charging for anything built on it.
Ways a business could use it
- Produce branded technical and process diagrams for proposals, documentation and client reports without paying for a diagramming subscription
- Create consistent visuals for blog posts, pitch decks and onboarding guides in minutes rather than drawing them by hand
Can you use it commercially?
Free to use, change and sell, including in paid products. Keep the copyright notice.
Not legal advice. Read the project's licence file before building a product on it.
Getting it running
Install it with the command "npx skills add cathrynlavery/diagram-design", or through the plugin marketplaces of Claude Code, Codex, GitHub Copilot and others.
Follow the official instructions in the project README.
Things to check
- Needs an AI coding assistant, which may require a paid subscription or API access
- The README lists what the skill sends over the network, so check PRIVACY.md before use
Who's talking about it
Checked 27 Oct 2026. Summary drafted by AI from the project's README.
