Viz.js

This project builds Graphviz with Emscripten and provides a simple wrapper for using it in the browser.

For more information, see the wiki.

Usage

Node.js

import Viz from "@aduh95/viz.js";
import getWorker from "@aduh95/viz.js/worker";

const worker = getWorker();
const viz = new Viz({ worker });

viz
  .renderString("digraph{1 -> 2 }")
  .then(svgString => {
    console.log(svgString);
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    // If you don't terminate the worker explicitly, it will be terminated at the end of process
    worker.terminate();
  });

If you want to use it from a CommonJS script, you would need to use a dynamic imports:

async function dot2svg(dot, options = {}) {
  const Viz = await import("@aduh95/viz.js").then(module => module.default);
  const worker = await import("@aduh95/viz.js/worker").then(module =>
    module.default()
  );

  const viz = new Viz({ worker });

  return viz.renderString(dot, options);
}

Browsers

In a world where Import Maps and import.meta.resolve are reality, you could have something like that:

import Viz from "@aduh95/viz.js";

async function dot2svg(dot, options) {
  const workerURL = await import.meta.resolve("@aduh95/viz.js/worker");

  const viz = new Viz({ workerURL });

  return viz.renderString(dot, options);
}

Building From Source

To build from source, first install the Emscripten SDK. You'll also need Node.js and Yarn.

On macOS:

brew install binaryen emscripten automake libtool pkg-config qt

You will certainly need to tweak config files to make sure your system knows where it should find each binary.

The build process for Viz.js is split into two parts: building the Graphviz and Expat dependencies, and building the rendering script files and API.

make deps
make all

Running Tests

Install the development dependencies using Yarn:

$ yarn install
$ yarn test

JSPM

@aduh95/viz.js

Package Exports

Readme