diff --git a/src/app/demo_page/demo_datasets/edge_marker_styles.ts b/src/app/demo_page/demo_datasets/edge_marker_styles.ts
index 35c4b47..40992cc 100644
--- a/src/app/demo_page/demo_datasets/edge_marker_styles.ts
+++ b/src/app/demo_page/demo_datasets/edge_marker_styles.ts
@@ -50,7 +50,6 @@ export const fakeGraph: GraphSkeleton = {
       type: 'execution',
       next: [{
         edgeOpts: {
-          // NOTE: fromMarkerStyle = 'arrow' is the same as 'circle'.
           fromMarkerStyle: 'arrow',
           toMarkerStyle: 'arrow',
         },
diff --git a/src/app/demo_page/scuba_goldens/demo_page/chrome-linux/edge-marker-styles.png b/src/app/demo_page/scuba_goldens/demo_page/chrome-linux/edge-marker-styles.png
index c37d19c..0af11be 100644
Binary files a/src/app/demo_page/scuba_goldens/demo_page/chrome-linux/edge-marker-styles.png and b/src/app/demo_page/scuba_goldens/demo_page/chrome-linux/edge-marker-styles.png differ
diff --git a/src/app/directed_acyclic_graph_raw.ng.html b/src/app/directed_acyclic_graph_raw.ng.html
index d8ae2d9..499402b 100644
--- a/src/app/directed_acyclic_graph_raw.ng.html
+++ b/src/app/directed_acyclic_graph_raw.ng.html
@@ -39,11 +39,31 @@
             />
           </marker>
         </defs>
+        <defs *ngIf="getEdgeWidth(e, false) as eWidth">
+          <marker
+            [attr.id]="getFromArrowMarkerId(e)"
+            viewBox="0 0 10 10"
+            refX="10"
+            refY="5"
+            [attr.markerWidth]="eWidth + 7"
+            [attr.markerHeight]="eWidth + 7"
+            markerUnits="userSpaceOnUse"
+            orient="auto-start-reverse"
+          >
+            <path
+                class="arrow"
+                d="M 0 1 L 10 5 L 0 9 z"
+                [attr.stroke]="getEdgeColor(e) || '#9ba1a7'"
+                [attr.fill]="getEdgeColor(e) || '#9ba1a7'"
+            />
+          </marker>
+        </defs>
         <path
           class="line"
           [attr.d]="buildPath(e)"
           [attr.stroke]="getEdgeColor(e)"
           [attr.stroke-width]="getEdgeWidth(e)"
+          [attr.marker-start]="getEdgeMarkerStartId(e)"
           [attr.marker-end]="getEdgeMarkerEndId(e)"
         />
       </g>
@@ -71,7 +91,7 @@
     <ng-container *ngFor="let e of edges; trackBy: edgeTrack">
       <g *ngIf="isDagreInit(e)" class="marker-group fade-in">
         <g
-          *ngIf="(e.fromMarkerStyle || theme.edgeFromMarkerStyle) !== 'hidden'"
+          *ngIf="(e.fromMarkerStyle || theme.edgeFromMarkerStyle) === 'circle'"
           [ngClass]="edgeMarkerClassesFor(e, 'from')">
           <circle
             r="4"
diff --git a/src/app/directed_acyclic_graph_raw.ts b/src/app/directed_acyclic_graph_raw.ts
index 37600f6..63f624a 100644
--- a/src/app/directed_acyclic_graph_raw.ts
+++ b/src/app/directed_acyclic_graph_raw.ts
@@ -953,6 +953,21 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     return `url(#${this.getArrowMarkerId(edge)})`;
   }
 
+  getFromArrowMarkerId(edge: DagEdge|undefined): string {
+    if (!edge || !edge.points) return '';
+    const [from, to] = [edge.from, edge.to].map(s => s.replace(/[^\w]/g, '-'));
+    return `${this.path.join('-')}_arrow_${to}_${from}`;
+  }
+
+  getEdgeMarkerStartId(edge: DagEdge|undefined): string|undefined {
+    const markerStyle = edge?.fromMarkerStyle || this.theme.edgeFromMarkerStyle;
+    if (!edge || !edge.points || markerStyle === 'circle' ||
+        markerStyle === 'hidden') {
+      return undefined;
+    }
+    return `url(#${this.getFromArrowMarkerId(edge)})`;
+  }
+
   getControlPointsForBezierCurve(start: Point, end: Point): Point[] {
     if (this.layout.rankDirection === 'LR' ||
         this.layout.rankDirection === 'RL') {
diff --git a/src/app/node_spec.ts b/src/app/node_spec.ts
index 11ba83a..355ad2d 100644
--- a/src/app/node_spec.ts
+++ b/src/app/node_spec.ts
@@ -431,6 +431,8 @@ export interface DagEdge {
    * this edge
    */
   weight?: number;
+  /** The number of ranks to keep between the source and target of the edge. */
+  minlen?: number;
 }
 
 /**