Connector Editors

An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines

Vanilla JS

React

Angular

Vue

Svelte

Typescript

The source code for this demo is available on Github.

Vanilla JS

Angular

React

Svelte

https://github.com/jsplumb-demonstrations/segmented-connectors

If you haven't got a license for JsPlumb, we offer 30 day evaluations.

Start a free trial

Straight connectors

This connector type consists of a set of straight line segments, with the option to smooth the segments into a series of Bezier curves. This type of connector is useful for a wide range of different UIs - flowcharts, process flows, CAD applications - anything where the user wants fine grained control of the path that the edges follow.

This connector was called `SegmentedConnector` in JsPlumb Toolkit 6.x. In 7.x we have merged the previous `StraightConnector` and `SegmentedConnector` into one.

Editing paths

The editor for this connector type supports three operations:

Segment end points can be dragged around
The scissors icon cuts a segment into two.
The trashcan icon deletes a segment. This icon is not shown when the connector has only one segment.

Path smoothing

Straight connectors can be rendered with "smoothing" enabled, in which mode the path is represented as a series of Bezier splines.

Smoothing can be switched on via the `smooth` flag in the connector options. In this demonstration, you can toggle smoothing via the Toggle smoothing button.

Editing smooth paths

When smoothing is switched on, the drag handles mark the control points of the Bezier curves.