diff --git a/cypress/platform/knsv-recursive.html b/cypress/platform/knsv-recursive.html
index ee98c9651..486fe8c67 100644
--- a/cypress/platform/knsv-recursive.html
+++ b/cypress/platform/knsv-recursive.html
@@ -124,9 +124,20 @@ config:
theme: redux
layout: dagre
---
+flowchart LR
+ A --> B
+
+
+---
+config:
+ look: neo
+ theme: redux
+ layout: elk
+---
flowchart TD
- A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
- n1 --x n4["Diamond"]
+ A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
+ n1 --x n4["Rounded"]
n2 --o n5["Hexagon"]
n3 --> n6["Parallelogram"]
n5 o--o n7["Trapezoid"]
@@ -136,18 +147,21 @@ flowchart TD
n7 --> n11["Pine"]
n9 --> n12["Peach"]
n2@{ shape: rounded}
- n4@{ shape: diam}
+ n4@{ shape: rounded}
n5@{ shape: hex}
n6@{ shape: lean-l}
n7@{ shape: trap-b}
n8@{ shape: lean-r}
+
n10:::Rose
n11:::Pine
n12:::Peach
classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-
+ n10 --x End
+ n11 --x End
+ n12 --x End
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 0954a172d..ed61657dc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -3,7 +3,11 @@ import { evaluate } from '../../diagrams/common/common.js';
import { log } from '../../logger.js';
import { createText } from '../createText.js';
import utils from '../../utils.js';
-import { getLineFunctionsWithOffset, markerOffsets } from '../../utils/lineWithOffset.js';
+import {
+ getLineFunctionsWithOffset,
+ markerOffsets,
+ markerOffsets2,
+} from '../../utils/lineWithOffset.js';
import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
import { curveBasis, curveLinear, curveCardinal, line, select } from 'd3';
import rough from 'roughjs';
@@ -558,6 +562,25 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
.attr('id', edge.id)
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
+ const len = svgPath.node().getTotalLength();
+ const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;
+ const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;
+
+ // const mOffset = `stroke-dasharray: ${len} ${oValueS + oValueE};stroke-dashoffset: ${oValueS + oValueE}; `;
+ // console.log('APA23 edge', edge, oValueS, oValueE, mOffset);
+
+ // svgPath.attr('style', mOffset + svgPath.attr('style'));
+
+ // const dashArray = `${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
+
+ // const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 14; `;
+
+ // #3
+ const dashArray = `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
+
+ // No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.
+ const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;
+ svgPath.attr('style', mOffset + svgPath.attr('style'));
}
// MC Special
@@ -565,6 +588,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
svgPath.attr('data-et', 'edge');
svgPath.attr('data-id', edge.id);
svgPath.attr('data-points', pointsStr);
+
// DEBUG code, adds a red circle at each edge coordinate
// cornerPoints.forEach((point) => {
// elem
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index f9777755c..a377ebb14 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -231,36 +231,33 @@ const cross = (elem, type, id) => {
.append('marker')
.attr('id', id + '_' + type + '-crossEnd')
.attr('class', 'marker cross ' + type)
- .attr('viewBox', '0 0 11 11')
- .attr('refX', 12)
- .attr('refY', 5.2)
+ .attr('viewBox', '0 0 15 15')
+ .attr('refX', 17.7)
+ .attr('refY', 7.5)
.attr('markerUnits', 'userSpaceOnUse')
- .attr('markerWidth', 11)
- .attr('markerHeight', 11)
+ .attr('markerWidth', 12)
+ .attr('markerHeight', 12)
.attr('orient', 'auto')
.append('path')
- // .attr('stroke', 'black')
- .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
+ .attr('d', 'M 1,1 L 14,14 M 1,14 L 14,1')
.attr('class', 'arrowMarkerPath')
- .style('stroke-width', 2)
- .style('stroke-dasharray', '1,0');
+ .style('stroke-width', 2.5);
elem
.append('marker')
.attr('id', id + '_' + type + '-crossStart')
.attr('class', 'marker cross ' + type)
- .attr('viewBox', '0 0 11 11')
- .attr('refX', -1)
- .attr('refY', 5.2)
+ .attr('viewBox', '0 0 15 15')
+ .attr('refX', -3.5)
+ .attr('refY', 7.5)
.attr('markerUnits', 'userSpaceOnUse')
- .attr('markerWidth', 11)
- .attr('markerHeight', 11)
+ .attr('markerWidth', 12)
+ .attr('markerHeight', 12)
.attr('orient', 'auto')
.append('path')
- // .attr('stroke', 'black')
- .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
+ .attr('d', 'M 1,1 L 14,14 M 1,14 L 14,1')
.attr('class', 'arrowMarkerPath')
- .style('stroke-width', 2)
+ .style('stroke-width', 2.5)
.style('stroke-dasharray', '1,0');
};
const barb = (elem, type, id) => {
diff --git a/packages/mermaid/src/utils/lineWithOffset.ts b/packages/mermaid/src/utils/lineWithOffset.ts
index cefa05f3c..81c2fb94b 100644
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -10,6 +10,20 @@ export const markerOffsets = {
dependency: 6,
lollipop: 13.5,
arrow_point: 4,
+ //arrow_cross: 24,
+} as const;
+
+// We need to draw the lines a bit shorter to avoid drawing
+// under any transparent markers.
+// The offsets are calculated from the markers' dimensions.
+export const markerOffsets2 = {
+ aggregation: 18,
+ extension: 18,
+ composition: 18,
+ dependency: 6,
+ lollipop: 13.5,
+ arrow_point: 4,
+ arrow_cross: 12.5,
} as const;
/**