#5237 Fix for issue with text-centering in state-diagrams with htmlLabels true and subgraph title bkg

packages/mermaid/src/diagrams/flowchart/styles.ts

@@ -41,6 +41,9 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .cluster-label span {
     color: ${options.titleColor};
   }
+  .cluster-label span p {
+    background-color: transparent;
+  }
 
   .label text,span {
     fill: ${options.nodeTextColor || options.textColor};
@@ -56,7 +59,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
     stroke: ${options.nodeBorder};
     stroke-width: 1px;
   }
-  .flowchart-label text {
+  .node .label text {
     text-anchor: middle;
   }
   // .flowchart-label .text-outer-tspan {

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

@@ -233,10 +233,7 @@ export const createText = async (
       structuredText,
       text ? addSvgBackground : false
     );
-    svgLabel.setAttribute(
-      'style',
-      style.replace('fill:', 'color:') + (isNode ? ';text-anchor: middle;' : '')
-    );
+    svgLabel.setAttribute('style', style.replace('fill:', 'color:'));
     return svgLabel;
   }
 };