No matches.
component
Fill of the canvas. `"surface.ground"` paints the floor of the surface stack (nodes lift off it); `"transparent"` paints nothing, so a diagram embedded in a card or panel sits on that surface. The `backgroundPattern` is independent — pair with `"none"` for a bare diagram.
Frame the canvas in a Card: a header from the card props (`heading`, `subheading`, `eyebrow`, `leading`, `trailing` for toolbar actions), an optional `footer`, and the canvas as the card content — edge to edge, filling the card's height (a `320px` floor, `--flow-min-height`, keeps an auto-height card usable). The `controls` cluster and the minimap stay overlaid on the canvas. A rendered heading labels the flow region (`aria-labelledby`) unless `label` is set. Unset (or `false`) renders the bare canvas — the pre-card DOM.
Visual of every edge's midpoint label. `pill` gives each label the chip it needs to stay readable where it crosses its own line; `plain` strips the chip and leaves the positioning, for labels you paint yourself. Retune the chip in place by redefining the `--flow-label-pad-x/pad-y/ radius/bg/border/color` vars through `passThrough.edgeLabel.style`.
Overview map in the corner: node rectangles plus the visible-viewport indicator; click or drag it to jump around a large graph.
Semantic palette for the surface, marquee and edges.
Show edge/centre alignment hairlines while dragging, and snap onto them when within reach.
Arrange the graph with the layered auto-layout once on mount, replacing the positions the data carried (reported through `onNodesChange`). Pass `LayoutOptions` to tune direction and spacing.
Whether port `kind`s are enforced. `strict` only wires an `output` into an `input`; `loose` lets any port reach any other.
Initial pan and zoom — restore a viewport saved from `onViewportChange`.
How an existing edge blocks a new one between the same ports. `reject-undirected` also refuses the REVERSE of an existing edge, so A→B followed by B→A can't stack two curves along the same line.
Frame every node once on mount (after `defaultViewport`, if both are given, fitting wins).
( from: string, to: string, candidate: FlowConnectionCandidate, ) => boolean Whether a proposed connection is allowed, on top of the declarative rules. The third argument describes both ends (side, offset, kind), so a rule can be port-aware.
Whether a marquee takes nodes it merely grazes, or only fully enclosed ones.
Cap on edges per port, for ports that declare no `maxConnections` of their own. Unlimited when omitted.
Whether dragging empty space pans the surface. With `selectionOnDrag` also on, panning moves to middle-drag and space-drag.
Inspection mode: panning, zooming and selecting stay available, but nothing can be edited — no node drags, no connections, no resize, no Delete. Compare `disabled`, which turns everything off.
Whether dragging empty space rubber-band selects instead of panning.
Grid the drag snaps to, in content px. `0` disables snapping, and `true` uses `backgroundGap` so nodes land exactly on the pattern you can see. The grabbed node is snapped and the rest of the selection follows by the same correction, so a multi-node selection keeps its internal spacing.
( from: string, to: string, detail: FlowConnectionDetail, ) => void Fired when a connection is completed; `detail` names the exact ports.
(selection: { nodes: string[]; edges: string[] }) => void Fired when <kbd>Delete</kbd>/<kbd>Backspace</kbd> is pressed with nodes or edges selected. The flow never mutates the graph itself — remove them from your data and pass the result back.
Fired whenever the edge selection (edges are selected by clicking) changes.
( edgeId: string, from: string, to: string, detail: FlowConnectionDetail, ) => void Fired when an existing edge's endpoint is dragged onto a new node — update `source`/`target` in your data.
(viewport: { x: number; y: number; zoom: number; }) => void Fired whenever the pan or zoom changes.
Bound reference to the flow canvas root (`bind:this`) — the element the controller binds, inside the card content when `card` is set.
Astro / vanilla: serialize the props into `data-flow-config` on the flow root so the client runtime hydrates this instance and `getPindoba(el, "flow")` can `update()` it. Frameworks with their own reactivity don't need it.
Plus all standard <div> HTML attributes.
`id` of a node this one belongs to. Dragging or nudging the parent moves its whole subtree; coordinates stay absolute.
Connection points declared as data. The node renders one `FlowPort` per descriptor, and edges that name no port float between them — re-picking the best-facing port as nodes move. Use the `ports` slot instead when the ports need custom content.
Whether the node is part of the current selection. Leave unset to let the flow controller mirror its own selection into the DOM; pass a boolean to control it from your own state instead.
Connection points declared as a structured BAND of rows, rendered below the node's body. Each row spans the node's full width, so its ports straddle the node's borders while their labels sit beside them in flow — labelled connections that reserve their own space instead of overlaying the body. Routing reads these the same way it reads `ports`, so an edge anchors on a row's glyph with nothing to flatten by hand.
Semantic palette override for this node — colors its selection outline and ports.
Height of one socket row, in px. Published as `--flow-socket-row` so the rendered band and the anchor arithmetic stay in step — retune it here rather than in CSS.
Cap on edges touching this node, across all its ports. Unlimited when omitted.
Show corner handles while selected; dragging one reports the new geometry through `onNodesChange`, like a move does.
Silhouette of the connection point. Square by default — this flow is rectangular throughout; `dot` is opt-in.
How the port is positioned. `free` places it along its side with `offset`; `row` pins it to the inline edge of the socket row it sits in, vertically centred — the row's own edges are the node's borders.
Distance in px from the far end of the port's side, used instead of `offset` when set. Socket rows travel this way: a row's position is known in px from the node's bottom before the node's height is.
Cap on edges terminating at this port. A drop onto a full port is refused and the preview flips to the danger palette. Unlimited when omitted.
Whether the edge renders selected. Leave unset to let the flow controller mirror click-selection into the DOM; pass a boolean to control it from your own state instead.
`id` of the source node. When set together with `target`, the controller re-routes this edge as nodes move — this is how statically rendered (Astro) edges follow their nodes. Reactive frameworks recompute paths from data instead and can omit it.
Routing override for this edge — statically rendered (Astro) edges are re-routed in this shape as nodes move, instead of the flow-wide kind.
Stroke pattern of the visible line. `animated` implies dashes — the animation IS the dashes moving.
Tip at the target endpoint (`arrow`, `circle`, `diamond`), for a directed edge. Positioned from the rendered path, so it follows re-routes as nodes move.
Tip at the source endpoint — see `marker`.
Semantic palette override for this edge.
Stroke thickness; selection thickens relative to it.
Size of this edge's label, when its content is rendered by a snippet or render prop rather than given as `label` text. Label placement fits a BOX, not a point — it is the width that decides whether a pill clears the nodes an edge runs between. Core estimates that box from `label`; rich content has no text to estimate from, so declare it here or the label is placed as a dimensionless point and can land on a node.
Port on the source node. Auto-chosen from node positions when omitted.
Port on the target node. Auto-chosen from node positions when omitted.