diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 896096ff5..bc624ad0c 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -91,31 +91,29 @@
     <pre id="diagram4" class="mermaid">
 ---
 config:
-  look: neo
+  look: classic
+  theme: forest
+  layout: elk
+---
+flowchart LR
+    A["A"] --> C
+    B("B B B B B") --> C[/"C C C C C"/]
+    C@{ shape: circle }
+    %%C@{ shape: question }
+    %%C@{ shape: stadium }
+    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  look: classic
   layout: elk
 ---
 flowchart LR
     n1["n1"] --- C
-    B("Continue") --> C(("Evaluate"))
+    B("Continue") --> C[/"Evaluate"/]
     C -- One --> D["Option 1"]
     C -- Two --> E["Option 2"]
     C -- Three --> F["fa:fa-car Option 3"]
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-flowchart TB
-  %% swimlane 1 - A E
-  %% swimlane 2 - B
-  %% swimlane 3 - C D
-
- A --> E & B
- B --> C
-
-B@{ shape: cyl, label: 'Cylinder'}
     </pre>
     <pre id="diagram4" class="mermaid2">
 ---
diff --git a/cypress/platform/knsv3.html b/cypress/platform/knsv3.html
index 1d65c2ddf..c9a671e3e 100644
--- a/cypress/platform/knsv3.html
+++ b/cypress/platform/knsv3.html
@@ -1,103 +1,173 @@
-<!doctype html>
-<html lang="en">
+<html>
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mindmap Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
     <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        font-family: 'Arial';
