msagl-js

msagl-js is a JavaScript implementation of advanced graph layout algorithms. It consists of the following modules:

• msagl-js: the core graph data structures and layout engine
• @msagl/parser: convert common formats to MSAGL Graph instances
• @msagl/renderer: a WebGL-powered rendering component

Installation

Using NPM packages:

npm i msagl-js @msagl/parser @msagl/renderer

import {Graph} from 'msagl-js'
import {Renderer} from '@msagl-js/renderer'

Using script tags:

<script src="https://unpkg.com/msagl-js@latest/dist.min.js"></script>
<script src="https://unpkg.com/@msagl/parser@latest/dist.min.js"></script>
<script src="https://unpkg.com/@msagl/renderer@latest/dist.min.js"></script>

const {Graph, Renderer} = msagl

Usage

Render a graph from a DOT file:

import {parseDot} from '@msagl-js/parser'
import {Renderer} from '@msagl-js/renderer'

const renderer = new msagl.Renderer()
const graph = parseDot(`
graph G {
	kspacey -- swilliams;
	swilliams -- kbacon;
	bpitt -- kbacon;
	hford -- lwilson;
	lwilson -- kbacon;
}`);
renderer.setGraph(graph)

Render a graph from JSON:

import {parseJSON} from '@msagl-js/parser'

const graph = parseJSON({
  nodes: [
    {id: 'kspacey'},
    {id: 'swilliams'},
    {id: 'kbacon'},
    {id: 'bpitt'},
    {id: 'hford'},
    {id: 'lwilson'},
  ],
  edges: [
    {source: 'kspacey', target: 'swilliams'},
    {source: 'swilliams', target: 'kbacon'},
    {source: 'bpitt', target: 'kbacon'},
    {source: 'hford', target: 'lwilson'},
    {source: 'lwilson', target: 'kbacon'}
  ]
});
renderer.setGraph(graph)

Renderer API

Constructor:

new Renderer(container?: HTMLDivElement)

To layout and render a new graph:

renderer.setGraph(g: Graph, options: RenderOptions)

To change the layout of the current graph:

renderer.setRenderOptions(options: RenderOptions)

The renderer options accept the following fields:

• layoutType: 'Sugiyama LR' | 'Sugiyama TB' | 'Sugiyama BT' | 'Sugiyama RL' | 'MDS' - algorithm used to layout the graph. By default, if all edges in the graph are undirected then Pivot MDS is used; otherwise, it applies the Sugiyama Scheme.

  Sugiyama TB (layered top-to-bottom):

  

  MDS (Multidemensional Scaling):

  

• label

  • fontFamily: string - CSS font-family value. Default 'sans-serif'.
  • fontSize: number - Font size, default 16.
  • lineHeight: number - Line height relative to the font size, default 1.
  • fontStyle: string - CSS font-style value, default 'normal'
  • fontWeight: string | number - CSS font-weight value, default 'normal'.

• edgeRoutingMode: EdgeRoutingMode - Enum for supported routing modes, including Spline, SplineBundling StraightLine, SugiyamaSplines, Rectilinear, RectilinearToCenter, None. Default varies by layoutType.

Examples

Currently there are only two examples at the "examples" dir. One of them, examples/layout, can be seen at https://microsoft.github.io/msagljs/.

In addition to the initially loaded graph, the page offers a list of graph samples.

You can view a DOT graph by drag-dropping a file into the folder icon at the top of the page.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.