Examples

The same flowchart, drawn every way the diagram-design skill allows · 21 August 2026

One workflow — booking a podcast guest — rendered first without the skill, then with it, then through each style overlay and animation mode it offers. Same content every time. Only the dial changes.

The baseline

Flowchart without the repo What you get asking for a flow chart with no design system in play.
Flowchart with this repo The full document, both parts, default skin. This is the original — every variation below is built from its geometry.
The seven dials this repo turns Every option the skill exposes, and where the original is set.

Style overlays

Optional texture, layered onto any variant. These stack — sketchy strokes on a dotted dark page is a legal configuration.

Sketchy A turbulence filter wobbles every stroke and edge. Text sits outside the filtered group, which is what keeps the labels crisp. An essay register — the reference bars it from technical docs.
Dotted paper A 22×22 dot pattern at about 10% ink behind the figure. Opt-in only: the texture fights any surrounding chrome, so it wants a page of its own.
Editorial callouts Two marginal asides in italic serif, each on a dashed leader with a landing dot. Two is the hard maximum — past that it stops being signal.
Icon set Seven 16px monochrome icons set into the step boxes, inheriting currentColor. The decision diamonds get none — shape already carries their type.

Animation

Motion explains a complete static diagram; it never supplies missing meaning. Both pages below render the whole flowchart with JavaScript off, and both drop to the complete static frame under reduced-motion.

Autoplay reveal One deterministic run on load — seven steps, 720ms each — ending complete and never replaying itself. reveal is the only autoplay the skill sanctions.
Step-through The same seven states, paused and driven by you: Play, Pause, Replay, Previous, Next, plus arrow keys, Space, R, Home and End. Each step announces itself to screen readers.

The six variations show part one of the flowchart — research through the approval gate. The animation budget caps a figure at eight steps and twelve moving items, and the full two-part document runs well past that, so all six use the same nine-node figure to keep the comparison honest. The complete document, both parts, is the original.