Automatic layouts

JointJS provides several plugins that arrange your diagrams for you. Directed Graph, MSAGL, Force Directed, Stack, Grid, and Tree layouts all position the elements of a graph, and most of them route the links along the way.

Where you need the routing without the positioning - links kept clear of the elements in a diagram you lay out yourself, or one the user arranges by hand - reach for standalone link routing.

Directed graph

Directed Graph package provides automatic layout of directed graphs. This package uses the open-source (MIT license) Dagre library internally.

Force directed layout

ForceDirected class in the layout namespace implements automatic layouts for graphs using a force-directed approach. This is useful for, usually larger, undirected graphs.

Grid layout

Grid layout implements automatic layouts for graphs. This is useful in many scenarios, one of them being e.g. automatically positioning elements in Stencil.

MSAGL layout

Lay out JointJS diagrams with the Microsoft Automatic Graph Layout (MSAGL) Sugiyama algorithm, including rectilinear and spline routing.

Stack layout

Stack layout automatically rearranges elements into stacks. This is useful in many scenarios, for example in creating kanban-styled diagrams or yamazumi charts.

Standalone link routing

Route every link in a JointJS graph around obstacles with @joint/router-avoid, the libavoid orthogonal connector routing engine compiled to WebAssembly.

Tree layout

layout.TreeLayout is a layout algorithm for tree-like graphs. It's great for displaying org charts, mind maps, class hierarchies and other tree structures.