Connectors

Connectors are the lines that actually join elements of the UI. They are the visual representation of edges. JsPlumb has four connector types:

Bezier - a Bezier curve with two control points
Straight - One or more straight line segments, optionally smoothed or with rounded corners
Orthogonal - Horizontal/vertical segments, optionally with rounded corners
StateMachine - a Bezier curve with a single control point

info

From version 6.90.0 onwards, the previously available Segmented connector's functionality has been folded into the Straight connector.

The default, if you do not provide a value, is to use the Straight connector.

Connectors can be specified in a few different places:

in an edge definition in a view
in the defaults section of the render options to a Surface
in a UI State

Bezier

Provides a cubic Bezier path (having two control points) between the two endpoints.

Bezier connector with default curviness of 150

Curviness

A key concept with Bezier connectors is their curviness, which translates to how far the control points are from the anchors. The default value for curviness is 150, which is what the canvas above uses. You can change it, for example to reduce how curvy the line is we could set it to 50:

connector: { 
    type:BezierConnector.type, 
    options:{
      curviness:50
    }
}

Which gives us:

Bezier connector with curviness of 50

Stubs

You can set a stub on the connector:

connector: { 
    type:StateMachineConnector.type, 
    options:{
      stub:25
    }
}

Bezier connector with 25px stub

Gap

You can set a gap on the connector to leave some space between the anchor point and the connector line:

connector: { 
    type:CubicBezierConnector.type, 
    options:{
      gap:10
    }
}

Bezier connector with 10px gap

Options

Interface BezierConnectorOptions

Name	Type	Description
`cssClass?`	string	Optional class to set on the element used to render the connector.
`curviness?`	number	A measure of how "curvy" the bezier is. In terms of maths what this translates to is how far from the curve the control points are positioned.
`gap?`	number	Defines a number of pixels between the end of the connector and its anchor point. Defaults to zero.
`hoverClass?`	string	Optional class to set on the element used to render the connector when the mouse is hovering over the connector.
`legacyPaint?`	boolean	Defaults to false. When true, the Bezier is painted with the legacy strategy, which is to position the major anchor for the bezier curve a fixed number of pixels from its associated anchor, whose value you can control via the `curviness` parameter.
`scale?`	number	Where to put the control point relative to the source/target. The number provided here should be a decimal, whose value defines the proportional distance between the source and target that the control point should be located at. The default value is 0.45. Larger values will make the Bezier curvier.
`showLoopback?`	boolean	Whether or not to show connections whose source and target is the same element.
`stub?`	number	Stub defines a number of pixels that the connector travels away from its element before the connector's actual path begins.

Straight

Draws a series of one or more straight line segments between the source and target, with options to smooth to a curve or to round the corners between segments. The default computation creates a single segment, but if you have vertex avoidance switched on, or if you constrain the segment movement or edit the path, then the connector will have multiple segments.

Straight connector with default values

By default, the Straight connector mimics the behaviour of the Straight connector.

Stubs

You can set a stub on the connector:

connector: { 
    type:"Straight", 
    options:{
      stub:25
    }
}

Straight connector with 25px stub

Gap

You can set a gap on the connector to leave some space between the anchor point and the connector line:

connector: { 
    type:"Straight", 
    options:{
      gap:10
    }
}

Straight connector with 10px gap

Geometry

You can supply a geometry object for the edge that the connector represents (or use the straight connector editor to have JsPlumb generate this) for when you want multiple segments:

edges:[
{ 
    "source":"1", 
    "target":"3",
    "geometry":{
        source:{ curX:80, curY:110, ox:0, oy:1, x:0.5, y:1 },
        target:{ curX:480, curY:360, ox:0, oy:1, x:0.5, y:1 },
        segments:[
            { x: 40, y: 200 },
            { x: 40, y: 330 },
            { x: 400, y:330 }
        ]
    }
 }
]

Straight connector with multiple segments

Smoothing

You can also specify that you want to smooth the connector via the smooth option:

 connector: { 
     type:"Straight", 
     options:{
        smooth:true
     }
 }

