logo

X6

  • Tutorials
  • API
  • Examples
  • Q&A
  • Change Log
  • XFlow
  • Productsantv logo arrow
  • 2.x
  • Graph
    • Graph
    • Grid
    • Background
    • Panning
    • Mousewheel
    • Viewport Transformation
    • Coordinate Systems
  • Element
    • Cell
    • Node
    • Edge
    • Labels
    • Arrow
    • Element Attributes
    • Interaction
  • MVC
    • Model
    • View
  • Extension
    • Node Tools
    • Edge Tools
    • Routing
    • Connector
    • Node Anchor
    • Edge Anchor
    • Connection Point
    • Port Layout Algorithm
    • Port Label Layout
    • Attributes
    • Highlighter
    • Filter

Connector

Previous
Routing
Next
Node Anchor

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

The connector processes the start point, route return point, and end point into a <path> element's d attribute, determining the style of the edge rendering on the canvas. X6 has several built-in connectors.

ConnectorDescription
normalSimple Connector, connects the start point, route point, and end point with a straight line.
smoothSmooth Connector, connects the start point, route point, and end point with a cubic Bezier curve.
roundedRounded Connector, connects the start point, route point, and end point with a straight line and uses an arc to connect the line segments (fillet).
jumpoverJumpover Connector, connects the start point, route point, and end point with a straight line and uses a jump symbol to connect the intersecting edges.

You can set a route for a specific edge:

const edge = graph.addEdge({
source,
target,
connector: {
name: 'rounded',
args: {
radius: 20,
},
},
})

When there is no connector parameter, it can be simplified to:

const edge = graph.addEdge({
source,
target,
connector: 'rounded',
})

You can also call edge.setConnector to set the connector:

edge.setConnector('rounded', { radius: 20 })

When creating a canvas, you can set the global default connector (default is 'normal') through the connecting option:

new Graph({
connecting: {
connector: {
name: 'rounded',
args: {
radius: 20,
},
},
},
})

When there is no route parameter, it can be simplified to:

new Graph({
connecting: {
connector: 'rounded',
},
})

Let's take a look at how to use built-in connectors and how to customize and register custom connectors.

Built-in Connectors

normal

The system's default connector, connects the start point, route point, and end point in sequence with a straight line.

Supported parameters are as follows:

Parameter NameParameter TypeRequiredDefault ValueParameter Description
rawbooleanNofalseWhether to return a Path object, default value is false returns a serialized string.

smooth

A smooth connector, connects the start point, route point, and end point with a cubic Bezier curve.

Supported parameters are as follows:

Parameter NameParameter TypeRequiredDefault ValueParameter Description
rawbooleanNofalseWhether to return a Path object, default value is false returns a serialized string.
directionH | VNo-Keep horizontal connection or keep vertical connection, not set will dynamically calculate based on the start and end points.

For example:

graph.addEdge({
source: rect1,
target: rect2,
vertices: [
{ x: 100, y: 200 },
{ x: 300, y: 120 },
],
connector: 'smooth',
})

rounded

A rounded connector, connects the start point, route point, and end point with a straight line and uses an arc to connect the line segments (fillet).

Supported parameters are as follows:

Parameter NameParameter TypeRequiredDefault ValueParameter Description
radiusnumberNo10Fillet radius.
rawbooleanNofalseWhether to return a Path object, default value is false returns a serialized string.

For example:

graph.addEdge({
source: rect1,
target: rect2,
vertices: [
{ x: 100, y: 200 },
{ x: 300, y: 120 },
],
connector: {
name: 'rounded',
args: {
radius: 10,
},
},
})

jumpover

A jumpover connector, connects the start point, route point, and end point with a straight line and uses a jump symbol to connect the intersecting edges.

Supported parameters are as follows:

Parameter NameParameter TypeRequiredDefault ValueParameter Description
type'arc' | 'gap' | 'cubic'No'arc'Jump type.
sizenumberNo5Jump size.
radiusnumberNo0Fillet radius.
rawbooleanNofalseWhether to return a Path object, default value is false returns a serialized string.

Custom Connectors

A connector is a function with the following signature, returning a Path object or a serialized string.

export type Definition<T> = (
this: EdgeView, // Edge view
sourcePoint: Point.PointLike, // Start point
targetPoint: Point.PointLike, // End point
routePoints: Point.PointLike[], // Route return points
args: T, // Connector parameters
edgeView: EdgeView, // Edge view
) => Path | string
Parameter NameParameter TypeParameter Description
thisEdgeViewEdge view.
sourcePointPoint.PointLikeStart point.
targetPointPoint.PointLikeEnd point.
routePointsPoint.PointLike[]Route return points.
argsTConnector parameters.
edgeViewEdgeViewEdge view.

I'll define a wobble connector:

export interface WobbleArgs {
spread?: number
raw?: boolean
}
function wobble(
sourcePoint: Point.PointLike,
targetPoint: Point.PointLike,
vertices: Point.PointLike[],
args: WobbleArgs,
) {
const spread = args.spread || 20
const points = [...vertices, targetPoint].map((p) => Point.create(p))
let prev = Point.create(sourcePoint)
const path = new Path(Path.createSegment('M', prev))
for (let i = 0, n = points.length; i < n; i += 1) {
const next = points[i]
const distance = prev.distance(next)
let d = spread
while (d < distance) {
const current = prev.clone().move(next, -d)
current.translate(
Math.floor(7 * Math.random()) - 3,
Math.floor(7 * Math.random()) - 3,
)
path.appendSegment(Path.createSegment('L', current))
d += spread
}
path.appendSegment(Path.createSegment('L', next))
prev = next
}
return args.raw ? path : path.serialize()
}

Then register the connector:

Graph.registerConnector('wobble', wobble)

After registration, we can use it by connector name:

edge.setConnector('wobble', { spread: 16 })
Args
radius
10
Args
type
size
5
radius
0