diff --git a/cypress/platform/knsv-recursive.html b/cypress/platform/knsv-recursive.html
index 636f231cf..060d81e27 100644
--- a/cypress/platform/knsv-recursive.html
+++ b/cypress/platform/knsv-recursive.html
@@ -120,19 +120,44 @@
---
config:
- look: neo
- theme: redux
+ theme: neo
layout: dagre
---
-flowchart LR
- A --> B
-
n6["Parallelogram"]
+ n5 o--o n7["Trapezoid"]
+ n4 x--x n8["Lean Right"]
+ n6 <--> n9(("Circle"))
+ n8 --> n10["Rose"]
+ n7 --> n11["Pine"]
+ n9 --> n12["Peach"]
+ n2@{ shape: rounded}
+ 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
+
+
---
config:
- look: neo
- theme: redux
+ look: classic
+ theme: forest
layout: dagre
---
flowchart TD
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 26d720fad..3817d15fb 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -781,7 +781,13 @@ export const render = async (
const elk = new ELK();
const element = svg.select('g');
// Add the arrowheads to the svg
- insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
+ insertMarkers(
+ element,
+ data4Layout.markers,
+ data4Layout.type,
+ data4Layout.diagramId,
+ data4Layout.config
+ );
// Setup the graph with the layout options and the data for the layout
let elkGraph: any = {
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index c117fe6c2..6be8ba9c3 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -290,7 +290,13 @@ export const render = async (data4Layout, svg) => {
return {};
});
const element = svg.select('g');
- insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
+ insertMarkers(
+ element,
+ data4Layout.markers,
+ data4Layout.type,
+ data4Layout.diagramId,
+ data4Layout.config
+ );
clearNodes();
clearEdges();
clearClusters();
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
index 40296a64f..169e96046 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
@@ -370,7 +370,13 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
export const render = async (data4Layout, svg, _internalHelpers, _algorithm, positions) => {
const element = svg.select('g');
// Org
- insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
+ insertMarkers(
+ element,
+ data4Layout.markers,
+ data4Layout.type,
+ data4Layout.diagramId,
+ data4Layout.config
+ );
clearNodes();
clearEdges();
clearClusters();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index ed61657dc..6df1b5ee6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -566,21 +566,13 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
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);
+ if (edge.look === 'neo') {
+ const dashArray = `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
- // 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'));
+ // 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
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index 797746d0d..98d918660 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -2,9 +2,9 @@
import { log } from '../../logger.js';
// Only add the number of markers that the diagram needs
-const insertMarkers = (elem, markerArray, type, id) => {
+const insertMarkers = (elem, markerArray, type, id, config) => {
markerArray.forEach((markerName) => {
- markers[markerName](elem, type, id);
+ markers[markerName](elem, type, id, config);
});
};
@@ -153,13 +153,13 @@ const lollipop = (elem, type, id) => {
.attr('cy', 7)
.attr('r', 6);
};
-const point = (elem, type, id) => {
+const point = (elem, type, id, options) => {
elem
.append('marker')
.attr('id', id + '_' + type + '-pointEnd')
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 11.5 14')
- .attr('refX', 11.5) // Adjust to position the arrowhead relative to the line
+ .attr('refX', options?.look === 'neo' ? 11.5 : 7.75) // Adjust to position the arrowhead relative to the line
.attr('refY', 7) // Half of 14 for vertical center
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 10.5)
@@ -175,7 +175,7 @@ const point = (elem, type, id) => {
.attr('id', id + '_' + type + '-pointStart')
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 11.5 14')
- .attr('refX', 1)
+ .attr('refX', options?.look === 'neo' ? 1 : 4)
.attr('refY', 7)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 11.5)
@@ -187,14 +187,14 @@ const point = (elem, type, id) => {
.style('stroke-width', 0)
.style('stroke-dasharray', '1,0');
};
-const circle = (elem, type, id) => {
+const circle = (elem, type, id, options) => {
elem
.append('marker')
.attr('id', id + '_' + type + '-circleEnd')
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10')
- .attr('refX', 12)
- .attr('refY', 4.95) // What!!!??
+ .attr('refY', 5) // What!!!??
+ .attr('refX', options?.look === 'neo' ? 12.25 : 10.75)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 14)
.attr('markerHeight', 14)
@@ -212,7 +212,7 @@ const circle = (elem, type, id) => {
.attr('id', id + '_' + type + '-circleStart')
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10')
- .attr('refX', -2)
+ .attr('refX', options?.look === 'neo' ? -2 : 0)
.attr('refY', 5)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 14)