+        /* color: white; */
+        /* font-size: 18px !important; */
       }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      .mermaid svg {
+        /* font-size: 18px !important; */
+
+        /* background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
+        background-size: 20px 20px;
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
+      }
+
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+      pre {
+        width: 100%;
+      }
+      /* tspan {
+              font-size: 6px !important;
+            } */
     </style>
   </head>
 
   <body>
-    <h1>Mindmap diagram demo</h1>
-    <pre class="mermaid">
-        mindmap
-        root
-            child1((Circle))
-                grandchild 1
-                grandchild 2
-            child2(Round rectangle)
-                grandchild 3
-                grandchild 4
-            child3[Square]
-                grandchild 5
-                ::icon(mdi mdi-fire)
-                gc6((grand<br/>child 6))
-                ::icon(mdi mdi-fire)
-                gc7((grand<br/>grand<br/>child 8))
-    </pre>
-
-    <h2>Mindmap with root wrapping text and a shape</h2>
-    <pre class="mermaid">
-        mindmap
-            root[A root with a long text that wraps to keep the node size in check]
-    </pre>
-
+    <div class="flex gap-4">
+      <pre id="diagram4" class="mermaid">
+---
+config:
+  look: classic
+  theme: forest
+  layout: elk
+---
+flowchart LR
+    n1["n1"] --> C
+    n2("n2") --> C
+    C@{ shape: circle }
+    </pre
+      >
+      <pre id="diagram4" class="mermaid">
+---
+config:
+  look: neo
+  theme: redux
+  layout: elk
+---
+flowchart LR
+    n1["n1"] --> C
+    n2("n2") --> C
+    C@{ shape: circle }
+    </pre
+      >
+      <pre id="diagram4" class="mermaid">
+---
+config:
+  look: handDrawn
+  theme: forest
+  layout: elk
+---
+flowchart LR
+    n1["n1"] --> C
+    n2("n2") --> C
+    C@{ shape: circle }
+    </pre
+      >
+    </div>
     <script type="module">
-      // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
-      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
 
-      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
-      // await mermaid.registerExternalDiagrams([mermaidMindmap]);
+      const staticBellIconPack = {
+        prefix: 'fa6-regular',
+        icons: {
+          bell: {
+            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
+            width: 448,
+          },
+        },
+        width: 512,
+        height: 512,
+      };
 
-      const ALLOWED_TAGS = [
-        'a',
-        'b',
-        'blockquote',
-        'br',
-        'dd',
-        'div',
-        'dl',
-        'dt',
-        'em',
-        'foreignObject',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'h8',
-        'hr',
-        'i',
-        'li',
-        'ul',
-        'ol',
-        'p',
-        'pre',
-        'span',
-        'strike',
-        'strong',
-        'table',
-        'tbody',
-        'td',
-        'tfoot',
-        'th',
-        'thead',
-        'tr',
-      ];
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () => staticBellIconPack,
+        },
+      ]);
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
       };
       mermaid.initialize({
-        theme: 'base',
-        startOnLoad: true,
+        flowchart: { titleTopMargin: 10, useMaxWidth: false },
+        fontSize: 12,
         logLevel: 0,
-        flowchart: {
-          useMaxWidth: false,
-          htmlLabels: true,
-        },
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        securityLevel: 'loose',
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 99bcaf7aa..cc373f700 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -68,19 +68,25 @@ export const render = async (
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      const child: NodeWithVertex = {
-        ...node,
-      };
-      graph.children.push(child);
-      nodeDb[node.id] = child;
+      // const child: NodeWithVertex = {
+      //   ...node,
+      // };
+      graph.children.push(node);
+      nodeDb[node.id] = node;
 
       const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
       const boundingBox = childNodeEl.node()!.getBBox();
-      child.domId = childNodeEl;
-      child.calcIntersect = node.calcIntersect;
-      child.intersect = node.intersect;
-      child.width = boundingBox.width;
-      child.height = boundingBox.height;
+      node.domId = childNodeEl;
+      node.width = boundingBox.width;
+      node.height = boundingBox.height;
+      // child.calcIntersect = node.calcIntersect;
+      // child.intersect = node.intersect;
+      // child.width = boundingBox.width;
+      // child.height = boundingBox.height;
+      // child.updateIntersect = node.updateIntersect;
+      // if (child.updateIntersect) {
+      //   child.updateIntersect();
+      // }
     } else {
       // A subgraph
       const child: NodeWithVertex & { children: NodeWithVertex[] } = {
@@ -820,7 +826,7 @@ export const render = async (
       'spacing.nodeNode': 20,
       'spacing.nodeNodeBetweenLayers': 25,
       'spacing.edgeNode': 20,
-      'spacing.edgeNodeBetweenLayers': 10,
+      'spacing.edgeNodeBetweenLayers': 20,
       'spacing.edgeEdge': 10,
       'spacing.edgeEdgeBetweenLayers': 20,
       'spacing.nodeSelfLoop': 20,
@@ -845,7 +851,7 @@ export const render = async (
       // 'elk.layered.considerModelOrder.strategy': 'PREFER_NODES',
       // 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
       // 'elk.layered.wrapping.cutting.strategy': 'NODES_AND_EDGES',
-      'elk.alignment': 'BOTTOM',
+      // 'elk.alignment': 'BOTTOM',
       // 'elk.layered.nodePlacement.bk.fixedAlignment': 'RIGHTDOWN',
       // 'elk.edgeRouting': 'UNDEFINED',
       'elk.layered.crossingMinimization.forceNodeModelOrder': false,
@@ -1046,12 +1052,14 @@ export const render = async (
           const intersection = startNode.intersect(edge.points[0]);
 
           if (distance(intersection2, edge.points[0]) > epsilon) {
+            // intersection.x = -startNode.offset.posX + intersection.x + startNode.width / 2;
+            // intersection.y = intersection.y + startNode.height / 2 + 5;
             edge.points.unshift(intersection2);
           }
         }
         if (endNode.intersect) {
           // Remove the last point of the edge points
-          edge.points.pop();
+          // edge.points.pop();
           const intersection2 = endNode.calcIntersect(
             {
               x: endNode.offset.posX + endNode.width / 2,
@@ -1073,9 +1081,27 @@ export const render = async (
           console.log('APA13 intersection2.2', intersection, intersection2);
 
           if (distance(intersection2, edge.points[edge.points.length - 1]) > epsilon) {
-            // console.log('APA13! distance ok\nintersection:', intersection);
+            console.log(
+              'APA13! distance ok\nintersection:',
+              intersection,
+              '\nstartNode:',
+              startNode.id,
+              '\nendNode:',
+              endNode.id,
+              '\n distance',
+              distance(intersection2, edge.points[edge.points.length - 1])
+            );
             edge.points.push(intersection2);
             // console.log('APA13! distance ok\npoints:', edge.points);
+          } else {
+            console.log(
+              'APA13! distance not ok\nintersection:',
+              intersection,
+              '\nstartNode:',
+              startNode.id,
+              '\nendNode:',
+              endNode.id
+            );
           }
         }
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 4865d553b..2bbf68e0f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -15,6 +15,13 @@ import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
 import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
 
+function distance(p1, p2) {
+  if (!p1 || !p2) {
+    return 0;
+  }
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+
 const edgeLabels = new Map();
 const terminalLabels = new Map();
 
@@ -370,7 +377,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
     }
     edgeClassStyles.push(edge.cssCompiledStyles[key]);
   }
-  console.log('APA13 edge.trim', edge.trim);
   if (head.intersect && tail.intersect && edge.trim) {
     points = points.slice(1, edge.points.length - 1);
     points.unshift(tail.intersect(points[0]));
@@ -405,6 +411,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
 
   let lineData = points.filter((p) => !Number.isNaN(p.y));
+  console.log('APA13 lineData ', lineData);
   //lineData = fixCorners(lineData);
   let curve = curveBasis;
   curve = curveLinear;
@@ -460,7 +467,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   let svgPath;
   let linePath =
     edge.curve === 'rounded'
-      ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
+      ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 3)
       : lineFunction(lineData);
   const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
   let animatedEdge = false;
@@ -590,6 +597,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
  * @returns {String} - SVG path data string
  */
 function generateRoundedPath(points, radius) {
+  console.log('APA13 points', points);
   if (points.length < 2) {
     return '';
   }
@@ -597,7 +605,7 @@ function generateRoundedPath(points, radius) {
   let path = '';
   const size = points.length;
   const epsilon = 1e-5;
-
+  const lastPoint = points[size - 1];
   for (let i = 0; i < size; i++) {
     const currPoint = points[i];
     const prevPoint = points[i - 1];
@@ -639,6 +647,10 @@ function generateRoundedPath(points, radius) {
 
       // Skip rounding if the angle is too small or too close to 180 degrees
       if (angle < epsilon || Math.abs(Math.PI - angle) < epsilon) {
+        console.log(
+          'APA13 Skip rounding if the angle is too small',
+          `L${currPoint.x},${currPoint.y}`
+        );
         path += `L${currPoint.x},${currPoint.y}`;
         continue;
       }
@@ -652,11 +664,21 @@ function generateRoundedPath(points, radius) {
       const endX = currPoint.x + nx2 * cutLen;
       const endY = currPoint.y + ny2 * cutLen;
 
-      // Draw the line to the start of the curve
-      path += `L${startX},${startY}`;
+      const d = distance(currPoint, lastPoint);
+      if (d > 3) {
+        // Draw the line to the start of the curve
+        path += `L${startX},${startY}`;
 
-      // Draw the quadratic Bezier curve
-      path += `Q${currPoint.x},${currPoint.y} ${endX},${endY}`;
+        // Draw the quadratic Bezier curve
+        path += `Q${currPoint.x},${currPoint.y} ${endX},${endY}`;
+      } else {
+        // // Draw the line to the start of the curve
+        // path += `L${startX},${startY}`;
+        // path += `Q${currPoint.x},${currPoint.y} ${currPoint.x},${currPoint.y}`;
+        // Draw the line to the start of the curve
+        // path += `L${startX},${startY}`;
+        path += `L${lastPoint.x},${lastPoint.y}`;
+      }
     }
   }
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
index 5d81b9d9e..e19df5123 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -54,6 +54,12 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
     log.info('Circle intersect', node, radius, point);
     return intersect.circle(node, radius, point);
   };
+  node.updateIntersect = function () {
+    node.intersect = function (point) {
+      log.info('Circle intersect', node, radius, point);
+      return intersect.circle(node, radius, point);
+    };
+  };
 
   return shapeSvg;
 }
