#5237 Only using markdown strings

packages/mermaid-layout-elk/src/render.ts

@@ -68,6 +68,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
     child.width = boundingBox.width;
     child.height = boundingBox.height;
   } else {
+    // A subgraph
     child.children = [];
     await addVertices(nodeEl, nodeArr, child, node.id);
 
@@ -75,7 +76,8 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
       const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
       labelData.width = bbox.width;
       labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
-      labelData.height = bbox.height - 8;
+      // Give some padding for elk
+      labelData.height = bbox.height - 2;
       labelData.labelNode = shapeSvg.node();
       // We need the label hight to be able to size the subgraph;
       shapeSvg.remove();
@@ -503,8 +505,9 @@ export const render = async (data4Layout, svg, element, algorithm) => {
     const node = nodeDb[n.id];
 
     // Subgraph
+    console.log('Subgraph XCX before');
     if (parentLookupDb.childrenById[node.id] !== undefined) {
-      log.trace('Subgraph XCX', node.id, node);
+      console.log('Subgraph XCX', node.id, node, node.labelData);
       node.labels = [
         {
           text: node.labelText,
@@ -543,7 +546,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
     }
   });
 
-  log.trace('before layout', JSON.stringify(elkGraph, null, 2));
+  console.log('before layout', JSON.stringify(elkGraph, null, 2));
   const g = await elk.layout(elkGraph);
   log.info('after layout', JSON.stringify(g));
 

packages/mermaid/src/rendering-util/createText.ts

@@ -32,6 +32,7 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
   applyStyle(div, node.labelStyle);
   div.style('display', 'table-cell');
   div.style('white-space', 'nowrap');
+  div.style('line-height', '1');
   div.style('max-width', width + 'px');
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   if (addBackground) {
@@ -197,7 +198,16 @@ export const createText = (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode, addSvgBackground);
+  log.info(
+    'createText XEX',
+    text,
+    style,
+    isTitle,
+    classes,
+    useHtmlLabels,
+    isNode,
+    addSvgBackground
+  );
   if (useHtmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
 

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

@@ -180,7 +180,10 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
       if (graph.children(v).length > 0) {
         node.height += 0;
         const parent = graph.node(node.parentId);
-        node.y += (node.offsetY || 0) / 2;
+        const halfPadding = node?.padding / 2 || 0;
+        const labelHeight = node?.labelBBox?.height || 0;
+        const offsetY = labelHeight - halfPadding || 0;
+        node.y += offsetY / 2 + 2;
         insertCluster(clusters, node);
 
         // A cluster in the non-recursive way

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -88,7 +88,7 @@ const rect = (parent, node) => {
     return intersectRect(node, point);
   };
 
-  return shapeSvg;
+  return { cluster: shapeSvg, labelBBox: bbox };
 };
 
 /**
@@ -141,7 +141,7 @@ const noteGroup = (parent, node) => {
     return intersectRect(node, point);
   };
 
-  return shapeSvg;
+  return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } };
 };
 const roundedWithTitle = (parent, node) => {
   const siteConfig = getConfig();
@@ -171,7 +171,6 @@ const roundedWithTitle = (parent, node) => {
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
   }
-  bbox = text.getBBox();
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
@@ -232,29 +231,30 @@ const roundedWithTitle = (parent, node) => {
       .attr('height', innerHeight);
   }
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   // Center the label
   label.attr(
     'transform',
     `translate(${node.x - bbox.width / 2}, ${
       node.y -
       node.height / 2 -
-      node.padding / 3 +
+      node.padding +
-      (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3) +
+      bbox.height / 2 -
-      subGraphTitleTopMargin
+      (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)
     })`
   );
 
   const rectBox = rect.node().getBBox();
   node.height = rectBox.height;
   node.offsetX = 0;
-  node.offsetY = 20;
+  // Used by payout engone to position subgraph in parent
+  node.offsetY = bbox.height - node.padding / 2;
+  node.labelBBox = bbox;
 
   node.intersect = function (point) {
     return intersectRect(node, point);
   };
 
-  return shapeSvg;
+  return { cluster: shapeSvg, labelBBox: bbox };
 };
 
 const divider = (parent, node) => {
@@ -301,7 +301,7 @@ const divider = (parent, node) => {
     return intersectRect(node, point);
   };
 
-  return shapeSvg;
+  return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } };
 };
 
 const shapes = { rect, roundedWithTitle, noteGroup, divider };

packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts

@@ -102,17 +102,6 @@ export const rect = async (parent: SVGAElement, node: Node) => {
       .attr('height', totalHeight);
   }
 
-  // if (node.props) {
-  //   const propKeys = new Set(Object.keys(node.props));
-  //   if (node.props.borders) {
-  //     applyNodePropertyBorders(rect, node.props.borders + '', totalWidth, totalHeight);
-  //     propKeys.delete('borders');
-  //   }
-  //   propKeys.forEach((propKey) => {
-  //     log.warn(`Unknown node property ${propKey}`);
-  //   });
-  // }
-
   updateNodeBounds(node, rect);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js

@@ -31,20 +31,12 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
     label = typeof node.label === 'string' ? node.label : node.label[0];
   }
 
-  const textNode = labelEl.node();
   let text;
-  if (node.labelType === 'markdown') {
+  text = createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
-    // text = textNode;
+    useHtmlLabels,
-    text = createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
+    width: node.width || getConfig().flowchart.wrappingWidth,
-      useHtmlLabels,
+    cssClasses: 'markdown-node-label',
-      width: node.width || getConfig().flowchart.wrappingWidth,
+  });
-      cssClasses: 'markdown-node-label',
-    });
-  } else {
-    text = textNode.appendChild(
-      createLabel(sanitizeText(decodeEntities(label), getConfig()), node.labelStyle, false, isNode)
-    );
-  }
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = node.padding / 2;