Token-built abstract of the flow editor: white node cards on a dotted canvas, a coloured left bar per node (mint = trigger, lavender = steps, vermillion = end), curved grey edges with pill labels, and a mint run-line that travels trigger → step → approval → end on a slow loop. Same abstraction level as AppMock; no real text beyond the node kind labels. prefers-reduced-motion and running={false} both freeze the run-line to the full static mint route.
<FlowMock caption /> — the default frame. A mint segment loops the trigger → step → approval → end route every 7 seconds; each node it passes gets a brief halo pulse.
<FlowMock running={false} /> — the full route as a solid mint path, no dash travel, no pulse. This is also exactly what prefers-reduced-motion: reduce renders for the animated variant.
<FlowMock size="sm" /> — the 480px frame for card slots (the Automate cards, DetailHero illustrations on narrow layouts).
Rules. Tokens only; greeked content, no real text beyond the node kind labels; nodes are rectangles because they do work (hexes indicate); node bars are mint (trigger), lavender (steps and approval), vermillion (end); the run-line is --c-mint-500; no orange anywhere in this component.
The React component lives in docusaurus-preset/src/components/FlowMock/. Props: size ('sm' | 'md'), caption (string, or true for the default label), running (default true). Import with import {FlowMock} from '@conduction/docusaurus-preset/components';.