Updated to handle arrow heads differently between noe/classic

cypress/platform/knsv-recursive.html

@@ -120,19 +120,44 @@
       <pre id="diagram4" class="mermaid">
 ---
 config:
-  look: neo
-  theme: redux
+  theme: neo
   layout: dagre
 ---
-flowchart LR
-    A --> B
-</pre
+flowchart TD
+    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
+    n1 --x n4["Rounded"]
+    n2 --o n5["Hexagon"]
+    n3 --> 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
+
+    </pre
       >
       <pre id="diagram4" class="mermaid">
 ---
 config:
-  look: neo
-  theme: redux
+  look: classic
+  theme: forest
   layout: dagre
 ---
 flowchart TD

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 = {

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();

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();

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

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)