Skip to main content

Elements overview

Elements are the main building blocks of your diagram. JointJS provides extensive capabilities of using elements provided by the library or building your own shapes with any complexity you want.

dia.Element

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

Model attributes specific to elements described in the following section.

dia.ElementView

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

  • Rendering an element inside of a paper
  • Handling the element's pointer events
  • Provides various methods for working with the element (visually)

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

const elementView = paper.findViewByModel(element);

Features

Elements provides additional features for diagramming.

Ports

Ports allow elements to create connection points for links. You can find more information in the ports section.

Nesting

To provide functionality for embedding and nestings elements into one another, JointJS give access to the several methods and model attributes.

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub