Diagram Design: the seven dials

Options exposed by the diagram-design skill · 21 August 2026

The skill exposes seven independent choices. Turning one doesn't constrain the others — a Wardley map can be sketchy, animated, and dark-skinned at the same time.

Here is what the Guest Booking Producer flowchart is currently set to:

Visual type — Flowchart

Semantic pattern — none

Variant — Minimal light, plus the editorial card row

Style overlay — none

Animation — none

Skin — shipped default

Output — html · doc-inline · mixed


1. Visual type

Currently set to: Flowchart · 39 options

The one dial that decides layout grammar. Everything else dresses the result; this picks what the result is.

The full list: Architecture, IT current-state, Flowchart, Sequence, State machine, ER / data model, Timeline, Swimlane, Quadrant, Radar / spider, Polar chart, Loop / flywheel, Nested, Tree, Org chart, Layer stack, Venn, Pyramid / funnel, Bar chart, Treemap, Line chart, Gantt, Scatter plot, High-level, Process, Medallion, Data flow, DP integration, DP security matrix, Sankey, Fishbone, Wardley map, Kanban, User journey, Deployment, Dependency graph, UML class, Story map, Database schema.

The alternative worth considering for this workflow is Swimlane — the same process, split into lanes for you, Pat, Andrew, and the guest. It would make the handoffs explicit in a way a flowchart never does. The cost is that the approval gate stops being the visual center.

2. Semantic pattern

Currently set to: none · 7 patterns

A behavior overlay applied on top of a type, for when what the thing does matters more than how it's arranged. The pattern owns the meaning; the type still owns the layout.

None fits the booking workflow cleanly. The closest is stage framework with semantic slots — every step showing the same four slots (question, input, governance, output). Choosing it would move the diagram from Flowchart to Process.

3. Variant

Currently set to: Minimal light, plus the editorial card row · 4 variants

The page dressing around the figure — how much apparatus the diagram arrives with.

The flowchart is a hybrid: minimal light for the figure, with full editorial's summary cards bolted on for the operating rules and the verification gate.

4. Style overlay

Currently set to: none · 6 overlays, stackable

Optional texture, layered onto any variant. These combine — sketchy strokes on a dark full-editorial page is a legal configuration.

5. Animation

Currently set to: none · 4 modes

Motion explains a complete static diagram; it never supplies missing meaning. The static frame has to carry the whole thing without JavaScript, and reduced-motion hides the controls.

step is the one worth trying here. It's built for teaching a trace, which is exactly what the approval gate and the 48-hour branch are. The available motion primitives are path draw, staggered reveal, queue counter, typing, policy evaluation, flow token, containment, and audit append.

6. Skin

Currently set to: shipped default · 6 sources

The actual colors and fonts. Tokens are semantic — paper, ink, muted, accent, link — so re-skinning touches one file and every diagram inherits it.

This is the dial furthest from where it should be. Run extract from an installed skill against plainspoken-doc-style to pull Cool Slate out, then save it as a profile bound to this folder. Every diagram after that matches the house style automatically instead of shipping in atomic tangerine.

7. Output

Currently set to: html · doc-inline · mixed · 4 sub-dials

Set before drawing, because these change the deliverable rather than decorate it. Size isn't cosmetic — it sets the viewBox and the type ramp, so a slide gets 16px node labels instead of 12px.

Format

html · svg · png · html+png

Size

doc-inline · doc-wide · slide-16x9 · slide-4x3 · social-og · social-square · print-a4-landscape · print-letter-landscape · fit

Detail

faithful (up to 24 nodes) · balanced (up to 12) · simplified (up to 7). This one only applies to imports, so it isn't in play here.

Audience

engineer · mixed · executive. Governs wording, not node count.

Also on this dial: the skill imports and redraws draw.io files (.drawio, .drawio.png, .drawio.svg) and Mermaid (.mmd, or fenced blocks in markdown). It extracts the structure and re-lays it out editorially rather than reproducing the renderer's spacing, then reports a fidelity ledger of anything merged, collapsed, or dropped.