Skip to main content

Basic Concepts

jsPlumb is all about connecting things together, so the core abstraction in jsPlumb is the Connection object, which is itself broken down into these five concepts:

Anchor#

A location, relative to an element's origin, at which an Endpoint can exist. You do not create these yourself; you supply hints to the various jsPlumb functions, which create them as needed. They have no visual representation; they are a logical position only. Anchors can be referenced by name, for the anchors that jsPlumb ships with, or with an array containing various parameters, for greater control. See the Anchors page for more detail.

Endpoint#

The visual representation of one end of a Connection. You can create and attach these to elements yourself, which you are required to do to support drag and drop, or have jsPlumb create them when creating a connection programmatically using connect(...). You can also join two endpoints programmatically, by passing them as arguments to connect(...). See the Connectivity and Endpoints pages for more detail.

Connector#

The visual representation of the line connecting two elements in the page. jsPlumb has four types of these available as defaults - a Bezier curve, a straight line, "flowchart" connectors and "state machine" connectors. You do not interact directly with connectors; you just specify definitions of them when you need to. See the Connectors page for more detail.

Overlay#

A UI component that is used to decorate a connector, such as a label, arrow, etc. You can also use label overlays on endpoints.

Group#

A group of elements contained within some other element, which can be collapsed, causing connections to all of the group members to be pooled on the collapsed group container. Groups may be nested to arbitrary depth. For more information, see the Groups page.

In summary - one Connection is made up of two Endpoints, a Connector, and zero or more Overlays working together to join two elements. Each Endpoint has an associated Anchor.

Example#

This example shows all of the concepts discussed above.

Basic jsPlumb visual concepts

Connection 1#

  • node 1 has a Dot endpoint at anchor position Bottom
  • node 2 has a Rectangle endpoint at anchor position Top
  • connector 1 is a Bezier connector, with a label overlay

const ep1 = instance.addEndpoint(node1, {    endpoint:"Dot"    })
const ep2 = instance.addEndpoint(node2, {    endpoint:"Rectangle"    })
instance.connect({    source:ep1,    target:ep2,    anchors:[ "Bottom", "Top" ],    connector:{        type:"Bezier",         overlays:[            { type:"Label", options:{label:"Connection 1", location:0.5}}        ]     }})

Connection 2#

  • group is configured as a group, with node 3 as a child of the group
  • node 2 has a Dot endpoint with a Continuous anchor, which means it tracks the outline of the element as it is dragged.
  • node 3 has a Dot endpoint, also with a Continuous anchor.
  • connector 2 is a Straight connector, with a label overlay and an arrow overlay.
instance.connect({    source:node2,    target:node3,    connector:"Straight",    anchor:"Continuous",    overlays:[       { type:"Label", options:{label:"Connection 2", location:0.5}},       { type:"Arrow", options:{location:1}}    ]})
note

In the second connection we connected two DOM elements directly, whereas in the first connection we joined two endpoints. You can mix endpoint and elements in a connect call - it's up to the demands of the UI that you are trying to build.