diagram-designlisted

# Diagram Design Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system. Thirteen diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type. --- ## 0. First-time setup — style guide gate **Before generating your first diagram in a new project, verify the style guide has been customized.** Open [`references/style-guide.md`](references/style-guide.md) and check the default tokens. If they're still the shipped defaults (paper `#faf7f2`, ink `#1c1917`, accent `#b5523a` rust), **pause and ask the user**: > *"This is your first diagram in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) run onboarding — I'll pull colors and fonts from your website, (b) paste your tokens manually, (c) proceed with the default for now."* Then branch: - **(a)** → follow [`references/onboarding.md`](references/onboarding.md) to fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`. - **(b)** → accept the user's tokens and write them into `style-guide.md` under a new "Custom tokens" section. - **(c)** → proceed; optionally remind the user they can run onboarding later. **Once the style guide has been customized** (or the user explicitly opted for default), skip this gate on subsequent runs. A si