Directed graph

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

The package exposes the DirectionGraph object which contains several functions including layout(), which provides functionality for rearranging your diagram into the desired layout.

Installation

Install the Directed graph open-source package (@joint/layout-directed-graph) using your package manager:

npm

npm add @joint/layout-directed-graph

pnpm

pnpm add @joint/layout-directed-graph

yarn

yarn add @joint/layout-directed-graph

Now, you can import functionality from @joint/layout-directed-graph into your application as necessary:

import { DirectedGraph } from '@joint/layout-directed-graph';

The following example illustrates the layout() function. The first parameter can be a dia.Graph or an array of dia.Cells that we want to lay out. The second parameter is an object that contains various options for configuring the layout:

const graphBBox = DirectedGraph.layout(graph, {
    nodeSep: 50,
    edgeSep: 80,
    rankDir: "TB"
});
console.log('x:', graphBBox.x, 'y:', graphBBox.y)
console.log('width:', graphBBox.width, 'height:', graphBBox.height);

A blog post explaining the usage of the layout() function in more detail can be found here.

There is also a UMD version available

Place the UMD distribution of the plugin into the root of your package.

One way to do that is via NPM

1. Install the Directed graph open-source package (@joint/layout-directed-graph) using NPM:

   npm add @joint/layout-directed-graph

2. Navigate to the newly created node_modules folder.

3. Copy the @joint/layout-directed-graph/dist/DirectedGraph.js file and paste it into the root of your package.

Place the source code of the two required dependencies - graphlib.core.js and dagre.js - into the root of your package.

One way to do that is via NPM (continuing from above)

1. Navigate to the node_modules folder.
2. Copy the @dagrejs/graphlib/dist/graphlib.core.js file and paste it into the root of your package.
3. Copy the @dagrejs/dagre/dist/dagre.js file and paste it into the root of your package.

Include DirectedGraph.js plus its dependencies graphlib.core.js and dagre.js in your HTML:

• JointJS
• JointJS+

index.html

<script src="joint.js"></script>
<script src="graphlib.core.js"></script>
<script src="dagre.js"></script>
<script src="DirectedGraph.js"></script>

Access DirectedGraph through the joint.layout namespace:

index.js

const graphBBox = joint.layout.DirectedGraph.layout(graph, {
    nodeSep: 50,
    edgeSep: 80,
    rankDir: "TB"
});
console.log('x:', graphBBox.x, 'y:', graphBBox.y)
console.log('width:', graphBBox.width, 'height:', graphBBox.height);

Interactive example

In this example, the diagram presents a visual representation of the adjacency list specified in the text field above it, laid out with the layout() function.

Try adding/removing/changing some lines from the adjacency list and then clicking the "Layout" button. If your modifications create a valid adjacency list specification, the diagram will be refreshed with your new content.

Open Sandbox

Example with clusters

The layout() function is able to handle clusters of nodes as well (i.e. embedded JointJS Elements). The following demo presents a complex example:

Open Sandbox