Vue Flow provides a comprehensive set of utility functions for working with nodes, edges, and viewport transformations.
Graph Utilities
addEdge Add a new edge to the flow
updateEdge Update an existing edge connection
getConnectedEdges Get all edges connected to node(s)
connectionExists Check if a connection already exists
Node Relationships
getIncomers Get all nodes with edges pointing to a node
getOutgoers Get all nodes with edges coming from a node
Viewport Calculations
getTransformForBounds Calculate viewport transform to fit bounds
getRectOfNodes Calculate bounding rectangle of nodes
getNodesInside Find all nodes within a rectangle
getBoundsofRects Calculate combined bounds of rectangles
pointToRendererPoint Convert screen coordinates to flow coordinates
rendererPointToPoint Convert flow coordinates to screen coordinates
Type Guards
isNode Check if element is a node
isEdge Check if element is an edge
isGraphNode Check if element is a graph node
isGraphEdge Check if element is a graph edge
Edge Path Utilities
getBezierPath Calculate bezier curve path
getSimpleBezierPath Calculate simplified bezier path
getSmoothStepPath Calculate smooth step path
getStraightPath Calculate straight line path
getBezierEdgeCenter Calculate center point of bezier edge
getSimpleEdgeCenter Calculate center point of straight edge
Markers & Styling
getMarkerId Generate unique marker ID for edges
Miscellaneous
clamp Clamp value between min and max
wheelDelta Calculate wheel delta with platform adjustments
isMacOs Detect macOS platform
Usage Examples Graph Operations
Viewport Calculations
Coordinate Transformations
Edge Path Utilities
Type Guards
import { addEdge , getIncomers , getOutgoers , getConnectedEdges , connectionExists } from '@vue-flow/core' const nodes = ref ([ ... ]) const edges = ref ([ ... ]) // Add a new edge const newConnection = { source: 'node-1' , target: 'node-2' , sourceHandle: 'output-1' , targetHandle: 'input-1' } if ( ! connectionExists ( newConnection , edges . value )) { edges . value = addEdge ( newConnection , edges . value ) } // Get related nodes const incoming = getIncomers ( 'node-2' , nodes . value , edges . value ) const outgoing = getOutgoers ( 'node-2' , nodes . value , edges . value ) const connected = getConnectedEdges ([ 'node-2' ], edges . value )
Function Signatures Graph Operations // Add edge to elements function addEdge ( edgeParams : Edge | Connection , elements : Elements , defaults ?: DefaultEdgeOptions ) : Elements // Update edge connection function updateEdge ( oldEdge : Edge , newConnection : Connection , elements : Elements ) : Elements // Get connected edges function getConnectedEdges < E extends Edge >( nodesOrId : Node [] | string , edges : E [] ) : E [] // Check connection existence function connectionExists ( edge : Edge | Connection , elements : Elements ) : boolean
Node Relationships // Get incoming nodes function getIncomers < N extends Node >( nodeOrId : Node | { id : string } | string , nodes : N [], edges : Edge [] ) : N [] // Get outgoing nodes function getOutgoers < N extends Node >( nodeOrId : Node | { id : string } | string , nodes : N [], edges : Edge [] ) : N []
Viewport Calculations // Get transform for bounds function getTransformForBounds ( bounds : Rect , width : number , height : number , minZoom : number , maxZoom : number , padding ?: Padding ) : ViewportTransform // Get rectangle of nodes function getRectOfNodes ( nodes : GraphNode []) : Rect // Get nodes inside rectangle function getNodesInside ( nodes : GraphNode [], rect : Rect , viewport ?: ViewportTransform , partially ?: boolean , excludeNonSelectableNodes ?: boolean ) : GraphNode [] // Get combined bounds function getBoundsofRects ( rect1 : Rect , rect2 : Rect ) : Rect
// Screen to flow coordinates function pointToRendererPoint ( { x , y } : XYPosition , viewport : ViewportTransform , snapToGrid ?: boolean , snapGrid ?: [ number , number ] ) : XYPosition // Flow to screen coordinates function rendererPointToPoint ( { x , y } : XYPosition , viewport : ViewportTransform ) : XYPosition
Edge Path Utilities // Returns [path, labelX, labelY, offsetX, offsetY] type EdgePathParams = [ string , number , number , number , number ] function getBezierPath ( params : GetBezierPathParams ) : EdgePathParams function getSimpleBezierPath ( params : GetBezierPathParams ) : EdgePathParams function getSmoothStepPath ( params : GetSmoothStepPathParams ) : EdgePathParams function getStraightPath ( params : GetStraightPathParams ) : EdgePathParams function getBezierEdgeCenter ( params : GetBezierEdgeCenterParams ) : [ number , number , number , number ] function getSimpleEdgeCenter ( params : GetSimpleEdgeCenterParams ) : [ number , number , number , number ]
Type Guards function isNode < Data = ElementData >( element : MaybeElement ) : element is Node < Data > function isEdge < Data = ElementData >( element : MaybeElement ) : element is Edge < Data > function isGraphNode < Data = ElementData >( element : MaybeElement ) : element is GraphNode < Data > function isGraphEdge < Data = ElementData >( element : MaybeElement ) : element is GraphEdge < Data >
Utility Functions // Clamp value between min and max function clamp ( val : number , min ?: number , max ?: number ) : number // Calculate wheel delta function wheelDelta ( event : WheelEvent ) : number // Detect macOS function isMacOs () : boolean // Generate marker ID function getMarkerId ( marker : EdgeMarkerType | undefined , vueFlowId ?: string ) : string
Deprecated Utilities : Some utilities like addEdge, updateEdge, and change application functions are deprecated for direct use. It’s recommended to use the store instance methods from useVueFlow() instead:const { addEdges , updateEdge , applyNodeChanges } = useVueFlow ()
Utility Categories Graph Manipulation
Edge operations (add, update, check)
Node relationship queries
Connection validation
Viewport & Positioning
Viewport transform calculations
Coordinate conversions
Bounds and rect calculations
Edge Rendering
Path calculation for different edge types
Edge center point calculation
Marker ID generation
Type Checking
Runtime type guards
Element type validation
Value clamping
Platform detection
Event normalization
For detailed information about each utility function, including all parameters, return types, and advanced usage examples, refer to the individual utility documentation pages.