Flow

A flow diagram component with nodes, edges, pan, zoom, and selection.

vu-flow · @velkin/react-pro/flow

Copy page

Import

React

npm i @velkin/react-pro

import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");

// @velkin-pro
import { VuFlow } from "@velkin/react-pro/flow";

Examples

API

Tables match the member selected under Import.

Props

Prop	Type	Default	Description
nodes	VuFlowNodeModel[]	[]	Graph nodes.
edges	VuFlowEdgeModel[]	[]	Graph edges.
autofitLive	`boolean`	false	Fit view when content changes. Default: `false`.
locked	`boolean`	false	Disables pan, drag, and connect. Default: `false`.
withControls	`boolean`	false	Shows zoom/fit/lock controls. Default: `false`.
withMiniMap	`boolean`	false	Shows navigation minimap. Default: `false`.
virtualizeThreshold	`number`	0	Virtualize nodes above this count; `0` disables.

Events

Event	Detail	Description
vu-select	VuFlowSelectDetail	Selection changed.
vu-drag	VuFlowDragDetail	Node drag phase (`start`/`move`/`end`).
vu-node-add	VuFlowNodeAddDetail	Node added via `addNode()`.
vu-connect	VuFlowConnectDetail	Connect gesture or edge create.
vu-context	VuFlowContextDetail	Right-click; call `preventDefault()` to suppress built-in menu.

Slots

Slot	Description
—	- `<vu-flow-node>` and `<vu-flow-edge-overlay>` children.
context-menu	Prefer `<vu-flow-context-menu>`; custom content also works.

CSS parts

Part	Description
base	Grab/pan surface.
nodes	Node layer host.
pool	Reserved (culling is in-place; kept for API stability).
overlays	Edge-overlay layer host.
controls	Zoom/fit/lock controls cluster.
minimap	Minimap panel.
context-menu	Context menu panel.

Methods

Method	Description
fitView	- Fit all nodes into the viewport.
zoomIn	- Zoom in one step.
zoomOut	- Zoom out one step.
setLocked	- Toggle or set the locked state.
addNode	- Add a node and fire `vu-node-add`.
addEdge	- Add an edge and fire `vu-connect`.
deleteSelected	- Remove selected nodes/edges from the graph.
clearSelection	- Clear the current selection.
getSelection	- Return currently selected nodes and edges.
autoLayout	- Run layered layout (topo + barycentric) and animate node positions.

Types

Name	Definition
VuFlowConnectDetail	`{ phase: VuFlowGesturePhase; sourceId: string; sourceSide: VuFlowSide \| null; targetId?: string \| null; targetSide?: VuFlowSide \| null; valid?: boolean; created?: boolean; edge?: VuFlowEdgeModel; reason?: string; x?: number; y?: number; }`
VuFlowContextDetail	`{ target: VuFlowContextTarget; clientX: number; clientY: number; graphX: number; graphY: number; node?: VuFlowNodeModel; edge?: VuFlowEdgeModel; nodes: VuFlowNodeModel[]; edges: VuFlowEdgeModel[]; }`
VuFlowDragDetail	`{ phase: VuFlowGesturePhase; node: VuFlowNodeModel; event?: MouseEvent; }`
VuFlowNodeAddDetail	`{ node: VuFlowNodeModel; }`
VuFlowSelectDetail	`{ nodes: VuFlowNodeModel[]; edges: VuFlowEdgeModel[]; }`

Import

React

npm i @velkin/react-pro import { LicenseInfo } from "@velkin/license"; // Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY // Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? ""); // @velkin-pro import { VuFlow } from "@velkin/react-pro/flow";

API

Tables match the member selected under Import.

Props

Prop	Type	Default	Description
nodes	VuFlowNodeModel[]	[]	Graph nodes.
edges	VuFlowEdgeModel[]	[]	Graph edges.
autofitLive	`boolean`	false	Fit view when content changes. Default: `false`.
locked	`boolean`	false	Disables pan, drag, and connect. Default: `false`.
withControls	`boolean`	false	Shows zoom/fit/lock controls. Default: `false`.
withMiniMap	`boolean`	false	Shows navigation minimap. Default: `false`.
virtualizeThreshold	`number`	0	Virtualize nodes above this count; `0` disables.

Events

Event	Detail	Description
vu-select	VuFlowSelectDetail	Selection changed.
vu-drag	VuFlowDragDetail	Node drag phase (`start`/`move`/`end`).
vu-node-add	VuFlowNodeAddDetail	Node added via `addNode()`.
vu-connect	VuFlowConnectDetail	Connect gesture or edge create.
vu-context	VuFlowContextDetail	Right-click; call `preventDefault()` to suppress built-in menu.

Slots

Slot	Description
—	- `<vu-flow-node>` and `<vu-flow-edge-overlay>` children.
context-menu	Prefer `<vu-flow-context-menu>`; custom content also works.

CSS parts

Part	Description
base	Grab/pan surface.
nodes	Node layer host.
pool	Reserved (culling is in-place; kept for API stability).
overlays	Edge-overlay layer host.
controls	Zoom/fit/lock controls cluster.
minimap	Minimap panel.
context-menu	Context menu panel.

Methods

Method	Description
fitView	- Fit all nodes into the viewport.
zoomIn	- Zoom in one step.
zoomOut	- Zoom out one step.
setLocked	- Toggle or set the locked state.
addNode	- Add a node and fire `vu-node-add`.
addEdge	- Add an edge and fire `vu-connect`.
deleteSelected	- Remove selected nodes/edges from the graph.
clearSelection	- Clear the current selection.
getSelection	- Return currently selected nodes and edges.
autoLayout	- Run layered layout (topo + barycentric) and animate node positions.

Types

Name	Definition
VuFlowConnectDetail	`{ phase: VuFlowGesturePhase; sourceId: string; sourceSide: VuFlowSide \| null; targetId?: string \| null; targetSide?: VuFlowSide \| null; valid?: boolean; created?: boolean; edge?: VuFlowEdgeModel; reason?: string; x?: number; y?: number; }`
VuFlowContextDetail	`{ target: VuFlowContextTarget; clientX: number; clientY: number; graphX: number; graphY: number; node?: VuFlowNodeModel; edge?: VuFlowEdgeModel; nodes: VuFlowNodeModel[]; edges: VuFlowEdgeModel[]; }`
VuFlowDragDetail	`{ phase: VuFlowGesturePhase; node: VuFlowNodeModel; event?: MouseEvent; }`
VuFlowNodeAddDetail	`{ node: VuFlowNodeModel; }`
VuFlowSelectDetail	`{ nodes: VuFlowNodeModel[]; edges: VuFlowEdgeModel[]; }`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Companions

Data display

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Companions

Data display

Guides

Browse