From 9979ea1d7485f76426c6f4db09b5f63b79c04c5f Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 25 Jun 2024 15:48:19 +0200
Subject: [PATCH] #5237 Fix of alignment with htmlLabels

---
 .../mermaid/src/rendering-util/createText.ts   | 10 ++++++++--
 .../rendering-elements/clusters.js             | 18 +++++-------------
 .../rendering-util/rendering-elements/edges.js |  3 ++-
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index ae22f31dd..307f25734 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/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;' : '')
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 2a8f90714..2e6558c49 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/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(
-      'transform',
-      // 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})`
-    );
-  } 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})`
-    );
-  }
+  labelEl.attr(
+    'transform',
+    // 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})`
+  );
 
   if (labelStyles) {
     const span = labelEl.select('span');
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 88096ac4f..7f8ee1c22 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/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,