cathrynlavery/diagram-design
29 editorial SVG diagram templates for Claude Code and LLMs
Stop letting AI generate ugly Mermaid diagrams.
AI diagram generation usually looks awful.
Default Mermaid charts from Claude Code or ChatGPT come out cluttered, poorly aligned, and impossible to use in real documentation or pitch decks.
29 self-contained HTML and SVG diagram types.
Diagram-Design includes twenty-nine hand-crafted diagram types — from distributed system flows to data pipelines — rendered purely in clean HTML and SVG.
Add one rule to your AI coding agent.
Drop the skill into Claude Code, Codex, or Cursor. Your agent will automatically choose the right visual layout and generate crisp vector diagrams.
Zero external libraries or heavy dependencies.
No Mermaid syntax errors, no broken graphviz builds. Every diagram renders instantly in any browser or markdown viewer as pure vector code.
14.1k stars. HTML and SVG. MIT.
Over fourteen thousand stars on GitHub in its first week, completely open source under MIT. The best way to upgrade your agent's documentation.