Ready-to-use shapes

JointJS provides several collections of ready-to-use shapes. In this section you will learn how to use them in your diagram.

Creating an instance of a ready-to-use shape

To use ready-to-use shapes, first, you need to import a corresponding namespace and then use it to specify cellNamespace and cellViewNamespace options of the Graph and Paper respectively. You can learn more about cell namespaces in a dedicated page in our documentation.

import { dia, shapes } from '@joint/core';

const namespace = {
    ...shapes
}

const graph = new dia.Graph({}, { cellNamespace: namespace });

const paper = new dia.Paper({
    /* ... */
    cellViewNamespace: namespace
});

info

We are using term shape here, which represents all possible visual entities in JointJS, both elements and links. We use this term alongside the term cell which we are using for an abstract representation of a shape in the class hierarchy.

This will allow you to add elements declared in the shapes namespace to your Graph, which will be rendered in Paper using corresponding ElementView.

To create a ready-to-use element you need to create an instance of the desired element from the shapes namespace. Usually, the constructor accepts options specific for the element and presentation attributes for the markup. The default values for position and size are { x: 0, y: 0} and { width: 1, height: 1 } (as it is a descendant of dia.Element), so we need to specify its position and size. Let's create a rectangle:

import { dia, shapes } from '@joint/core';

const rectangle = new shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 60 },
    attrs: {
        body: {
            fill: 'red'
        },
        label: {
            text: 'Hello World!'
        }
    }
});

rectangle.addTo(graph);

Each element has its own default values. For example, standard.Rectangle element has body and label selectors specified in the markup.

Shape collections

You can find these collections inside the shapes namespace.

Standard

When using JointJS shapes namespace contains a set of standard shapes. You can find specifications on every shape in our API reference.

Records

JointJS+ provides additional standard.Record shapes. They are part of a standard shapes set. Find an example of record shapes in this tutorial.

BPMN

JointJS+ provides you with a set of Business Process Model and Notation 2.0 shapes. They are designed to be easily configurable with the Inspector.

Measurements

JointJS+ offers shapes for displaying object dimensions, distances, and relative angles. Find them in the shapes.measurement namespace.

VSM

JointJS+ offers a set of Value Stream Mapping (VSM) shapes in an independent module, requiring separate installation alongside the main package.

Charts

JointJS+ provides you with a set of flexible, good looking and interactive charts that you can use in your applications. Note that from the JointJS perspective, a chart is just another JointJS shape. This means that you can add it to your diagram, resize it, rotate it, clone it, connect it with other elements, serialize/deserialize it to/from JSON format or export it to SVG, PNG or JPEG. No other library can give you this flexibility!