diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 997ccdbd73..96cfa67de9 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -425,6 +425,25 @@ exports.draw = function (text, id,isDot) {
         dagreD3.util.applyStyle(path, edge[type + 'Style']);
     };
 
+    // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
+    render.arrows().normal = function normal(parent, id, edge, type) {
+        var marker = parent.append("marker")
+        .attr("id", id)
+        .attr("viewBox", "0 0 10 10")
+        .attr("refX", 9)
+        .attr("refY", 5)
+        .attr("markerUnits", "strokeWidth")
+        .attr("markerWidth", 8)
+        .attr("markerHeight", 6)
+        .attr("orient", "auto")
+
+        var path = marker.append("path")
+        .attr("d", "M 0 0 L 10 5 L 0 10 z")
+        .attr("class", "arrowheadPath")
+        .style("stroke-width", 1)
+        .style("stroke-dasharray", "1,0");
+    };
+
     // Set up an SVG group so that we can translate the final graph.
     var svg = d3.select('#' + id);
     //svgGroup = d3.select('#' + id + ' g');
diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less
index 2457e77a84..a108bbccd6 100644
--- a/src/less/dark/flow.less
+++ b/src/less/dark/flow.less
@@ -9,6 +9,11 @@
   stroke-width: 1px;
 }
 
+
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
 }
diff --git a/src/less/dark/variables.less b/src/less/dark/variables.less
index 0206f8949e..c77932990f 100644
--- a/src/less/dark/variables.less
+++ b/src/less/dark/variables.less
@@ -5,6 +5,7 @@
 @lineColor: @mainContrastColor;
 @border1: #81B1DB;
 @border2: rgba(255, 255, 255, 0.25);
+@arrowheadColor: @mainContrastColor;
 
 
 /* Flowchart variables */
diff --git a/src/less/default/flow.less b/src/less/default/flow.less
index 3d999bd8a8..dcd66c1bac 100644
--- a/src/less/default/flow.less
+++ b/src/less/default/flow.less
@@ -9,6 +9,10 @@
   stroke-width: 1px;
 }
 
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
 }
diff --git a/src/less/default/variables.less b/src/less/default/variables.less
index 0634374ca9..3a69d86d4e 100644
--- a/src/less/default/variables.less
+++ b/src/less/default/variables.less
@@ -3,6 +3,7 @@
 @lineColor: #333333;
 @border1:#CCCCFF;
 @border2:#aaaa33;
+@arrowheadColor: #333333;
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;
diff --git a/src/less/forest/flow.less b/src/less/forest/flow.less
index 47e8de05ff..26ca2dae73 100644
--- a/src/less/forest/flow.less
+++ b/src/less/forest/flow.less
@@ -12,6 +12,10 @@ color:#333
   stroke-width: 1px;
 }
 
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
   stroke-width: 1.5px;
diff --git a/src/less/forest/variables.less b/src/less/forest/variables.less
index 8bfcdceb54..d797c96f4f 100644
--- a/src/less/forest/variables.less
+++ b/src/less/forest/variables.less
@@ -4,6 +4,7 @@
 @lineColor: green;
 @border1: #13540c;
 @border2: #6eaa49;
+@arrowheadColor: green;
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;