Nodic is a general purpose graph editor (or node editor).

It provides an optional graphical user interface to make it easy to see what graph we are building.


Nodic aims to make it easy to visualize and build a pipleline of process. It has both GUI and a javascript API : you can have a hybrid scripting environment. The original reason of this tool is a webGL rendering and processing pipeline that is made available for fast computation, without the hassle of low level setups.

API/tutorial - part 1 : make a graph

let nodeGroup = new Nodic.Group(HTMLelement)

This creates an environment that can contain nodes. Also giving an HTML element will create an editable GUI in it.

let color = new Nodic.Color(1, 1, 0, 1) let node = new Nodic.Node(nodeGroup, "node name", color);

Create a node in our nodeGroup.

Color's constructor is (r,g,b,a)→Color where r,g,b,a∈[0,1]
(but we allow number bigger in [0,∞] as well, allowing "light burnt" effect).

let input1 = new Nodic.Input(node, "in1"); let input2 = new Nodic.Input(node, "in2"); let output1 = new Nodic.Output(node, "out1"); let output2 = new Nodic.Output(node, "out2");

add inputs and outputs to our node

let cable = new Nodic.Cable(nodeGroup, output51, input13);

make a cable/edge between an output and an input.

nodeGroup.moveNode(node, 10, 20);

Move the node to x=10, y=20 in the GUI.

API/tutorial - part 2 : some tools

Nodic provides a few useful functions to make interaction easy

nodeGroup.selectAll(); nodeGroup.deselectAll();; nodeGroup.deselect(node);

Select node(s) in the GUI. That selection is used in the next functions :

nodeGroup.autowireSelection(); nodeGroup.selectConnexRight(depth=Infinity); nodeGroup.selectConnexLeft(depth=Infinity);

autowireSelection reads the selection from first to last (! order counts!) and wires automatically outputs and inputs that have matching names

selectConnexRight(depth) select connex nodes from the point of view of outputs (right side in GUI).
selectConnexLeft(depth) same with input (left in GUI).
depth specify how far we extend that selection. by default it's Infinity


graph evaluation : cycle detection + topological sorting + evaluation API

unwire : when unwireing a cable, allow rewire without dropping the entire cable

text editor : syntax color

typed IO : make some edges incompatibles so that we know before the execution

typed IO casting : add automatic casting when there is something obvious to do (should be disablable for debug)

cosmetics : make sure the text editor is a height of a multiple of 'discretization'