D3 Graphviz GUI editor proof-of-concept

This is a proof-of-concept of a graphical editor that allows you to to edit a Graphviz graph graphically, by drawing edges between nodes and inserting new nodes by using the mouse only. It also allows you to edit the textual DOT language description and directly see the graph transform itself into a new layout in an animated transition.

The GUI editor is perfectly usable as it is, but it has some simplifications that needs to be addressed in a production quality application in order not to hamper productivity:

• Draws only the standard type edge with alternating colors, although you can edit all aspects of it with the text editor afterwards and see the changes directly.
• Draws only two kinds of node shapes, alternating between ellipse and polygon and different colors and using predefined names. Also this can of course be changed with the text editor.

Help is available by clicking the question mark in the top right corner.

This small proof-of-concept application is built with d3-graphviz and has been created to demonstrate the capabilities of its Draw API that allows you to build your own application around a Graphviz graph.

If you are interested in discussing making this proof-of-concept into a production quality application, please join the d3-graphviz Slack.