Links overview

Links are special shapes which you can use to connect different shapes between each other. JointJS provides extensive links customization, allowing you to create any configuration of desired end points of the link as well as the connection line itself. The base model for links is dia.Link while its base view is represented by dia.LinkView class.

dia.Link

dia.Link is a base model for diagram elements. It inherits from dia.Cell with several additional model attributes and methods specific to links.

You can find extensive list and description of model attributes specific to link in the following section.

dia.LinkView

The view for the dia.Link model. It inherits from dia.CellView and is responsible for:

• Rendering a link inside a paper
• Handling the link's pointer events
• Providing various methods for working with the link (visually)

To find the view associated with a specific link model, use the paper.findViewByModel() method:

const linkView = paper.findViewByModel(link);
// const linkView = link.findView(paper); // alternatively

Model attributes

Beside the model attributes which are common for all shapes, links have its own set of unique model attributes. Learn more about them in this tutorial.

Labels

This section explains everything you need to know to make full use of the powerful label system for links. JointJS offers a full suite of methods for working with link labels.

Tools

Easily add and manage interactive link tools in your diagrams with JointJS. Explore this guide for creating custom buttons and improving user interactions.