diff --git a/editor.js b/editor.js
index ab6ad51..524cdd5 100644
--- a/editor.js
+++ b/editor.js
@@ -137,25 +137,32 @@ function removeState(state) {
   workflow.states.splice(workflow.states.indexOf(state), 1);
 }
 
+
+/**
+ * 
+ * @param {*} node 
+ * @returns The colour the given node should have.
+ */
+function getColour(node) {
+  if (node.stateData && node.stateData.final !== 'False' && node.stateData.final !== '') {
+    if (node.stateData.final === 'True' || node.stateData.final === 'ok') {
+      return selection === node ? '#a4eb34' : '#7fad36';
+    } else if (node.stateData.final === 'not-ok') {
+      return selection === node ? '#f77474' : '#f25050';
+    } else {
+      //console.log(node.stateData.final);
+    }
+  } else if (node.name === '@@INIT') {
+    return selection === node ? '#e8cd84' : '#d1ad4b';
+  } else {
+    return selection === node ? '#5fbad9' : '#4496b3';
+  }
+}
+
 const Graph = ForceGraph()
   (document.getElementById('graph'))
     .linkDirectionalArrowLength(6)
     .linkDirectionalArrowRelPos(1)
-    .nodeColor(node => {
-      if (node.stateData && node.stateData.final !== 'False' && node.stateData.final !== '') {
-        if (node.stateData.final === 'True' || node.stateData.final === 'ok') {
-          return selection === node ? '#a4eb34' : '#7fad36';
-        } else if (node.stateData.final === 'not-ok') {
-          return selection === node ? '#f77474' : '#f25050';
-        } else {
-          //console.log(node.stateData.final);
-        }
-      } else if (node.name === '@@INIT') {
-        return selection === node ? '#e8cd84' : '#d1ad4b';
-      } else {
-        return selection === node ? '#5fbad9' : '#4496b3';
-      }
-    })
     .linkColor(edge => selection === edge ? 'black' : '#999999')
     .linkCurvature('curvature')
     .linkCanvasObjectMode(() => 'after')
@@ -241,6 +248,28 @@ const Graph = ForceGraph()
       context.restore();
     })
     .linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3])
+    .nodeCanvasObject((node, ctx) => {
+      ctx.fillStyle = getColour(node);
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, 2*node.val, 0, 2 * Math.PI, false);
+      ctx.fill();
+
+      ctx.fillStyle = 'white';
+      ctx.font = '4px Sans-Serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      // var label = node.name.substring(0, 5);
+      var label = node.name.split(' '); // [node.name.substring(0, 6), node.name.substring(6, 12), node.name.substring(12, 18)];
+      for (var i = 0; i < label.length; i++) {
+        var isBrace = label[i][0] === '(';
+        label[i] = label[i].substring(isBrace ? 1 : 0, isBrace ? 2 : 1);
+      }
+      // for (var i = 0; i < label.length; i++) {
+      //   ctx.fillText(label[i], node.x, (node.y - 4) + i * 4);
+      // }
+      ctx.fillText(label.join('').substring(0,6), node.x, node.y);
+      
+    })
     .onNodeDragEnd(node => {
       node.fx = node.x;
       node.fy = node.y;