Flow Canvas

Drag a card to move it (the edges follow live, the position is committed once on drop through @bind-Nodes). Drag the background to pan, use the wheel to zoom around the pointer, or focus a card and nudge it with the arrow keys (Shift for 10px).

Readonly keeps pan and zoom but turns every edit off — including the handles, which drop out of the tab order and go aria-hidden while staying visible as ports (toggle it below and tab through the canvas). FlowBackground draws dots, lines or crosses that follow the viewport; FlowControls can sit in any corner. SnapToGrid snaps drags to SnapGrid (here 20×20, matching the background). The a-c edge below shows a per-edge colour (Class + a --lumeo-flow-edge-stroke rule, no !important) and a solid animated edge (Animated="true" Dashed="false" — a travelling dash overlay, the base line stays solid).

Drag from a source handle (the dot on a card's right edge) to a target handle to propose a connection — IsValidConnection runs on every attempt. Here a trigger card may only be a source: connecting into one is rejected. Keyboard: Tab to a source handle, press Enter to start connecting (every compatible target handle highlights), Tab to one and press Enter to commit, or Esc to cancel.

Click selects a card, Shift/Ctrl-click toggles more into the selection, and shift-dragging the background draws a marquee. Click an edge to select it too. Delete or Backspace removes whatever is selected — nodes, the edges touching them, and any directly selected edge.

FlowMiniMap shows every node and the current viewport — click or drag it to pan. FlowPanel is a plain corner overlay for your own content. FlowNodeToolbar floats above the single selected node and follows it while dragging.

FlowLayout.Tree and FlowLayout.Layered are pure functions: they take the current nodes and edges and return a new node list with fresh positions — apply it with Nodes = FlowLayout.Tree(...), then FitViewAsync(). Both break cycles deterministically, so an accidental loop still lays out instead of hanging, and both handle a duplicate node id in the input without throwing. On a graph too large to fit above your minimum zoom, FitViewAsync(new FlowFitViewOptions(MinZoom: 0.6, AnchorNodeId: "start")) centres on that node at 60% instead of zooming out further to show everything. For a LeftToRight/TopToBottom tree, centring the anchor wastes half the pane on the side the tree never grows into — add AnchorAlign: FlowAnchorAlign.Start to pin the anchor's leading edge (left in LTR, right in RTL; always the top vertically) at the fit padding from the pane's own edge instead; FlowAnchorAlign.End mirrors it against the trailing edge.

Give the canvas a FlowHistory and it records a snapshot after every committed change — drag, keyboard move, connect, delete, an applied layout — and handles Ctrl+Z / Ctrl+Y (or Ctrl+Shift+Z) while the canvas has focus. FlowControls' ShowHistory adds undo/redo buttons bound to the same history; ShowSnapToggle adds a grid toggle.

Select an edge (click it) and small grab handles appear at each end — drag one onto a different handle to move that end, validated through IsValidConnection the same way a fresh connection is; Esc cancels mid-drag. On a touch screen: one finger pans the background or drags a node (no long-press — it starts immediately), two fingers pinch-zoom anchored on the midpoint between them.

Select a card, then drag a grip — corners resize both axes (Shift keeps the card's aspect ratio), edges resize one. Drag the whole card near another one to see the alignment guide (HelperLines).

Click a card to focus the canvas, then Ctrl+C / Ctrl+V copies and pastes it (and any edge between two copied cards) at a (20, 20) offset with a new id; Ctrl+D duplicates the current selection directly.

ConnectionMode.Loose lets a drag start on either handle and land on either handle — try dragging from a target port to another target port. Double-click "next" to edit it inline (EdgeLabelEditable); Enter commits, Esc cancels.

ToDocument() / LoadDocumentAsync() round-trip the whole canvas as JSON; ExportSvgAsync() is a pure-vector snapshot; ExportPngAsync() rasterizes the live node DOM (best effort — it can return null on a tainted canvas).

A node with a ParentId lives inside that group: its X/Y are relative to the group, so dragging "Checkout" moves everything in it. "Payment" and its cards use Extent="FlowExtent.Parent" — try dragging them out. Select cards and press Ctrl+G to group them, Ctrl+Shift+G on a group to dissolve it. Deleting a group deletes what is inside it.

OnlyRenderVisibleNodes mounts just the nodes inside the viewport plus one viewport of margin, and follows pans and zooms with hysteresis. Pan around — the minimap still shows all 1,500. (Fit view shows everything at once, so everything mounts: virtualization helps when the graph is larger than what is on screen.)