Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.
When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.
To see this example as part of a larger project, check out Modal Logic Playground!
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Directed Graph Editor</title> <link rel="stylesheet" href="app.css"> </head> <body> </body> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="app.js"></script></html> Modified http://d3js.org/d3.v5.min.js to a secure url
https://d3js.org/d3.v5.min.js