Skip to main content

Edge Utils

There are several utils that help you to create a custom edge. Some are used in the custom edge example.

getBezierPath

Returns the path of a bezier edge.

import { getBezierPath } from 'react-flow-renderer';

getBezierPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom, // optional
targetX,
targetY,
targetPosition = Position.Top, // optional
centerX, // optional
centerY, // optional
}: GetBezierPathParams): string

getSmoothStepPath

Returns the path of a smooth step edge. You can set borderRadius = 0 to get a step edge path.

import { getSmoothStepPath } from 'react-flow-renderer';

getSmoothStepPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom, // optional
targetX,
targetY,
targetPosition = Position.Top, // optional
borderRadius = 5, // optional
centerX, // optional
centerY, // optional
}: GetSmoothStepPathParams): string

getSimpleBezierPath

Returns the path of a simple bezier edge.

import { getSimpleBezierPath } from 'react-flow-renderer';

getSimpleBezierPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom, // optional
targetX,
targetY,
targetPosition = Position.Top, // optional
centerX, // optional
centerY, // optional
}: GetBezierPathParams): string

getEdgeCenter

Returns the center position and offset [centerX, centerY, offsetX, offsetY] of the edge.

import { getEdgeCenter } from 'react-flow-renderer';

getEdgeCenter({
sourceX,
sourceY,
targetX,
targetY
}: GetCenterParams): [number, number, number, number]

getBezierEdgeCenter

Returns the center position and offset [centerX, centerY, offsetX, offsetY] of a bezier edge.

import { getBezierEdgeCenter } from 'react-flow-renderer';

getBezierEdgeCenter({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
curvature = 0.25,
}: GetCenterParams): [number, number, number, number]

getSimpleBezierEdgeCenter

Returns the center position and offset [centerX, centerY, offsetX, offsetY] of a simplebezier edge.

import { getSimpleBezierEdgeCenter } from 'react-flow-renderer';

getSimpleBezierEdgeCenter({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
}: GetCenterParams): [number, number, number, number]

getMarkerEnd

Returns the marker end url for displaying the arrow head.

import { getMarkerEnd } from 'react-flow-renderer';

getMarkerEnd(arrowHeadType?: ArrowHeadType, markerEndId?: string): string