diagram-design

Thirteen editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

public

Forked

Diagram Design

undefinedI wanted good-looking diagrams for my blog posts.undefined

I write at littlemight.com. Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I’d ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I’d either fight with Figma for 30 minutes or just skip the diagram.

So I built a Claude Code skill for it. 13 types, editorial quality, matches your brand in 60 seconds by reading your website.

The highest-quality move is usually deletion. Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.

What it makes

All 13 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.

Architecture _{Components + connections}	Flowchart _{Decision logic}	Sequence _{Messages over time}
State machine _{States + transitions}	ER / data model _{Entities + fields}	Timeline _{Events on an axis}
Swimlane _{Cross-functional flow}	Quadrant _{Two-axis positioning}	Nested _{Hierarchy by containment}
Tree _{Parent → children}	Layer stack _{Stacked abstractions}	Venn _{Set overlap}
Pyramid / funnel _{Ranked hierarchy or conversion drop-off}

undefinedBrowse the live gallery: open assets/index.html in your browser to flip through all 13 types with light / dark / full-editorial tabs.

Install

# Clone into your Claude Code skills directory
git clone git@github.com:cathrynlavery/diagram-design.git ~/.claude/skills/diagram-design

# Or if you keep skills elsewhere, symlink it
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design ~/.claude/skills/diagram-design

Restart Claude Code. The skill registers as diagram-design and activates whenever you ask Claude to make a diagram.

Alternative: install as a plugin

Quicker to install — but the skill lives in the plugin cache, so edits to references/style-guide.md don’t survive plugin updates. Pick this if you just want to try it out; use the clone route above if you plan to customize the style guide by hand.

undefinedClaude Code:undefined

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

undefinedClaude Cowork: Customize → Directory → Plugins → + → paste cathrynlavery/diagram-design → Sync, then install from the Personal list.

Onboarding — make it look like your brand

The whole point: ship editorial-quality diagrams in your colors and typography, not a generic template.

Out of the box, diagrams render in a neutral stone + rust palette (warm off-white paper, deep charcoal ink, rust-orange accent). Good enough to screenshot straight away. But 60 seconds of onboarding is better — the skill will pull your brand from your website and apply it across every diagram.

The flow

You:     "onboard diagram-design to https://yoursite.com"
Claude:  → fetches the homepage
         → extracts the dominant palette + font stack
         → maps detected values to semantic roles:
             paper, ink, muted, accent, link
         → shows a proposed diff
         → writes your tokens to references/style-guide.md
You:     "yes, apply it"

Every new diagram now uses your colors. Your website’s paper color becomes the diagram background. Your CTA color becomes the focal accent. Your body font stack becomes the node label family.

What gets extracted

Detected from your site	Becomes
`<body>` background	`paper` token
Primary text color	`ink` token
Secondary / caption text	`muted` token
Cards or containers	`paper-2` token
Most-used brand color (CTA, link, heading)	`accent` token
`<h1>` font family	`title` font
`<body>` font family	`node-name` font
`<code>` / `<pre>` font	`sublabel` font

Contrast checks happen automatically

Before writing tokens, the skill verifies WCAG AA contrast on ink over paper. If your site has a color that fails contrast at diagram sizes (9–12px), it proposes an adjusted value and explains why.

Manual override

