Graphviz dot in your browser

Repository graph-viz-d3-js contains code editor and live preview of code. Check out editor live demo.

Features

• Code editor with syntax highlighting and error annotations
• Sneak live preview of dot graph in SVG

Design

Editor is based on Ace and syntax highlighting uses its default mode/dot. Error annotations are generated by parser written in PEG.js.

Graphviz is embedded in browser using viz.js. Instead of using SVG directly it uses xdot format and parses it. Data structure on the output is drawn using d3.js with nice animations during coding.

Roadmap

• Test suite using Graphviz gallery examples (50% done)
• Add code completion for dot source editor
• Improve animations with path tweening and concatenation of arrow heads with arrow arcs
• Move dot parsing to Ace WebWorker
• Move viz.js and xdot parsing to separate WebWorker
• Custom viz.js compile with xdot output only to optimize size

License

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.