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.

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 { shapes, dia } 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);
glGraph.setNode(2);
glGraph.setNode(3);
glGraph.setEdge(1, 2);
glGraph.setEdge(2, 3);

// Get a JointJS representation of the Graphlib graph:
const graph = DirectedGraph.fromGraphLib(glGraph, {
    importNode: (node) => {
        return new shapes.standard.Rectangle({
            position: { x: node.x, y: node.y },
            size: { width: node.width, height: node.height }
        });
    },
    importEdge: (edge) => {
        return new shapes.standard.Link({
            source: { id: edge.v },
            target: { id: edge.w }
        });
    }
});