Flow Diagram

The installed preset combines data, config and replaceable widgets. Import it from your copied source.

Data Format

type FlowDiagramData = {
  nodes: { id: string; position: { x: number; y: number }; data: Record<string, unknown>; type?: string }[];
  edges: { id: string; source: string; target: string; sourceHandle?: string; targetHandle?: string }[];
};

Default Style Config

Nested overrides merge with the defaults. The full typed config lives in your installed style/config.ts.

Appearance

Property	Type	Default	Description
colorMode	"light" \| "dark"	"light"	Preset palette.
colors	Partial<DefaultColors>	lightColors	Override individual color tokens.
node	object	width: 150, padding: 10, borderRadius: 3	Default node sizing, border and text.
edge	object	strokeWidth: 1, curvature: 0.25	Default stroke, routing and markers.
handle	object	size: 6, hitPadding: 4	Default handle appearance.

Layout and overlays

Property	Type	Default	Description
controls	object	visible: true, position: "bottom-left"	Visibility, placement and button sizing.
minimap	object	visible: true, position: "bottom-right"	Size, palette and panning.
background	object	visible: true, variant: "dots", gap: 20	Canvas pattern.
contextMenu	object	borderRadius: 8	Menu and item styling. Commands use getContextMenuItems.

Custom Parts

Every builder is (args, context) → Widget. Parent slots receive child widgets with behavior already attached. Leaves receive data and derived interaction state.

Part	Args	Description
layout	background, viewport, selectionBox, toolbars, controls, minimap, contextMenu	Arranges the viewport and screen-space overlays; override it to add extra UI.
viewport	edges, nodes, connectionLine, nodesSelectionRect, guides, items	Arranges cached nodes and edges in paint order, then flow-space overlays.
nodeBox	node, handles, resizeControls, toolbar, args, placements	Places the pre-built node, connection handles, resize controls and toolbar.
edgeBox	edge, label, reconnectHandles, edgeHandles, args	Arranges the pre-built edge, label and editing handles.
controls	zoomIn, zoomOut, fitView, interactive	Arranges zoom, fit and lock child widgets with their actions already attached.
controlButton	kind, isHovered, isDisabled, isInteractive	One control button's appearance. Click and hover behavior are attached by the engine.
minimap	width, height, background, nodes, mask, viewport	Arranges background, node, mask and viewport widgets; the engine owns panning.
minimapNode	node, rect, isSelected	One node in minimap coordinates.
minimapBackground	width, height	Minimap background widget.
minimapMask	width, height, rect	Mask around the visible portion of the minimap.
minimapViewport	rect	Current viewport outline in minimap coordinates.
contextMenu	target, ids, position, screenPosition, items	Menu for a right-click or long-press. Return SizedBox.shrink() for no menu.
menuItem	label, index, isHovered, isDisabled, isSeparator	One menu item's appearance. Selection, disabled state and menu dismissal are wired by the engine.
guides	lines	Alignment guide lines while snapping.
edgeHandle	edge, kind, index, isActive	Waypoint pins and midpoint grips on an editable edge.
node	node, isSelected, isDragging, isHovered, isDraggable, isSelectable, isConnectable, positionAbsolute, zIndex, isConnectionTarget, isResizable, isResizing, isEditing, isDropTarget, isOverlapping, isCollapsed, hiddenChildCount, isNeighbour, label, handles	Node body. Receives a built label and inline handle widgets; the engine attaches node gestures.
nodeLabel	node, isSelected, isDragging, isHovered, isDraggable, isSelectable, isConnectable, positionAbsolute, zIndex, isConnectionTarget, isResizable, isResizing, isEditing, isDropTarget, isOverlapping, isCollapsed, hiddenChildCount, isNeighbour	Node label widget, including the preset's editable text.
nodeToolbar	node, isSelected	Screen-space toolbar for a selected node.
edge	edge, path, origin, size, endpoints, isSelected, isHovered, isAnimated, sourceNode, targetNode, markerStart, markerEnd, interactionWidth, isReconnecting, waypoints, activeHandle, isNeighbour	Edge visual. The engine retains hit testing, selection and hover.
edgeLabel	edge, label, isSelected, isHovered, x, y	Label drawn at the edge's label point.
handle	node, handle, isConnectable, isConnecting, isConnectionCandidate, isValidCandidate, isConnectionInProgress	A connection handle.
connectionLine	connection, path, from, to, fromPosition, toPosition, isValid, origin, size	The line drawn while connecting.
background	viewport, width, height	Pane backdrop. Return SizedBox.shrink() for none.
selectionBox	rect	The rectangle drawn while box-selecting.
nodesSelectionRect	rect, nodes	Bounds drawn around a multi-selection.
resizeControl	node, position, variant, isResizing	Resize lines and corner handles.
reconnectHandle	edge, end, size	Grab area at an edge end. Invisible by default.

Override Example

import FlowDiagram from "@/components/diagram/flow-diagram";
import { MainAxisSize, Row } from "flitterjs";

FlowDiagram({
  data,
  config: { colorMode: "dark", minimap: { visible: false } },
  custom: {
    controls: ({ zoomIn, zoomOut, fitView }) => Row({
      mainAxisSize: MainAxisSize.min,
      children: [zoomOut, fitView, zoomIn],
    }),
  },
});

Context

Builders receive FlowDiagramController plus the resolved config. Use derived args such as isHovered and isSelected to draw your widgets. Standard gestures are wired by the engine. Controller methods support application actions such as search, save and adding nodes.

Geometry and behavior

Use getHandles for connection points, getEdgePath for routing, nodeOptions for per-type interaction metadata, and getContextMenuItems for application commands. These strategies return data, while custom contains only widgets. See the common API for all props and events.