diff --git a/editor.js b/editor.js
index 0330a2b..3beeb7d 100644
--- a/editor.js
+++ b/editor.js
@@ -341,6 +341,26 @@ function getEdgeColour(edge) {
   }
 }
 
+//Compute abbreviations of the names of all states
+var stateAbbreviations = [];
+workflow.states.forEach(state => {
+  // var label = node.name.substring(0, 5);
+  var label = state.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++) {
+    if (label[i] === '(') continue; // if the state name contains whitespace after the brace
+    var isBrace = label[i][0] === '(';
+    label[i] = label[i].substring(isBrace ? 1 : 0, isBrace ? 2 : 1);
+  }
+  labelString = label.join('').substring(0,6);
+  var counter = 1;
+  var len = labelString.length;
+  while (stateAbbreviations.includes(labelString)) {
+    labelString = labelString.substring(0,len) + "'" + counter++;
+  }
+  stateAbbreviations.push(labelString);
+  state.stateData.abbreviation = labelString;
+});
+
 const Graph = ForceGraph()
   (document.getElementById('graph'))
     .linkDirectionalArrowLength(6)
@@ -444,17 +464,7 @@ const Graph = ForceGraph()
       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);
-      
+      ctx.fillText(node.stateData.abbreviation, node.x, node.y);      
     })
     .onNodeDragEnd(node => {
       node.fx = node.x;