The companion to flows-canvas.html, which shows one flow in one state.
This shows the whole vocabulary. Specimens are built by node.js and painted by
canvas.css — the same two files the screen uses — so a specimen cannot drift from
the thing it documents. Node kinds and port labels come from
routes/automation/flow-graph.ts; every limit, reply type, operator, action and
trigger kind from packages/shared/src/flows/types.ts. Nothing here is invented.
Every kind the engine executes, plus the stub. The outlets under each are what
nodePorts() returns, not a drawing choice. Note the three header shapes: a step
ON a channel carries the channel logo, the channel name and a blue kind glyph; a step with no
channel carries no avatar and no glyph, just the kind over what it does; a reference step
carries a lime bar instead of a header.
All five kinds in FLOW_TRIGGER_KINDS. The trigger stack is one card
with one outlet, because several triggers can start the same flow. Keywords are exact
matches only, a settled ruling (DECISIONS 2026-07-23), so no misspelling variants appear.
Nine block kinds, two send modes, and buttons or quick replies but never both.
The same step in each condition it can be found in.
An outlet is a real button, so everything reachable by pointer is reachable by keyboard. Filled means wired, a hollow ring means not — ManyChat's own distinction, frame 06.
A port carries exactly one outgoing edge, because the engine takes the first match. Wiring a port that already feeds something replaces that link rather than adding a second, so a drawn wire is always a wire that runs.
Everything pinned to the viewport or floating beside the canvas.
Six required states. The full-screen versions are live in
flows-canvas.html behind the dark strip at its top.
Cases the screen must handle that nothing behind it satisfies yet.