Graph Editor
Reimplementation of directed-graph-creator with D3 v6 and a few improvements.
Demo: https://verzettelung.com/20/11/21/
Usage
- 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 title
- Click on node or edge and press backspace/delete to delete
Improvements over original
- Optional edge labels
- Edge coloring includes arrow heads
- Upload fixed: current ID variable is initialized correctly from uploaded data, preventing bugs caused by duplicate IDs
- All positions relative to SVG container: elements outside SVG do not affect graph layout
- ES6 syntax and D3 v6
TODO
- Multiline node labels
- Position editable edge labels
License
MIT-licensed, as the original.