#5237 Fix of alignment with htmlLabels

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

@@ -203,13 +203,14 @@ export const createText = async (
   config: MermaidConfig
 ) => {
   log.info(
-    'XXX createText',
+    'XYZ createText',
     text,
     style,
     isTitle,
     classes,
     useHtmlLabels,
     isNode,
+    'addSvgBackground: ',
     addSvgBackground
   );
   if (useHtmlLabels) {
@@ -226,7 +227,12 @@ export const createText = async (
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text, config);
-    const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
+    const svgLabel = createFormattedText(
+      width,
+      el,
+      structuredText,
+      text ? addSvgBackground : false
+    );
     svgLabel.setAttribute(
       'style',
       style.replace('fill:', 'color:') + (isNode ? ';text-anchor: middle;' : '')

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

@@ -99,19 +99,11 @@ const rect = async (parent, node) => {
       .attr('height', totalHeight);
   }
   const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
-  if (useHtmlLabels) {
+  labelEl.attr(
-    labelEl.attr(
+    'transform',
-      'transform',
+    // This puts the label on top of the box instead of inside it
-      // This puts the label on top of the box instead of inside it
+    `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
-      `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
+  );
-    );
-  } else {
-    labelEl.attr(
-      'transform',
-      // This puts the label on top of the box instead of inside it
-      `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
-    );
-  }
 
   if (labelStyles) {
     const span = labelEl.select('span');

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

@@ -25,7 +25,7 @@ export const getLabelStyles = (styleArray) => {
 };
 
 export const insertEdgeLabel = async (elem, edge) => {
-  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
   // Create the actual text element
   // const labelElement =
@@ -36,6 +36,7 @@ export const insertEdgeLabel = async (elem, edge) => {
   //         addSvgBackground: true,
   //       })
   //     : await createLabel(edge.label, getLabelStyles(edge.labelStyle));
+
   const labelElement = await createText(elem, edge.label, {
     style: getLabelStyles(edge.labelStyle),
     useHtmlLabels,