Customizing an existing shape

JointJS makes it easy to customize the styling of individual diagram elements, links, labels, and ports in JointJS is through the attrs model attribute:

• If the attributes specified in this object are standard SVG attributes, they are merely passed down to the individual subelements of the shape; then it is the job of the browser to apply them to the SVGElements and render the shapes in the requested manner when asked to do so by a JointJS view class (i.e. when a model is added to the graph or when the model's attributes are changed).
• If JointJS encounters one of its special attributes, it takes over with custom logic in order to offer advanced functionality; the results are then encoded back as standard SVG attributes. JointJS also has a mechanism to define one's own custom special presentation attributes, but only when creating a shape from scratch.

In addition, since JointJS relies on SVG behind the scenes, you can also make styling changes with CSS. Everything that you see inside a JointJS diagram is a DOM element, which means that you can inspect them with web browser tools as well as provide your own styles at any granularity (e.g. a specific type of element vs. any element from a specific cell namespace vs. any element vs. any cell).

Styling with presentation attributes

You can provide presentation attributes via the cell.attr() method. For example, to set the fill of the body subelement of an element, you would call:

element.attr('body/fill', 'red');

The cell.attr() method overwrites any defaults which are set by the shape definition for a specific single instance of that shape type.

You can find a reference for ready-to-use shapes (including the subelements which you can style) in our API reference (e.g. shapes.standard.Rectangle). For custom shapes that you create from scratch, the subelements are defined by the shape's markup.

A list of native SVG presentation attributes can be found elsewhere on the Internet. For example, have a look at MDN's SVG Attribute reference.

Special presentation attributes

JointJS introduces special presentation attributes, which are JointJS-specific presentation attributes that offer functionality beyond that of native SVG attributes.

note

All JointJS special attributes use camelCase naming. For consistency, it is thus very strongly recommended that you make use of JointJS's ability to translate camelCase into native SVG's kebab-case, and use camelCase when setting native SVG attributes as well (i.e. strokeWidth instead of native 'stroke-width').

The full list is presented in our API reference. Some of the most interesting things JointJS allows you to do thanks to special presentation attributes include:

• setting relative dimensions of elements with calc() function,
• creating custom link arrowheads,
• setting relative position of labels on links,
• adding custom link labels,
• styling JointJS shapes with filters and gradients.

It is also possible to create your own custom special presentation attributes when you create a shape from scratch.

Styling with CSS

In addition to styling with presentation attributes, you can apply styles to SVG elements using CSS. All native SVG presentation attributes can be used as CSS properties, in addition to HTML presentation attributes.

You can learn more in a dedicated page in our documentation.