Graphlib

The DirectedGraph package provides two functions that make it easy to convert graphs to and from the Graphlib graph format. This allows you to use the wealth of graph algorithms provided by the Graphlib library.

Installation

First, you need to the @joint/layout-directed-graph package as a dependency of your project (for example via yarn):

yarn add @joint/layout-directed-graph
yarn install

In order to use Graphlib, you additionally need to add the Graphlib package as an additional dependency of your project (for example via yarn):

yarn add @dagrejs/graphlib
yarn install

Usage

You can then import the package into your code:

import * as graphlib from '@dagrejs/graphlib';

Then, you can make use of toGraphLib and fromGraphLib functions.

Export to Graphlib

Exporting a JointJS graph to a Graphlib graph is straightforward and can help you leverage the Graphlib library's algorithms:

import { shapes, dia } from '@joint/core' ;
import { DirectedGraph } from '@joint/layout-directed-graph';
import * as graphlib from '@dagrejs/graphlib';

const graph = new dia.Graph({}, {cellNamespace: shapes});
// ... populate the graph with elements connected with links

// Get a Graphlib representation of the graph:
const glGraph = DirectedGraph.toGraphLib(graph);

// Use Graphlib algorithms:
graphlib.alg.isAcyclic(glGraph); // true if the graph is acyclic

Import from Graphlib

Importing a Graphlib graph into a JointJS graph is a bit more complex, as you need to provide custom callbacks to handle the conversion of Graphlib nodes and edges to JointJS elements and links:

The example below illustrates how Graphlib node/edge labels can be used to store additional information for each item. These labels are accessed in the callbacks as nodeData / edgeData, and the information within is used to specify the position, size, and label text of the Element / Link being created. (Note: In Graphlib, edge source id / edge target id are specified via nodeId of the respective node; we need to set the id of generated Elements as nodeId so that the generated Links can connect the generated Elements.) The callbacks work by adding the generated Element / Link to the graph in the end (e.g. via the graph.addCell() function):

import { shapes } from '@joint/core';
import { DirectedGraph } from '@joint/layout-directed-graph';
import * as graphlib from 'graphlib';

// Create a graph in Graphlib:
const glGraph = new graphlib.Graph();
glGraph.setNode(1, { x: 50, y: 50, width: 100, height: 50, label: 'A' });
glGraph.setNode(2, { x: 50, y: 150, width: 100, height: 50, label: 'B' });
glGraph.setNode(3, { x: 50, y: 250, width: 100, height: 50, label: 'C' });
glGraph.setEdge(1, 2, { label: 'Hello' });
glGraph.setEdge(2, 3, { label: 'World!' });

// Get a JointJS representation of the Graphlib graph:
const jjGraph = new dia.Graph({}, { cellNamespace: shapes });

DirectedGraph.fromGraphLib(glGraph, {
    graph: jjGraph,
    importNode: (nodeId, glGraph, jjGraph, opt) => {
        const nodeData = glGraph.node(nodeId);
        const element = new shapes.standard.Rectangle({
            id: nodeId,
            position: { x: nodeData.x, y: nodeData.y },
            size: { width: nodeData.width, height: nodeData.height },
            attrs: { label: { text: nodeData.label }}
        });
        jjGraph.addCell(element);
    },
    importEdge: (edgeObj, glGraph, jjGraph, opt) => {
        const edgeData = glGraph.edge(edgeObj);
        const link =  new shapes.standard.Link({
            source: { id: edgeObj.v },
            target: { id: edgeObj.w },
            labels: [{ attrs: { text: { text: edgeData.label }}}]
        });
        jjGraph.addCell(link);
    }
});