2392772541/ai-skills/diagram-design

Diagram Design

Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.

Twenty-seven visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from references/ only when selected.

0. First-time setup — style guide gate

Before generating your first diagram in a new project, verify the style guide has been customized.

Don't silently ship default-skinned diagrams into a branded project.

First check the project root for a .diagram-design marker and resolve it per `references/profiles.md`. A valid marker whose profile exists selects that file directly and skips this gate; profile: default also skips it. A malformed or missing-profile marker follows the visible failure handling in that reference. Never copy a marker-selected profile over the installed working copy.

Open `references/style-guide.md` and check the default tokens. If they're still the shipped defaults (paper #f5f5f5, ink #2d3142, accent #eb6c36 atomic-tangerine), pause and ask the user:

"This is your first diagram in this project. The style guide is still at the default (neutral white-smoke + atomic-tangerine). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now, (f) load a saved client profile."

Then branch per the matching section of `references/onboarding.md`; for (f) follow `references/profiles.md`.

Once the style guide has been customized (or the user explicitly opted for default), skip this gate on subsequent runs. A leading profile header names the copied-in active profile. Without a header, any semantic-role value or typography family differing from shipped defaults means custom-unsaved: skip the gate and offer to save it as a profile. All-default tokens with no marker/header trigger the gate. At the end of every onboarding method, offer to save the result as a named client profile per references/profiles.md.

1. Philosophy

The highest-quality move is usually deletion.

Applied to schematics:

• Every node represents a distinct idea. Two nodes that always travel together are one node.
• Every connection carries information. If the relationship is obvious from layout, remove the line.
• Coral is editorial, not a flag. 1–2 focal nodes per diagram. Using it on 5 nodes erases the signal.
• The schematic isn't done when everything is added. It's done when nothing can be removed.

Target density: 4/10. Enough to be technically complete. Not so dense it needs a guide. Above 9 nodes, it's probably two diagrams.

2. When to Use

Use for any of the 27 visual types (§3) when a reader will learn more from a visual than from prose, a table, or a bulleted list.

Don't use for:

• Quick unicode diagrams → use wiretext.
• Lists of things → table or bullets.
• Simple before/after → table.
• One-shape "diagrams" → just write the sentence.

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

3. Selection: semantic pattern, then visual type

When behavior, state, enforcement, or risk carries the meaning, first load `references/semantic-patterns.md` and choose one primary pattern. Then choose the nearest visual type for layout. If no pattern matches, choose the type directly.

The pattern owns semantic primitives and its tighter budget; the type owns layout grammar. Use `references/animation.md` only when motion is requested or materially clarifies ordered change; static remains the default.

Visual-type guide (27)

Rules of thumb:

• If a 3-column table communicates the same thing, pick the table.
• If two types seem useful, pick the dominant axis; a semantic pattern may add behavior-specific primitives, not a second layout grammar.
• If you're past the complexity budget (§7), split into an overview + detail.

Always load the chosen `references/type-*.md` before drawing. When routed above, also load semantic-patterns.md; when animation is chosen, load animation.md.

Confirm before drawing

Before rendering, state the plan in one short message: the chosen visual type (and semantic pattern, if routed), the size preset, and anything the complexity budget (§7) will force out. If the user is reachable, let them redirect before you draw; if not, proceed and note the assumptions beside the deliverable. Skip the pause only when the request already pins type, size, and content exactly.

4. Universal Anti-patterns

These mark "AI slop" schematics of any type:

Type-specific anti-patterns live in each references/type-*.md.

5. Design System

The design system is skinnable. All colors, typography, and tokens live in a single source of truth — `references/style-guide.md`. This file describes semantic roles (paper, ink, muted, accent, link, …). The default skin is a cool editorial palette (white-smoke paper, jet-black ink, atomic-tangerine accent, blue-slate muted, silver hairlines); to apply your own brand, either edit style-guide.md directly or run the URL-based flow described in `references/onboarding.md`.

When specs below or in type references mention "ink", "accent", "muted", etc., look up the current hex value in style-guide.md.

Semantic roles (at a glance)