A node graph is a way of visualizing a digital process by means of visual elements called nodes.

What is a node graph?

A node graph is a way of visualizing a digital process by means of visual elements called nodes. It is used to visualize the treatment of data. In this way, a node graph can be used in to visualize the creation of such things as:

a compositing, such as laying one image over another (such as Fusion and Nuke)
code (such as Bolt in Unity or ComfyUI for Stable Diffusion)
shaders, to be applied to a 3D model (examples include the shading system of Maya and Blender)
3D elements (examples include Blender's Geometry Nodes and Houdini)

Its advantage is its flexibility and its 'learn once, apply everywhere' philosophy.

Early history of node graphs

The first description of a node graph architecture was in W. R. Sutherland's MIT thesis 'Online Graphical Specification of Procedures'. He describes it as: ‘An interactive computer graphics system may be used for describing procedures in a two-dimensional programming language as well as for the more usual task of manipulating graphical data’.

Though less visually sophisticated that what we are used to today, the basic elements that Sutherland describes are the same:

A set of discrete elements (Figure 1) called nodes. A node performs a single function, such as 'add', 'multiply', 'invert' etc. Depending on their type, these nodes feature a variety of 'sockets' the main ones being 'in' and 'out'.
A system to connect the nodes (Figure 2). Old times call these connections 'noodles'.

node.001.png

Figure 1. W. R. Sutherland's diagram of nodes

node.002.png

Figure 2. W. R. Sutherland's diagram of a simple node graph showing noodles in action

The advantage of this system is that it presents a sophisticated flow of data using simple visual symbols (Figure 3).

node.003.png

Figure 3. W. R. Sutherland's visualization of the user's experience

A few years later, the Graphical Input Language (GRAIL) [2] (Figure 4) was developed as part of a larger effort to make computing more available to the wider public which included handwriting recognition.

node.004.png

Figure 4. The GRAIL node system in action

Examples of node graphs

Shown below are examples of node graph architecture in a range of applications.

Nodes made their first appearance in Blender's shader editor (Figure 5) in version 2.6 (2011). Blender has a very active everything nodes (Blender foundation) philosophy, of which Geometry Nodes is the star player.

Figure 5. Nodes used to create a material in Blender 2.6

Almost everything in Maya can be expressed in node form via its Hypergraph (Figure 6). See how the hierarchy of the rig is reflected by that of the Hypergraph.

node.007.png

Figure 6. Construction hierarchy shown in Maya's Hypergraph

Shake (Figure 7) was a high-level compositor that was used extensively in the first Lord of the Rings movie. It got its name from the fact that shaking a node would release it from the node tree.

Figure 7. Compositing in Shake

More examples here...

Figure 8. Lotsa nodes

Good things about nodes

One very good thing about node based software is that it enabled non-linear edits.

Shown in Figure 9 is a simple Photoshop composite as it would appear in the layer stack. Shown in Figure 10 is a similar arrangement in DaVinci's Fusion.

Attached to both the red circle foreground is BrightnessContrast1 and attached to the gray background is BrightnessContrast2. The brightness value of BrightnessContrast2 is linked to that of BrightnessContrast1 using the simple expression BrightnessContrast1.Brightness*-1 . By these means, the brightness of BrightnessContrast2 is the invert of BrightnessContrast2.

This non-linear approach would not have been possible in Photoshop's layer-based approach.

Figure 9. A simple composite in Photoshop

nodes.012.gif

Figure 10. A similar composite in DaVinci's Fusion, showing non linear workflow in action

Another good thing about nodes is the way that the underlaying code of the node tree is readily available.

Shown in Figure 11 is the result of copying a background node from Fusion and pasting it into a text editor. See how easy the code is to read? If you wish, you can edit the values in the node and past back into the script. In this way it is possible for a user to send a complex project to a colleague via pasted text in email!

node.009.png

Figure 11. Nodes as a visualization of a code script

Not so good things about nodes

The worst thing about nodes is node hell! (Figure 12). Shown below is a complex network of nodes used to make a simple animated gate.

nodes.014.gif

Figure 12. Node hell

[1] Sutherland, W.R., 1966. The on-line graphical specification of computer procedures (Doctoral dissertation, Massachusetts Institute of Technology).

[2] Ellis, T.O., Heafner, J.F. and Sibley, W.L., 1969. The GRAIL language and operations (No. RM6001ARPA).