Straight connector with multiple segments and smoothing

note

If you set smooth:true on a Straight connector but don't provide a a value for stub then you won't see any curve, as the smoothing is only applied when the connector has more than one segment. If you provide a small value for stub you will see quite a pronounced hook, as in the following example where we set stub to 10. Smoothing works better when there are more than just a few segments in the connector, or when it does not just consist of one straight segment and stubs.

 connector: { 
     type:"Straight", 
     options:{
        stub:10,
        smooth:true
     }
 }

Straight connector with small stub and smoothing

Rounded corners

An alternative to smoothing is rounded corners, introduced in 6.14.0:

 connector: { 
     type:"Straight", 
     options:{
        cornerRadius:15
     }
 }

Straight connector with rounded corners

Editing straight paths

The Straight connector supports interactive path editing by the user. For information about this, see the path editing page.

Options

Interface StraightConnectorOptions

Name	Type	Description
`alwaysRespectStubs?`	boolean	Defaults to true, meaning always draw a stub of the desired length, even when the source and target elements are very close together. This only applies when constrain is set to PATH_CONSTRAIN_ORTHOGONAL.
`constrain?`	ConnectorPathConstrainment	Optional constraint on the direction path segments can travel in. Options are PATH_CONSTRAIN_NONE, PATH_CONSTRAIN_ORTHOGONAL (segments are vertical and/or horizontal lines) and PATH_CONSTRAIN_DIAGONAL (segments are vertical, horizontal, or 45 degree lines). You can also use PATH_CONSTRAIN_MANHATTAN as an alias for PATH_CONSTRAIN_ORTHOGONAL or PATH_CONSTRAIN_METRO as an alias for PATH_CONSTRAIN_DIAGONAL.
`cornerRadius?`	number	Optional radius to apply to corners. If you have set `smooth:true` this will be ignored.
`cssClass?`	string	Optional class to set on the element used to render the connector.
`gap?`	number	Defines a number of pixels between the end of the connector and its anchor point. Defaults to zero.
`hoverClass?`	string	Optional class to set on the element used to render the connector when the mouse is hovering over the connector.
`loopbackRadius?`	number	For a loopback connection (when constrain is set to orthogonal), the size of the loop.
`midpoint?`	number	The point to use as the halfway point between the source and target when constrain is set to orthogonal. Defaults to 0.5.
`slightlyWonky?`	boolean	If true, and a cornerRadius is set, the lines are drawn in such a way that they look slightly hand drawn. This effect was something we stumbled across, ie. a mistake, but it was charming in its own way so we decided to leave it in as an option.
`smooth?`	boolean	Whether or not to smooth the connector. Defaults to false. It is not recommended to use this in conjunction with `orthogonal` or `diagonal` constrain, as the line tends to take on a bit of a hand-drawn appearance. It's not without charm but it's also not for everyone.
`smoothing?`	number	The amount of smoothing to apply. The default is 0.15. Values that deviate too much from the default will make your lines look weird.
`smoothingType?`	PathSmoothingType	When `smooth` is true, what sort of smoothing to use. The options are PATH_SMOOTHING_CARDINAL_SPLINE, which approximates each junction with a cardinal spline, or PATH_SMOOTHING_BEZIER, which converts the path into a series of bezier segments. Bezier is the default.
`stub?`	number	Stub defines a number of pixels that the connector travels away from its element before the connector's actual path begins.

Orthogonal

Draws a connection that consists of a series of vertical or horizontal segments - the classic flowchart look. Internally this connector is, from 6.90.0, an alias for a Straight connector with constrain:"orthogonal".

Orthogonal connector with default values

Stubs

You can set a stub on the connector:

connector: { 
    type:OrthogonalConnector.type, 
    options:{
      stub:25
    }
}

Orthogonal connector with 25px stub

Gap

You can set a gap on the connector to leave some space between the anchor point and the connector line:

 connector: { 
     type:OrthogonalConnector.type, 
     options:{
       gap:10
     }
 }

