Repository graph-viz-d3-js contains code editor and live preview of code. Check out editor live demo.
- Code editor with syntax highlighting and error annotations
- Sneak live preview of dot graph in SVG
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.
- 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 Moveviz.js
andxdot
parsing to separate WebWorker- Custom
viz.js
compile withxdot
output only to optimize size
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.