Viewing Graphviz with Javascript

Here we look at how to get graphviz-style network visualisations into wiki, and more generally onto the web in a modern way. This involves a consideration of bot technical performance, and workflow.

Data Visualisation --> Graphviz Data Visualisation --> Network Visualisation Data Visualisation --> Visualising Graphs Data Visualisation --> Maps Data Visualisation --> Simulation Simulation --> Bret Victor Graphviz --> Viewing Graphviz with Javascript Viewing Graphviz with Javascript --> Dagre


The issue is with how the wiki-client is trapping events and not allowing the browser to handle the url linkes.


Client Side Solution

A client side solution has some advantages. you can tweak the code in the browser. You can quickly role simple diagrams.

Client side solutions suffers from the lack of ability to bring the image into a nice drawing package and edit it to make it clean and simple before returning it to the wiki. That is what SVG's are good for.

# Dagre

Dagre stands for "Directed graph renderer". Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side - github

However the best current javascript client side implementation is: - Dagre

* graphlib github and dagre-d3 github - a directed multi-graph library for Javascript (there is a DOT parser), and a D3-based renderer for directed graphs. *It is interesting to note that the vis.js repo also suggests checking out dagre*

# Viz.js

Viz.js ports graphviz to js with emscripten. This sounds like the wrong way to go but they do have nice examples. github

# Vis.js

The gallery includes some copies from the Graphviz gallery:

- - Examples - - Code - github

Vis.js, not to be confused with the emscripten port of graphviz - viz.js

Older Solutions

Canviz is a JavaScript library for drawing Graphviz graphs to a web browser canvas. More technically, Canviz is a JavaScript xdot renderer. It works in most modern browsers. google code

Canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG. github

# See also