fix:prioritize flowchart.htmlLabels over global htmlLabels

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.changeset/lazy-wolves-film.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Ensure flowchart htmlLabels resolution respects both global and flowchart config

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1199,4 +1199,61 @@ class link myClass
 `
     );
   });
+
+  describe('htmlLabels rendering', () => {
+    it('should not render with htmlLabels when disabled via flowchart config', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { flowchart: { htmlLabels: false } }
+      );
+    });
+
+    it('should not render with htmlLabels when disabled via global config', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { htmlLabels: false }
+      );
+    });
+
+    it('should render with htmlLabels when enabled', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      );
+    });
+
+    it('should not render with htmlLabels when disabled via flowchart config, even when enabled in global config', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { htmlLabels: true, flowchart: { htmlLabels: false } },
+        undefined,
+        ($svg) => {
+          expect($svg.find('foreignObject').length).to.equal(0);
+        }
+      );
+    });
+
+    it('should create foreignObject elements when htmlLabels enabled', () => {
+      renderGraph(
+        `flowchart TD
+          A["Node with <br> HTML"] -- "edge <br> label" --> B["Another node"]
+          C --> D
+        `,
+        { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      );
+      cy.get('svg foreignObject').should('exist');
+    });
+  });
 });

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

@@ -21,7 +21,13 @@ export const diagram = {
     if (cnf.layout) {
       setConfig({ layout: cnf.layout });
     }
+    cnf.flowchart.htmlLabels = cnf.flowchart?.htmlLabels ?? cnf?.htmlLabels;
     cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
+    setConfig({
+      flowchart: {
+        arrowMarkerAbsolute: cnf.arrowMarkerAbsolute,
+        htmlLabels: cnf.flowchart.htmlLabels,
+      },
+    });
   },
 };

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

@@ -1,5 +1,4 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { createText } from '../createText.js';
 import utils from '../../utils.js';
@@ -45,8 +44,8 @@ export const getLabelStyles = (styleArray) => {
 };
 
 export const insertEdgeLabel = async (elem, edge) => {
-  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  const config = getConfig();
-
+  let useHtmlLabels = config.flowchart.htmlLabels;
   const { labelStyles } = styles2String(edge);
   edge.labelStyle = labelStyles;
   const labelElement = await createText(elem, edge.label, {

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

@@ -13,7 +13,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
   _classes?: string
 ) => {
   let cssClasses;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
   if (!_classes) {
     cssClasses = 'node default';
   } else {