JavaScript HTML Makefile
Clone or download
mstefaniuk Merge pull request #49 from magjac/master
Fixes for two node label bugs (2nd attempt)
Latest commit 546cc2e Jun 26, 2017

Graphviz dot in your browser

Bower component graphviz-d3-renderer renders Graphviz source in the browser with d3.js. Check it out on Graphviz fiddling website.

Build Status Coverage Status Forks Stars Join the chat at


  • dot parser with lax mode to verify Graphviz input
  • dot mode for ACE editor
  • stage data renderer with d3.js


DOT parser is written in PEG.js has lax mode to parse source to the end with all errors. Graphviz is embedded in browser using viz.js. Instead of using SVG directly it uses xdot format and parses it. Data structure of the output is drawn using d3.js with animations during rendering.


To include it in your project simply use Bower:

bower install graphviz-d3-renderer --save

Note that it needs require.js to work. Before loading proper paths should be defined for renderer and its dependecies (d3.js and worker for require.js plugin):

	//By default load any module IDs from js/lib
	baseUrl: 'js',
	//except, if the module ID starts with "app",
	//load it from the js/app directory. paths
	//config is relative to the baseUrl, and
	//never includes a ".js" extension since
	//the paths config could be for a directory.
	paths: {
		d3: '/bower_components/d3/d3',
		"dot-checker": '/bower_components/graphviz-d3-renderer/dist/dot-checker',
		"layout-worker": '/bower_components/graphviz-d3-renderer/dist/layout-worker',
		worker: '/bower_components/requirejs-web-workers/src/worker',
		renderer: '/bower_components/graphviz-d3-renderer/dist/renderer'

Then you can inject it into you app:

  function (renderer) {

  dotSource = 'digraph xyz ...';
  // initialize svg stage

  // update stage with new dot source

Now you can even zoom / drag your graph

	function (renderer) {
		dotSource = 'digraph xyz ...';
		// initialize svg stage. Have to get a return value from renderer.init 
		//   to properly reset the image.
	    zoomFunc = renderer.init({element:"#graph", extend:[0.1, 10]});

	    // update stage with new dot source
	    // for saving the image, 
	    $('#copy-button').on('click', function(){
		    $('#copy-div').html(renderer.getImage({reset:true, zoomFunc:zoomFunc}));
	    // if do not need to reset the image before saving the image
	    $('#copy-button').on('click', function(){


  • Test suite using Graphviz gallery examples (50% done)
  • Improve animations with path tweening and concatenation of arrow heads with arrow arcs
  • Custom viz.js compile with xdot output only to optimize size

Building and contributing

To make controlled changes you need node and grunt. When you add a new feature you must cover it with unit tests.

> grunt build test

When everything is ready you can build also dist version (takes some time).

> grunt all


Currently project is available on LGPL so you can use it unmodified in free or commercial projects. If you add improvements to it you must share them.