#4866, #5255 fix: Fixes bug for links to self for nodes inside a cluster

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -28,7 +28,7 @@ import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js'
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
 const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
-  log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
+  log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
 
@@ -124,7 +124,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           clusterDb.set(node.id, { id: findNonClusterChild(node.id, graph), node });
           // insertCluster(clusters, graph.node(v));
         } else {
-          log.trace('Node - the non recursive path XAX', v, node.id, node);
+          log.warn('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
           await insertNode(nodes, graph.node(v), dir);
         }
       }
@@ -305,12 +305,64 @@ export const render = async (data4Layout, svg) => {
 
   log.debug('Edges:', data4Layout.edges);
   data4Layout.edges.forEach((edge) => {
-    graph.setEdge(edge.start, edge.end, { ...edge }, edge.id);
+    // Handle self-loops
+    if (edge.start === edge.end) {
+      const nodeId = edge.start;
+      const specialId1 = nodeId + '---' + nodeId + '---1';
+      const specialId2 = nodeId + '---' + nodeId + '---2';
+      const node = graph.node(nodeId);
+      graph.setNode(specialId1, {
+        domId: specialId1,
+        id: specialId1,
+        parentId: node.parentId,
+        labelStyle: '',
+        label: '',
+        padding: 0,
+        shape: 'labelRect',
+        // shape: 'rect',
+        style: '',
+        width: 10,
+        height: 10,
+      });
+      graph.setParent(specialId1, node.parentId);
+      graph.setNode(specialId2, {
+        domId: specialId2,
+        id: specialId2,
+        parentId: node.parentId,
+        labelStyle: '',
+        padding: 0,
+        // shape: 'rect',
+        shape: 'labelRect',
+        label: '',
+        style: '',
+        width: 10,
+        height: 10,
+      });
+      graph.setParent(specialId2, node.parentId);
+
+      const edge1 = structuredClone(edge);
+      const edgeMid = structuredClone(edge);
+      const edge2 = structuredClone(edge);
+      edge1.label = '';
+      edge1.arrowTypeEnd = 'none';
+      edge1.id = nodeId + '-cyclic-special-1';
+      edgeMid.arrowTypeEnd = 'none';
+      edgeMid.id = nodeId + '-cyclic-special-mid';
+      edge2.label = '';
+      edge1.fromCluster = nodeId;
+      edge2.toCluster = nodeId;
+      edge2.id = nodeId + '-cyclic-special-2';
+      graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0');
+      graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1');
+      graph.setEdge(specialId2, nodeId, edge2, nodeId + '-cyc<lic-special-2');
+    } else {
+      graph.setEdge(edge.start, edge.end, { ...edge }, edge.id);
+    }
   });
 
   log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
   adjustClustersAndEdges(graph);
-  log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
+  log.warn('Graph after XAX:', JSON.stringify(graphlibJson.write(graph)));
   const siteConfig = getConfig();
   await recursiveRender(
     element,

packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js

@@ -267,51 +267,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
       ' --- ',
       clusterDb.get(e.w)
     );
-    if (clusterDb.get(e.v) && clusterDb.get(e.w) && clusterDb.get(e.v) === clusterDb.get(e.w)) {
+    if (clusterDb.get(e.v) || clusterDb.get(e.w)) {
-      log.warn('Fixing and trying link to self - removing XXX', e.v, e.w, e.name);
-      log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name);
-      v = getAnchorId(e.v);
-      w = getAnchorId(e.w);
-      graph.removeEdge(e.v, e.w, e.name);
-      const specialId1 = e.w + '---' + e.v + '---1';
-      const specialId2 = e.w + '---' + e.v + '---2';
-      graph.setNode(specialId1, {
-        domId: specialId1,
-        id: specialId1,
-        labelStyle: '',
-        label: '',
-        padding: 0,
-        shape: 'labelRect',
-        style: '',
-        width: 10,
-        height: 10,
-      });
-      graph.setNode(specialId2, {
-        domId: specialId2,
-        id: specialId2,
-        labelStyle: '',
-        padding: 0,
-        shape: 'labelRect',
-        style: '',
-        width: 10,
-        height: 10,
-      });
-      const edge1 = structuredClone(edge);
-      const edgeMid = structuredClone(edge);
-      const edge2 = structuredClone(edge);
-      edge1.label = '';
-      edge1.arrowTypeEnd = 'none';
-      edge1.id = e.name + '-cyclic-special-1';
-      edgeMid.arrowTypeEnd = 'none';
-      edgeMid.id = e.name + '-cyclic-special-mid';
-      edge2.label = '';
-      edge1.fromCluster = e.v;
-      edge2.toCluster = e.v;
-      edge2.id = e.name + '-cyclic-special-2';
-      graph.setEdge(v, specialId1, edge1, e.name + '-cyclic-special-0');
-      graph.setEdge(specialId1, specialId2, edgeMid, e.name + '-cyclic-special-1');
-      graph.setEdge(specialId2, w, edge2, e.name + '-cyclic-special-2');
-    } else if (clusterDb.get(e.v) || clusterDb.get(e.w)) {
       log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name);
       v = getAnchorId(e.v);
       w = getAnchorId(e.w);
@@ -334,13 +290,6 @@ export const adjustClustersAndEdges = (graph, depth) => {
   extractor(graph, 0);
 
   log.trace(clusterDb);
-
-  // Remove references to extracted cluster
-  // graph.edges().forEach((edge) => {
-  //   if (isDescendant(edge.v, clusterId) || isDescendant(edge.w, clusterId)) {
-  //     graph.removeEdge(edge);
-  //   }
-  // });
 };
 
 export const extractor = (graph, depth) => {
@@ -441,7 +390,7 @@ export const extractor = (graph, depth) => {
   for (const node of nodes) {
     const data = graph.node(node);
     log.warn(' Now next level', node, data);
-    if (data.clusterNode) {
+    if (data?.clusterNode) {
       extractor(data.graph, depth + 1);
     }
   }