Search blocks by description or jump to a page.
Static node-graph canvas with four positioned cards connected by dashed SVG lines, parallel branches, a merge node, and a zoom toolbar.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Workflow Canvas Blueprint is a static visual-automation surface: four node cards positioned on a dot-grid canvas, connected by dashed SVG lines. A Trigger node (Deal is won, Pipeline: Enterprise Sales) sits top-center; two parallel branches fan out below to an Action node (Slack #sales-wins, Notify @channel) and a Filter node (Deal value, greater than $10,000); a Merge node (Continue when both done, Wait for all branches) collects them at the bottom. A zoom toolbar in the top-right corner shows Zoom out, 100%, Zoom in, and Fit to screen. A footer note explains that branches run in parallel and the merge node waits for all of them.
Nodes are a shared CanvasNode component receiving an absolute CSS style object for position. SVG lines use stroke-border/80 with a 4-3 dasharray. No graph library is involved; no Radix portal components are used so the preview screenshot is stable.
Reach for this block as the canvas surface on a multi-branch workflow editor page, replacing the static positions with a graph layout engine once users can drag nodes.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the multi-branch automation canvas. Other canvas configurations:
Tip: the dot-grid background via radial-gradient costs nothing and immediately communicates that this surface is a draggable canvas, not a static list.