diff --git a/implementation/library-d3-svg/js/GraphDrawer.js b/implementation/library-d3-svg/js/GraphDrawer.js
index 24eb920..147c7ff 100644
--- a/implementation/library-d3-svg/js/GraphDrawer.js
+++ b/implementation/library-d3-svg/js/GraphDrawer.js
@@ -118,6 +118,33 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
 
+     /* Add the arrowhead markers for directed edges in the SVG images */   
+     var defs = svgOrigin
+        .attr("id","graph-defs")
+        .append("defs");
+
+     defs.append("marker")
+        .attr("id", "arrowhead2")
+        .attr("refX",24) /*must be smarter way to calculate shift*/
+        .attr("refY",4)
+        .attr("markerUnits","userSpaceOnUse")
+        .attr("markerWidth", 24) 
+        .attr("markerHeight", 8)
+        .attr("orient", "auto")
+        .append("path")
+        .attr("d", "M 0,0 V 8 L12,4 Z"); //this is actual shape for arrowhead
+
+     defs.append("marker")
+        .attr("id", "arrowhead3")
+        .attr("refX",24) /*must be smarter way to calculate shift*/
+        .attr("refY",4)
+        .attr("markerUnits","userSpaceOnUse")
+        .attr("markerWidth", 24) 
+        .attr("markerHeight", 8)
+        .attr("orient", "auto-start-reverse")
+        .append("path")
+        .attr("d", "M 0,0 V 8 L12,4 Z"); //this is actual shape for arrowhead
+    
     var svg = svgOrigin.append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
@@ -422,4 +449,4 @@ GraphDrawer.prototype.nodePos = function(d){
     obj.x = this.x(this.nodeX(d));
     obj.y = this.y(this.nodeY(d));
     return obj;
-}
\ No newline at end of file
+}