Visual Graph Editor

This is an improved re-implementation of Colorado Reed's directed-graph-creator.

Interactions

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

• Scroll to zoom in or out
• Drag whitespace to move graph
• Shift-click on whitespace to create a node
• Shift-click on a node and drag to another node to connect them with a directed edge
• Shift-click on node or edge to change its label
• Click on node or edge and press backspace/delete to delete
• Upload/download graph in JSON format
• Delete whole graph

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 best. 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.

This page was moved from my old website.