repl.it

Right click drag to create nodes

Left click drag while hovering over a node to make a connection

To change edge values or node text simply type while hovering over them

To delete a node or edge simply mouse over and press the delete key

creating a graph

          
let graphobj = new Graph("canvasid", fps=60, editable=true, buildable=true)          
let startNode = graphobj.node( x_positon , y_position , radius , "text")

making connections

          
startNode.connect(node, weight=0)
startNode.directional(node, weight=0)
startNode.biDirectional(node, weight=0)

Graph Editor Library also supports built in diijkstra, depth first, breadth first, and Astar search

this widget is set up to find the path from Start to End. Feel free to edit the graph

These allow you to draw directional or biDirectional connections

Graphs.js also has built in graph search functions

specify the start node id, the end node id, and weather you would like to draw a path

the function returns a list of node objects in the order they were traversed

            
graphInstance.diijkstra(startNode.id, endNode.id, draw_path=true)
graphInstance.Astar(startNode.id, endNode.id, draw_path=true)
graphInstance.depthFirstSearch(startNode.id, endNode.id, draw_true=true)
graphInstance.breadthFirstSearch(startNode.id, endNode.id, draw_path=true)

This Library also supports Images

Go ahead and drag a new node onto the canvas

simply specify the image you want on the node with the setImage method

            
node.setImage("https://someimage.jpg")

With the help of callback hooks you can create beautiful animated creations

drag new nodes in to make the graph larger

this partucular graph uses diijkstra's shortest path to constantly highlight the shortest path between A and B

Meanwhile the edge weight is set to the euclidean distance between nodes

graph editor Library allows for callback hooks

          
let g = new Graph("somecanvasid")
g.setTickCallback(function)

the tickCallback is called every frame

and the callback is passed the entire graphInstance as an argument

          
g.setNodeSetupCallback(function)

the nodeSetupCallback is called everytime a new node is created either programatically or created by user

nodeSetupCallback is passed just the created node as an argument

          
g.setNodeCreatedCallback(function)

the nodeCreatedCallback is only called when ui nodes are drawn in

if nodeCreatedCallback is set and nodeSetupCallback is set both will be called

nodeCreatedCallback is passed just the created node as an argument

          
g.setConnectionSetupCallback(function)

the ConnectionSetupCallback is called whenever a new connection is made programatically or by user

the ConnectionSetupCallback is passed just the new edge created as an argument

          
g.setConnectionCreatedCallback(function)

the connectionCreatedCallback is called only when a new connection is made through the UI

the connectionCreatedCallback is passed just the new edge as an argument

Welcome to the Graph Editor Library (DEMO)

Graphs.js also has built in graph search functions