cathrynlavery/diagram-design
A skill that makes AI coding tools draw magazine-quality diagrams instead of generic rounded boxes
Ask Claude Code, Codex, or Pi for a diagram and you usually get a bland rounded-box picture that doesn't match your site. This repository ships a skill with 38 editorial-style diagram types rendered as self-contained SVG-in-HTML files, no build step needed. Point it at your website and it pulls your colors and fonts in about 60 seconds so every diagram matches your brand.
What it does
- Covers 38 diagram types — architecture, flowcharts, sequence diagrams, state machines, org charts and more — each shipped in minimal light, minimal dark, and full-editorial variants.
- Enforces a strict visual system: no shadows, 1px hairline borders, only three font families (Instrument Serif and the Geist family), and every coordinate/width/gap aligned to a 4px grid so it doesn't look AI-generated.
- Can import existing draw.io or Mermaid diagrams and redraw them in the same system, letting you choose output format, size, and level of detail while reporting what was merged or dropped.
- Reads a user's website to auto-extract background, text, accent colors and fonts, checks WCAG AA contrast, and saves the result as a reusable brand style guide.
- Has 23,713 GitHub stars and includes automated checker scripts in the repo that catch style violations and accessibility issues before changes are merged.
Why it matters
It solves the common frustration of AI-generated diagrams looking generic and off-brand, which normally pushes people to either fight with design tools or skip diagrams entirely. It lets anyone writing docs, blog posts, or slides get on-brand, publication-ready diagrams directly from their AI coding assistant.
Terms in this repo
- SVG · a vector image format that stays sharp at any zoom level
- Mermaid · an open-source tool for drawing diagrams from text
- draw.io · a web-based diagram editing application
- WCAG AA · a web accessibility standard for sufficient text-background contrast
- Agent Skill · a set of instructions an AI coding tool loads to perform a specific task
Repository description (English)
38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
Open on GitHubTrending repos
- vorssaint/vorssaint-utilsOne free menu bar app replaces a dozen paid Mac utilities
- Alishahryar1/free-claude-codeA local proxy that lets coding AI agents run on 49 free or cheap model providers instead of one paid service
- freestylefly/awesome-gpt-image-2A library of 532 reverse-engineered prompts that turn GPT-Image2 into a predictable image-making tool
- block/buzzAn open-source workspace where humans and AI agents chat, code, and review in the same rooms
- NousResearch/hermes-agentNous Research's Hermes is an AI agent that gets smarter the more you use it
- virgiliojr94/book-to-skillA tool that turns technical book PDFs into on-demand reference skills for AI coding agents
- VoltAgent/awesome-agent-skillsA single hub collecting over 1000 'how-to' manuals that make AI coding assistants act like experts
- anthropics/claude-plugins-communityA shared shelf where anyone's Claude add-ons get listed for install