From 464ff95e5b62e9ac45f039a63b6e521315395cf0 Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Mon, 15 Sep 2025 18:15:14 +0530
Subject: [PATCH] fix: breaking edge labels

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 .../rendering-elements/createLabel.js         |  6 ++----
 .../rendering-elements/edges.js               | 21 +++++++++++--------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
index de6f0403d..d17016137 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
@@ -1,13 +1,12 @@
 import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import common, {
-  evaluate,
   hasKatex,
   renderKatexSanitized,
   sanitizeText,
 } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
-import { decodeEntities } from '../../utils.js';
+import { decodeEntities, shouldUseHtmlLabels } from '../../utils.js';
 
 /**
  * @param dom
@@ -63,8 +62,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
   if (typeof vertexText === 'object') {
     vertexText = vertexText[0];
   }
-
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (shouldUseHtmlLabels()) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.info('vertexText' + vertexText);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 9e308631a..277825c3e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -1,8 +1,7 @@
 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';
+import utils, { shouldUseHtmlLabels } from '../../utils.js';
 import {
   getLineFunctionsWithOffset,
   markerOffsets,
@@ -45,16 +44,20 @@ export const getLabelStyles = (styleArray) => {
 };
 
 export const insertEdgeLabel = async (elem, edge) => {
-  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  const useHtmlLabels = shouldUseHtmlLabels();
 
   const { labelStyles } = styles2String(edge);
   edge.labelStyle = labelStyles;
-  const labelElement = await createText(elem, edge.label, {
-    style: edge.labelStyle,
-    useHtmlLabels,
-    addSvgBackground: true,
-    isNode: false,
-  });
+  const labelElement =
+    edge.labelType === 'markdown' && useHtmlLabels
+      ? await createText(elem, edge.label, {
+          style: edge.labelStyle,
+          useHtmlLabels,
+          addSvgBackground: true,
+          isNode: false,
+        })
+      : await createLabel(edge.label, getLabelStyles(edge.labelStyle), false, false);
+
   log.info('abc82', edge, edge.labelType);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout