From Joke to Deliverable: How diagram-design Redefines AI Diagrams
If you have ever asked an AI to draw an architecture diagram, you probably know the scene: you describe a microservices stack, permission layers, and data flows, and the model returns a Mermaid blob — gray boxes, gray arrows, illegible fonts. A designer winces. You open Figma. Thirty minutes later, the chart is still unfinished.
cathrynlavery/diagram-design was born from this exact frustration. It is a Claude Code skill offering 27 chart types, each rendered as self-contained HTML+SVG with no external dependencies and no JavaScript. It gained 2,951 stars in a single day — proof that a real pain point was solved, not just another "awesome-xxx" list.
27 Charts, Not 27 Templates
Most diagramming tools offer templates — fill in colors, text, lines. diagram-design offers a grammar: each chart has its own structural rules, and the skill knows when to use a swimlane, a pyramid, or a flywheel.
The 27 chart types:
- Architecture: Components, Flowchart, Sequence, State machine, ER model
- Hierarchy: Tree, Org chart, Nested, Pyramid, Layer stack
- Positioning: Quadrant, Radar, Venn
- Flow: Swimlane, Process, Timeline, Gantt
- Data: Bar, Line, Scatter, Medallion, Data flow
- Special: Loop (flywheel), IT current-state, Consultant 2×2, DP integration, DP security matrix
- Saying "draw a microservices architecture diagram" in a conversation triggers the skill automatically; the agent selects the chart type and generates the SVG
- No tool switching, no copy-paste, no separate "rendering task"
- Diagram generation is part of the conversation flow, not a destination
- Pi:
pi install https://github.com/cathrynlavery/diagram-design - Claude Code:
/plugin marketplace add cathrynlavery/diagram-design - Codex:
npx skills add https://github.com/cathrynlavery/diagram-design - Claude Cowork: paste the URL manually
- +2,951 stars in one day — GitHub Trending #1, well above #2
- 27 charts × 3 variants = 81 deliverables
- 0 external dependencies — pure HTML+SVG, no JS, no build step
- 60-second brand adaptation — reads website CSS automatically
- 4 agent platforms supported — Pi, Claude Code, Codex, Claude Cowork
The most interesting addition is the Loop flywheel with a shared memory center and dotted write-back paths — a model for dynamic systems, not a static chart.
Brand Adaptation in 60 Seconds
This is the key to editorial quality. Feed the skill a website URL: it reads the host's CSS, extracts primary, secondary, and accent colors, plus fonts, then maps them to every node, line, and label across all 27 chart types. In 60 seconds, your architecture diagram matches your site's design language.
This kills the root cause of "AI-looking" diagrams: not ugly shapes, but uncoordinated color and typography. diagram-design automates that coordination.
Why a Claude Code Skill, Not a Standalone Tool
The smartest design decision is what it is not: not a SaaS, not a Figma plugin, not a desktop app. It is an Agent Skill installed in Claude Code, Codex, Pi, and Claude Cowork, invoked by the agent when it decides a diagram is needed.
The implications:
This is a new tool-design paradigm for the AI era: tools are called by agents, not by humans. The skill is the agent's hand.
"Deletion Is the Highest-Quality Move"
From the README by Cathryn Lavery:
> The highest-quality move is usually deletion. Every node earns its place.
Anti-Mermaid, anti-PowerPoint, anti-bloat. Editorial-quality restraint comes from limiting the accent color to 1–2 focal elements, targeting a 4/10 information density, and forcing every node to justify its position. This aligns with Dieter Rams's "less but better," John Maeda's *Laws of Simplicity*, and Edward Tufte's data-ink ratio — all encoded as default behavior.
Three Variants: From Draft to Deliverable
Each chart comes in three variants:
1. Minimal Light — white background, black lines, one accent color 2. Minimal Dark — dark mode for embedded documentation 3. Full Editorial — full brand palette for blogs and presentations
You can iterate on a Minimal version during a conversation, then generate a Full Editorial version for publication. The same skill covers the full draft-to-deliverable spectrum.
Installation Reveals the Ecosystem Landscape
diagram-design supports four platforms with different installation commands:
These four platforms represent the current state of the Agent Skill ecosystem — no unified standard, each with its own package manager, but all compatible with the same skill file format. It echoes the early npm/pip/gem fragmentation era.
diagram-design is more than a charting tool: it is one of the first cross-platform agent skills, a living reference for what plugins look like in the agent era.
By the Numbers
A Deeper Observation
diagram-design's viral moment signals the maturation of a new product form: agent skills as standalone products.
AI tool evolution has moved through three waves:
1. Prompt templates (2023–2024) — pre-written prompts, copy-paste usage 2. GPTs / Custom Agents (2024–2025) — system prompts plus tool calls, wrapped as agents 3. Agent Skills (2025–2026) — cross-platform, composable, workflow-bearing capability packages
diagram-design is a textbook example of the third wave. It is not "teaching AI to draw" — it is "giving AI a drawing workflow." The model understands intent; the skill delivers to editorial standards.
This division of labor is the correct posture for AI-era tool design: let the model be the poet, let the skill be the accountant. The same principle as Euclid-MCP's reasoning offshoring — strengths stay in the model, weaknesses go to specialized tools.
---
Repository: cathrynlavery/diagram-design
Language: HTML
Daily growth: +2,951 stars
Install (Claude Code): /plugin marketplace add cathrynlavery/diagram-design