Prefer to set tokens by hand? Open references/style-guide.md and edit the table. Everything downstream reads from there — the 13 types, the annotation primitive, and the gallery all inherit semantic role names (accent, not #b5523a).

First-run gate

The skill won’t silently ship default-skinned diagrams into a branded project. On first use in a new project, it checks if style-guide.md has been customized. If not, it pauses and asks:

“This is your first diagram in this project. The style guide is still at the default. Want to run onboarding, paste tokens manually, or proceed with default?”

See references/onboarding.md for the full spec.

Quickstart

# Open the gallery to see all 13 types
open ~/.claude/skills/diagram-design/assets/index.html

# In Claude Code, just ask:
# "Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
# "I need a quadrant showing Q2 projects by impact vs effort."
# "Give me a sequence diagram of the OAuth handshake."

Claude will pick the right type, build the HTML, and save it. You can also start from a template directly:

cp assets/template.html my-diagram.html        # minimal light
cp assets/template-full.html my-diagram.html   # editorial with summary cards

Architecture

Progressive disclosure. SKILL.md is a lean index — it tells Claude how to pick a type and where to look for detail. Every type lives in its own reference file, loaded only when relevant.

diagram-design/
├── SKILL.md                         — top-level: philosophy, selection guide, checklist
├── references/                      — loaded only when a type or primitive is chosen
│   ├── style-guide.md               — single source of truth for colors + fonts
│   ├── onboarding.md                — the URL-to-tokens flow
│   ├── type-architecture.md
│   ├── type-flowchart.md
│   ├── type-sequence.md
│   ├── type-state.md
│   ├── type-er.md
│   ├── type-timeline.md
│   ├── type-swimlane.md
│   ├── type-quadrant.md
│   ├── type-nested.md
│   ├── type-tree.md
│   ├── type-layers.md
│   ├── type-venn.md
│   ├── type-pyramid.md
│   ├── primitive-annotation.md      — italic-serif editorial callouts
│   └── primitive-sketchy.md         — hand-drawn SVG filter variant
├── assets/
│   ├── index.html                   — live gallery, tabbed
│   ├── template*.html               — scaffolds for new diagrams
│   └── example-<type>.html          — 3 variants × 13 types
└── docs/screenshots/                — the images in this README

This keeps Claude’s working context tight (only load what you need) and makes the skill easy to extend — drop a new type-<name>.md and wire it into the selection guide.

What loads when

The top-level SKILL.md is always in context. Everything else is pulled in only when relevant — this is what keeps the skill fast even with 15 reference files.

You ask for…	Claude loads
“Make me a flowchart”	`SKILL.md` + `references/type-flowchart.md`
“Build an architecture diagram”	`SKILL.md` + `references/type-architecture.md`
“Onboard this skill to my site”	`SKILL.md` + `references/onboarding.md` + `references/style-guide.md`
“Add an editorial callout to this diagram”	`SKILL.md` + `references/primitive-annotation.md`
“Give me a hand-drawn version”	`SKILL.md` + `references/primitive-sketchy.md`
Routine diagram-making (any of the 13 types)	Only `SKILL.md` + that one type’s reference

No matter how many types exist, Claude only reads the one you need. Add a new type tomorrow and nothing else changes.

The design system (in one paragraph)

One accent color, 1–2 focal elements per diagram. Three font families: Instrument Serif (title + italic callouts), Geist sans (node names), Geist Mono (technical sublabels). 1px hairline borders, no shadows, max border-radius 10px. Every coord, width, and gap divisible by 4 — non-negotiable, it’s what keeps the diagrams from feeling AI-generated. Mono is for technical content (ports, URLs, field types), not a blanket “dev” aesthetic. Coral-tinted focal nodes draw the eye to the 1–2 things that matter. Full spec in SKILL.md.

Primitives

undefinedAnnotation callout — italic Instrument Serif + dashed Bézier leader, for editorial asides that sit in the margins. See references/primitive-annotation.md.
undefinedSketchy filter — SVG turbulence + displacement map for a hand-drawn variant. Good for essays, not for technical docs. See references/primitive-sketchy.md.

When not to use this skill

undefinedQuick unicode diagrams for tweets or terminal output → wiretext-style skill.
undefinedLists of anything → a table or bullets.
undefinedBefore/after comparisons → a table.
undefinedOne-shape “diagrams” — a single box with a label → just write the sentence.

Before drawing, ask: would a reader learn more from this than from a well-written paragraph? If no, don’t draw.

About

Made by Cathryn Lavery — founder of BestSelf.co. I write about AI, entrepreneurship, and designing nice-looking things at littlemight.com — blog + newsletter.

If this is useful, star the repo and come say hi on X.

Find me

[beta]v0.3.0