Orthogonal connector with 10px gap

Rounded corners

  connector: { 
      type:OrthogonalConnector.type, 
      options:{
        cornerRadius:5
      }
  }

Orthogonal connector with 5px cornerRadius

Loopback

This connector supports connections that start and end on the same element ("loopback" connections).

Orthogonal connector with loopback

Editing orthogonal paths

The Orthogonal connector supports interactive path editing by the user. For information about this, see the path editing page.

Options

These options are supported:

Interface OrthogonalConnectorOptions

Name	Type	Description
`alwaysRespectStubs?`	boolean	Defaults to true, meaning always draw a stub of the desired length, even when the source and target elements are very close together.
`cornerRadius?`	number	Optional curvature of the corners in the connector. Defaults to 0.
`cssClass?`	string	Optional class to set on the element used to render the connector.
`gap?`	number	Defines a number of pixels between the end of the connector and its anchor point. Defaults to zero.
`hoverClass?`	string	Optional class to set on the element used to render the connector when the mouse is hovering over the connector.
`loopbackRadius?`	number	For a loopback connection, the size of the loop.
`midpoint?`	number	The point to use as the halfway point between the source and target. Defaults to 0.5.
`slightlyWonky?`	boolean	If true, and a cornerRadius is set, the lines are drawn in such a way that they look slightly hand drawn. This effect was something we stumbled across, ie. a mistake, but it was charming in its own way so we decided to leave it in as an option.
`stub?`	number	Stub defines a number of pixels that the connector travels away from its element before the connector's actual path begins.
`supportLegacyConnectorData?`	boolean	Defaults to false. Use this flag if you are migrating from 2.x to 5.x and you have connector data stored in the 2.x format that you wish to load.
`vertexAvoidance?`	boolean	Whether or not to avoid vertices during path edits and, when using legacy recalc mode, when dragging vertices connected to an edited path. Defaults to true.

StateMachine

Draws slightly curved lines, similar to the connectors you may have seen in software like GraphViz.

QuadraticBezier connector with default values

Stubs

You can set a stub on the connector:

connector: { 
    type:StateMachineConnector.type, 
    options:{
      stub:25
    }
}

QuadraticBezier connector with 25px stub

Gap

You can set a gap on the connector to leave some space between the anchor point and the connector line:

connector: { 
    type:StateMachineConnector.type, 
    options:{
      gap:10
    }
}

QuadraticBezier connector with 10px gap

Options

Supported constructor parameters are:

Interface QuadraticBezierConnectorOptions

Name	Type	Description
`cssClass?`	string	Optional class to set on the element used to render the connector.
`curviness?`	number	A measure of how "curvy" the bezier is. In terms of maths what this translates to is how far from the curve the control points are positioned.
`gap?`	number	Defines a number of pixels between the end of the connector and its anchor point. Defaults to zero.
`hoverClass?`	string	Optional class to set on the element used to render the connector when the mouse is hovering over the connector.
`showLoopback?`	boolean	Whether or not to show connections whose source and target is the same element.
`stub?`	number	Stub defines a number of pixels that the connector travels away from its element before the connector's actual path begins.

Bezier​

Curviness​

Stubs​

Gap​

Options​

Interface BezierConnectorOptions

Straight​

Stubs​

Gap​

Geometry​

Smoothing​

Rounded corners​

Editing straight paths​

Options​

Interface StraightConnectorOptions

Orthogonal​

Stubs​

Gap​

Rounded corners​

Loopback​

Editing orthogonal paths​

Options​

Interface OrthogonalConnectorOptions

StateMachine​

Stubs​

Gap​

Options​

Interface QuadraticBezierConnectorOptions

Bezier

Curviness

Stubs

Gap

Options

Straight

Stubs

Gap

Geometry

Smoothing

Rounded corners

Editing straight paths

Options

Orthogonal

Stubs

Gap

Rounded corners

Loopback

Editing orthogonal paths

Options

StateMachine

Stubs

Gap

Options