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.
Contents
-
dotparser with lax mode to verify Graphviz input -
dotmode for ACE editor - stage data renderer with
d3.js
Design
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.
Usage
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):
requirejs.config({
//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:
require(["renderer"],
function (renderer) {
dotSource = 'digraph xyz ...';
// initialize svg stage
renderer.init("#graph");
// update stage with new dot source
renderer.render(dotSource);
});Now you can even zoom / drag your graph
require(["renderer"],
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
renderer.render(dotSource);
// 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(){
$('#copy-div').html(renderer.getImage());
});
}); Roadmap
- Test suite using Graphviz gallery examples (50% done)
- Improve animations with path tweening and concatenation of arrow heads with arrow arcs
- Custom
viz.jscompile withxdotoutput 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 testWhen everything is ready you can build also dist version (takes some time).
> grunt allLicense
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.
