Demo: Graph Editor

Nov 21, 2020

Graph-editor is an improved reimplementation of Colorado Reed's directed-graph-creator.

You can try the following actions (not optimized for mobile devices):

Why?

I was looking for a tool with which non-technical folks could create and edit directed graphs, something that is intuitive to use and extensible, as I would need to add support for arbitrary attributes on nodes and edges and some other custom functionality. After reading a bit online and trying different options, I liked Colorado Reed's directed-graph-creator the most. However, the last commit was from 2014, the code used an old D3 version, and I noticed a few bugs. So I decided to reimplement the graph with modern JavaScript syntax and the latest version of D3. I was able to reuse large parts of the original code, however, for some problems I had to make adjustments or find different solutions. I fixed bugs I stumbled upon and added optional edge labels and arrow heads that match the color of the arrow's path element.