Diagram basics

JointJS diagrams are built using several JointJS objects - all JointJS applications need to have a Graph and a Paper. The graph contains a reference to all contents of your diagram, while the paper is responsible for rendering the graph.

Graph

Graph is a model that represents a collection of shapes. It is a core JointJS object that provides the foundation for building diagrams.

Paper

Paper is the view where graph model is rendered. It provides a variety of features for working with shapes views.

Cells

Cells are primary building blocks for any JointJS diagram. In our API, cells are also known as shapes and we use these terms interchangeably.

Elements

Elements are the main building blocks of your diagram. JointJS offers both pre-built shapes and tools to create custom shapes of any complexity.

Links

Master JointJS links to connect shapes with advanced customization. Explore dia.Link and dia.LinkView for dynamic diagram configurations.

Events

JointJS provides multiple events for reacting to user interactions with the diagram. These events can be used to trigger custom actions, such as updating the diagram or displaying additional information.