From 0bf4aa3e82b646714e3d97b406eb3ac4a1d485ad Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 20 Dec 2024 15:28:08 +0100
Subject: [PATCH] Fix for arrow point

---
 cypress/platform/knsv-recursive.html          |  2 +-
 .../rendering-elements/markers.js             | 30 +++++++++----------
 packages/mermaid/src/utils/lineWithOffset.ts  |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/cypress/platform/knsv-recursive.html b/cypress/platform/knsv-recursive.html
index 486fe8c67..f3fe4a5b5 100644
--- a/cypress/platform/knsv-recursive.html
+++ b/cypress/platform/knsv-recursive.html
@@ -128,7 +128,7 @@ flowchart LR
     A --> B
 </pre
       >
-      <pre id="diagram4" class="mermaid2">
+      <pre id="diagram4" class="mermaid">
 ---
 config:
   look: neo
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index a377ebb14..bb099a698 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -158,33 +158,33 @@ const point = (elem, type, id) => {
     .append('marker')
     .attr('id', id + '_' + type + '-pointEnd')
     .attr('class', 'marker ' + type)
-    .attr('viewBox', '0 0 10 10')
-    .attr('refX', 5)
-    .attr('refY', 5)
+    .attr('viewBox', '0 0 11.5 14')
+    .attr('refX', 11.5) // Adjust to position the arrowhead relative to the line
+    .attr('refY', 7) // Half of 14 for vertical center
     .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 8)
-    .attr('markerHeight', 8)
+    .attr('markerWidth', 11.5)
+    .attr('markerHeight', 14)
     .attr('orient', 'auto')
     .append('path')
-    .attr('d', 'M 0 0 L 10 5 L 0 10 z')
+    .attr('d', 'M 0 0 L 11.5 7 L 0 14 z')
     .attr('class', 'arrowMarkerPath')
-    .style('stroke-width', 1)
+    .style('stroke-width', 0)
     .style('stroke-dasharray', '1,0');
   elem
     .append('marker')
     .attr('id', id + '_' + type + '-pointStart')
     .attr('class', 'marker ' + type)
-    .attr('viewBox', '0 0 10 10')
-    .attr('refX', 4.5)
-    .attr('refY', 5)
+    .attr('viewBox', '0 0 11.5 14')
+    .attr('refX', 0)
+    .attr('refY', 7)
     .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 8)
-    .attr('markerHeight', 8)
+    .attr('markerWidth', 11.5)
+    .attr('markerHeight', 14)
     .attr('orient', 'auto')
-    .append('path')
-    .attr('d', 'M 0 5 L 10 10 L 10 0 z')
+    .append('polygon')
+    .attr('points', '0,7 11.5,14 11.5,0')
     .attr('class', 'arrowMarkerPath')
-    .style('stroke-width', 1)
+    .style('stroke-width', 0)
     .style('stroke-dasharray', '1,0');
 };
 const circle = (elem, type, id) => {
diff --git a/packages/mermaid/src/utils/lineWithOffset.ts b/packages/mermaid/src/utils/lineWithOffset.ts
index 81c2fb94b..3cd8e2741 100644
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -22,7 +22,7 @@ export const markerOffsets2 = {
   composition: 18,
   dependency: 6,
   lollipop: 13.5,
-  arrow_point: 4,
+  arrow_point: 8,
   arrow_cross: 12.5,
 } as const;