diff --git a/static/diagram.js b/static/diagram.js
index c17908e..5c0ddcc 100644
--- a/static/diagram.js
+++ b/static/diagram.js
@@ -1,8 +1,9 @@
 var DiagramNode = /** @class */ (function () {
-    function DiagramNode(x, y, width, height, label) {
+    function DiagramNode(id, x, y, width, height, label) {
         this.hover = false;
         this.inputHover = false;
         this.outputHover = false;
+        this.id = id;
         this.x = x;
         this.y = y;
         this.width = width;
@@ -234,10 +235,10 @@ var Diagrams = /** @class */ (function () {
             this.ctx.fill();
         }
     };
-    Diagrams.prototype.addNode = function (x, y, label) {
+    Diagrams.prototype.addNode = function (id, x, y, label) {
         var textSize = this.ctx.measureText(label);
         var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
-        this.nodes.push(new DiagramNode(x, y, textSize.width + textHeight, textHeight, label));
+        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
     };
     Diagrams.prototype.addConnection = function (A, B) {
         this.connections.push([A, B]);
diff --git a/static/diagram.ts b/static/diagram.ts
index 7e19ac9..c5cf761 100644
--- a/static/diagram.ts
+++ b/static/diagram.ts
@@ -1,4 +1,5 @@
 class DiagramNode {
+    id: number;
     x: number;
     y: number;
     label: string;
@@ -13,12 +14,14 @@ class DiagramNode {
     children: Array<DiagramNode>;
 
     constructor(
+        id: number;
         x: number, 
         y: number, 
         width: number,
         height: number,
         label: string,
     ){
+        this.id = id;
         this.x = x;
         this.y = y;
         this.width = width;
@@ -278,10 +281,10 @@ class Diagrams {
         }
     }
 
-    addNode(x: number, y: number, label: string){
+    addNode(id: number, x: number, y: number, label: string){
         let textSize = this.ctx.measureText(label);
         let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
-        this.nodes.push(new DiagramNode(x, y, textSize.width + textHeight, textHeight, label));
+        this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
     }
 
     addConnection(A: DiagramNode, B: DiagramNode){
diff --git a/templates/diagrams.html b/templates/diagrams.html
index d6f1bf5..bd4f80a 100644
--- a/templates/diagrams.html
+++ b/templates/diagrams.html
@@ -14,9 +14,9 @@
 var diagrams;
 function canvasInit() {
     diagrams = new Diagrams("canvas");
-    diagrams.addNode(100, 100, "Test");
-    diagrams.addNode(300, 300, "Test2");
-    diagrams.addNode(500, 500, "A much longer name");
+    diagrams.addNode(1, 100, 100, "Test");
+    diagrams.addNode(2, 300, 300, "Test2");
+    diagrams.addNode(3, 500, 500, "A much longer name");
     diagrams.fillParent();
 }
 document.addEventListener('DOMContentLoaded', canvasInit, false);