#5237 Fix for async rendering of clusters

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

@@ -193,90 +193,92 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
   log.info('Need the size here XAX', graph.node('T1')?.height);
   let { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   subGraphTitleTotalMargin = 0;
-  sortNodesByHierarchy(graph).forEach(function (v) {
+  await Promise.all(
-    const node = graph.node(v);
+    sortNodesByHierarchy(graph).map(async function (v) {
-    const p = graph.node(node?.parentId);
+      const node = graph.node(v);
-    subGraphTitleTotalMargin = p?.offsetY || subGraphTitleTotalMargin;
+      const p = graph.node(node?.parentId);
-
+      subGraphTitleTotalMargin = p?.offsetY || subGraphTitleTotalMargin;
-    log.info(
-      'Position XBX => ' + v + ': (' + node.x,
-      ',' + node.y,
-      ') width: ',
-      node.width,
-      ' height: ',
-      node.height
-    );
-    if (node && node.clusterNode) {
-      const parentId = graph.parent(v);
-      // Adjust for padding when on root level
-      node.y = parentId ? node.y - 8 : node.y - 8;
-      node.x -= 8;
 
       log.info(
-        'A tainted cluster node XBX1',
+        'Position XBX => ' + v + ': (' + node.x,
-        v,
+        ',' + node.y,
-        node.id,
+        ') width: ',
         node.width,
-        node.height,
+        ' height: ',
-        node.x,
+        node.height
-        node.y,
-        graph.parent(v)
       );
-      clusterDb[node.id].node = node;
+      if (node && node.clusterNode) {
-      // node.y += subGraphTitleTotalMargin - 10;
+        const parentId = graph.parent(v);
-      node.y -= (node.offsetY || 0) / 2;
+        // Adjust for padding when on root level
-      // node.y -= 10;
+        node.y = parentId ? node.y - 8 : node.y - 8;
-      positionNode(node);
+        node.x -= 8;
-    } else {
+
-      // A tainted cluster node
-      if (graph.children(v).length > 0) {
         log.info(
-          'A pure cluster node XBX1',
+          'A tainted cluster node XBX1',
           v,
           node.id,
-          node.x,
-          node.y,
           node.width,
           node.height,
+          node.x,
+          node.y,
           graph.parent(v)
         );
-        node.height += 0;
-        graph.node(node.parentId);
-        const halfPadding = node?.padding / 2 || 0;
-        const labelHeight = node?.labelBBox?.height || 0;
-        const offsetY = labelHeight - halfPadding || 0;
-        log.debug('OffsetY', offsetY, 'labelHeight', labelHeight, 'halfPadding', halfPadding);
-        // node.y += offsetY + (parent?.offsetY / 2 || 0);
-        // node.offsetY = offsetY;
-        insertCluster(clusters, node);
-
-        // A cluster in the non-recursive way
         clusterDb[node.id].node = node;
-      } else {
+        // node.y += subGraphTitleTotalMargin - 10;
-        // Regular node
+        node.y -= (node.offsetY || 0) / 2;
-        const parent = graph.node(node.parentId);
+        // node.y -= 10;
-        node.y += (parent?.offsetY || 0) / 2;
-        log.info(
-          'A regular node XBX1 - using the padding',
-          node.id,
-          'parent',
-          node.parentId,
-          node.width,
-          node.height,
-          node.x,
-          node.y,
-          'offsetY',
-          node.offsetY,
-          'parent',
-          parent,
-          parent?.offsetY,
-          node
-        );
-
         positionNode(node);
+      } else {
+        // A tainted cluster node
+        if (graph.children(v).length > 0) {
+          log.info(
+            'A pure cluster node XBX1',
+            v,
+            node.id,
+            node.x,
+            node.y,
+            node.width,
+            node.height,
+            graph.parent(v)
+          );
+          node.height += 0;
+          graph.node(node.parentId);
+          const halfPadding = node?.padding / 2 || 0;
+          const labelHeight = node?.labelBBox?.height || 0;
+          const offsetY = labelHeight - halfPadding || 0;
+          log.debug('OffsetY', offsetY, 'labelHeight', labelHeight, 'halfPadding', halfPadding);
+          // node.y += offsetY + (parent?.offsetY / 2 || 0);
+          // node.offsetY = offsetY;
+          await insertCluster(clusters, node);
+
+          // A cluster in the non-recursive way
+          clusterDb[node.id].node = node;
+        } else {
+          // Regular node
+          const parent = graph.node(node.parentId);
+          node.y += (parent?.offsetY || 0) / 2;
+          log.info(
+            'A regular node XBX1 - using the padding',
+            node.id,
+            'parent',
+            node.parentId,
+            node.width,
+            node.height,
+            node.x,
+            node.y,
+            'offsetY',
+            node.offsetY,
+            'parent',
+            parent,
+            parent?.offsetY,
+            node
+          );
+
+          positionNode(node);
+        }
       }
-    }
+    })
-  });
+  );
 
   // Move the edge labels to the correct place after layout
   graph.edges().forEach(function (e) {