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.
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.
Segmented 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.
Get a head start with one of our pre-built applications:
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2/3, React and Svelte versions available.
Database Schema Builder
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2/3 and React versions available.
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices.
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.
An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines
The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.