Graph Editor

Right_Click anywhere to add a node, Hold CTRL + Drag from-to node to add an edge.
Click and Drag a node to move it, Click a node/edge to select it.
Press Delete to remove a selected node or edge
Use Mouse wheel to zoom in and out
Click and Drag on empty space to move the current view

After looking for a versatile online graph editor tool and failing to find any that fitted my needs, I’ve decide to build this one using the amazing javascript library D3.js. It only accepts directed edges for now but undirected edges support is on its way ;).

To use it all you need to do is to paste an adjacency matrix (0’s and 1’s) on the textarea and click the ‘Load’ button to plot it. You can also add and delete nodes/edges using mouse and keyboard shortcuts (see instructinos above). I plan to add more features as I need or you guys ask (can’t promise anything but, hey, ideas are always welcome =D) so ping here once in a while, it may have some new tweaks to play with.

References

  1. The D3.js Library
  2. D3 Force plugin for D3.js
  3. D3 Zoom plugin for D3.js
  4. Modifying a Force Layout
  5. Directed Graph Editor (using D3.js v3)
  6. Interactive tool for creating directed graphs using d3.js
  7. Static Directed Graph
  8. Creating node labels in d3.js .v4
  9. D3 v4 force graph with images as nodes