# diagram-design-editorial

A skill that turns a short description into an HTML+SVG diagram for posts and docs. Thirteen types, no Mermaid, no build step, styling matched to your site.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 433 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/diagram-design-editorial/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/diagram-design-editorial

## What it does

The skill covers thirteen diagram types: architecture, flowchart, sequence, state machine, ER model, timeline, swimlane, quadrant, nested, tree, layer stack, Venn and pyramid/funnel. Describe what you want and Claude picks a type, writes the HTML and saves the file. Two starting points ship with it: `assets/template.html` for a minimal light diagram and `assets/template-full.html` when you want summary cards alongside it.

Output is self-contained HTML plus SVG, so nothing has to be compiled and no charting library gets pulled in. The design rules are strict. Every coordinate, width and gap is a multiple of 4px, shadows are out, corner radius stays at 10px or less, and borders are 1px hairlines. Three font families split the work: Instrument Serif for titles, Geist Sans for node labels, Geist Mono for ports, URLs and field types. One accent colour per diagram, used on one or two focal nodes.

Out of the box the palette is neutral — warm paper, charcoal ink, rust accent. To match your own site, run onboarding: the skill fetches the homepage, pulls the palette and font stack, maps them onto `paper`, `ink`, `muted`, `accent` and `link`, then runs WCAG AA contrast checks. You can also edit `references/style-guide.md` by hand. On first use in a new project, if that file still holds the defaults, Claude stops and asks whether to run onboarding, paste tokens manually, or keep the defaults.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/diagram-design-editorial/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/diagram-design-editorial/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/diagram-design-editorial/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/diagram-design-editorial/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills diagram-design-editorial
```

2. **Manually: put the files in place**
- File: `.github/skills/diagram-design-editorial/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/diagram-design-editorial
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/diagram-design-editorial/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill diagram-design-editorial -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/diagram-design-editorial/SKILL.md

## When to use it
- sketch a service architecture with a database and cache
- walk through the OAuth 2.0 handshake step by step
- place projects on an impact-versus-effort quadrant
- map an order lifecycle from payment to delivery
- lay out an ER model with fields and relations

## Example prompts
- I need a sequence diagram of the OAuth 2.0 handshake.
- Onboard diagram-design to https://yoursite.com.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 139 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md