Glossary
JointJS is a large library, and it may be difficult to make sense of all the technical language used throughout this documentation. We have compiled this page to explain the most important concepts.
Cell​
The Cell is the data model of a single unit of a JointJS diagram. It is a base class for both Element and Link. All models in a graph inherit from the Cell class.
CellView​
The CellView is the visual representation of a single Cell (either an element or a link) on a specific Paper. Each Cell has a corresponding CellView that handles its rendering and interaction.
Element​
A node or shape in the diagram. Elements are models representing visual objects that can be connected by links. Elements can use predefined shape definitions like rectangles, circles, and ellipses, as well as custom element type defined with your own SVG markup and default presentation attributes.
Other diagramming libraries may call this object a vertex.
ElementView​
The visual representation of a single Element on a specific Paper.
Graph​
The Graph is the data model of a diagram in JointJS. It contains all the cells (i.e. elements and links) and their relationships. The Graph object is responsible for managing the elements' data and their properties.
Highlighter​
Highlighters are visual behaviors which provide feedback to your users (e.g. changing the color or stroke of an element) in order to indicate selection, hover or other states.
Link​
A model representing the connection between two elements in the diagram. You may use one of JointJS's predefined link definitions, or create a custom link type with your own SVG markup and default presentation attributes.
The routing of links can be modified in different ways - e.g. routers, connectors, and vertices - and they can have labels, arrows or other markers specified.
Other diagramming libraries may call this object an edge.
LinkView​
The visual representation of a single Link on a specific Paper.
Magnet​
When you mark a specific subelement of a cell as a magnet, it means that the subelement can become the source and/or the target of links during link reconnection.
Markup​
The markup is a special prototype property of a specific custom cell shape definition, which defines the SVG building blocks (subelements
) used to render the cell type into the paper.
A subelement has two main defining characteristics - an SVGElement tag, and a selector identifying the subelement for assigning presentation attributes.
Model attributes​
Model attributes are properties that define the behavior of elements and links. Model attributes include model id, type, element size and position and link source and target. You may store your own data on cells as model attributes, if required by your use case.
MVC (Model-view-controller)​
The architectural pattern used by JointJS. In the context of JointJS, the Graph acts as the model, the Paper as the view, and the interactions (e.g. dragging or connecting) as the controller.
JointJS uses an event-driven architecture. Events are triggered when changes occur in the graph (e.g. adding/removing elements) or when user interactions happen in the paper (e.g. clicking a link).
Paper​
The Paper is the visual representation of a single Graph object. The paper is responsible for rendering the graph on the screen and handling user interactions like dragging, clicking, and connecting elements.
Port​
A port is a type of magnet with a built-in API which allows you to define a UI element on an element into which links can be connected. Ports make it easier for your users to manage complex diagrams.
Ports may be customized in a similar way as elements, with defined markup and presentation attributes.
Presentation attributes​
Presentation attributes are a subgroup of model attributes - they are the properties which define the visual characteristics of declared subelements of elements and links.
These can be any native SVG attributes like color, font family or stroke width. In addition, JointJS defines special presentation attributes which offer functionality beyond that of native SVG attributes, such as text wrapping and relative dimensions.
Serialization​
The process of converting a JointJS graph into a JSON format for storage or transmission. JointJS provides methods to serialize and deserialize graphs.
Tool​
Tools are interactive UI features attached to elements (element tools) or links (link tools), such as buttons, handles or context menus. Tools enhance the usability of diagrams by providing additional functionality.