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
- public-apis/public-apisA giant crowd-curated directory of free APIs for developers
- semantica-agi/semanticaAn open-source graph infrastructure that lets AI agents show their work, not just their answers
- cactus-compute/needleA 14MB AI model small enough to run tool-calling on a phone or watch, without internet
- unslothai/unslothA desktop app that lets you run and train AI models on your own computer, no coding required
- macro-inc/macroAn all-in-one workspace where email, chat, docs, tasks, and CRM are cross-linked and share one AI memory
- harry0703/MoneyPrinterTurboAn open-source tool that turns a single topic or keyword into a finished short video, complete with script, footage, subtitles, and music
- basecamp/omarchyA ready-made, opinionated Linux setup built by DHH
- mattpocock/skillsA pack of reusable prompt playbooks that keep AI coding agents like Claude Code from going off the rails
Latest from METAL LAB
- Apple Keeps 2027 Target for Camera AirPods, Qwen3.8-27B Makes 80 Tool Calls Locally
- Binance allows AI agents to trade automatically, limits left up to users
- Meta AI Mac App Now Pulls in Instagram, Facebook, and Ad Accounts
- OpenAI patches Codex file-deletion bug caused by temp-folder cleanup command
- NVIDIA's 300 Verified Skills Lift Correctness by 41 Points