From aac86f7de32a65fa850db20f14f65565a191564e Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Tue, 6 Jan 2026 19:53:52 +0530
Subject: [PATCH] fix: edge label rendering for ER and requirement diagrams
 when flowchart: { htmlLabels: false } on-behalf-of: @Mermaid-Chart
 <hello@mermaidchart.com>

---
 .changeset/salty-seals-guess.md               |  5 +++
 .../integration/rendering/erDiagram.spec.js   | 14 +++++++
 .../requirementDiagram-unified.spec.js        | 37 +++++++++++++++++++
 packages/mermaid/src/diagrams/er/styles.ts    | 10 +++++
 .../src/diagrams/requirement/requirementDb.ts |  2 +-
 .../src/diagrams/requirement/styles.js        |  9 +++++
 6 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/salty-seals-guess.md

diff --git a/.changeset/salty-seals-guess.md b/.changeset/salty-seals-guess.md
new file mode 100644
index 00000000000..9e0eb9be4af
--- /dev/null
+++ b/.changeset/salty-seals-guess.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Ensure correct edge label rendering for ER and requirement diagrams when flowchart htmlLabels are false
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 6df44932d23..542de9f24a9 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -457,4 +457,18 @@ ORDER ||--|{ LINE-ITEM : contains
       );
     });
   });
+
+  it('should render edge labels correctly when flowchart htmlLabels is false', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+        CUSTOMER ||--|{ ADDRESS : "invoiced at"
+        CUSTOMER ||--|{ ADDRESS : "receives goods at"
+        ORDER ||--o{ INVOICE : "liable for"
+      `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/cypress/integration/rendering/requirementDiagram-unified.spec.js b/cypress/integration/rendering/requirementDiagram-unified.spec.js
index 48b1a0d61ef..f31a55a03b6 100644
--- a/cypress/integration/rendering/requirementDiagram-unified.spec.js
+++ b/cypress/integration/rendering/requirementDiagram-unified.spec.js
@@ -699,5 +699,42 @@ requirementDiagram
         options
       );
     });
+
+    it(`${description}should render edge labels correctly when flowchart htmlLabels is false`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        functionalRequirement test_req2 {
+        id: 1.1
+        text: the second test text.
+        risk: low
+        verifymethod: inspection
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        element test_entity2 {
+        type: word doc
+        docRef: reqs/test_entity
+        }
+
+        test_entity - satisfies -> test_req2
+        test_req - traces -> test_req2
+        test_req - contains -> test_req2
+        test_entity2 - verifies -> test_req
+        test_req <- copies - test_entity2
+        `,
+        { ...options, flowchart: { htmlLabels: false } }
+      );
+    });
   });
 });
diff --git a/packages/mermaid/src/diagrams/er/styles.ts b/packages/mermaid/src/diagrams/er/styles.ts
index 8ce468550f8..1e1979b163f 100644
--- a/packages/mermaid/src/diagrams/er/styles.ts
+++ b/packages/mermaid/src/diagrams/er/styles.ts
@@ -68,6 +68,16 @@ const getStyles = (options: FlowChartStyleOptions) =>
     stroke: ${options.lineColor} !important;
     stroke-width: 1;
   }
+    
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+  }
+  .edgeLabel .label rect {
+    fill: ${options.edgeLabelBackground};
+  }
+  .edgeLabel .label text {
+    fill: ${options.textColor};
+  }
 `;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.ts b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
index cd064135e4b..25dabdb53af 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
@@ -321,7 +321,7 @@ export class RequirementDB implements DiagramDB {
         id: `${relation.src}-${relation.dst}-${counter}`,
         start: this.requirements.get(relation.src)?.name ?? this.elements.get(relation.src)?.name,
         end: this.requirements.get(relation.dst)?.name ?? this.elements.get(relation.dst)?.name,
-        label: `&lt;&lt;${relation.type}&gt;&gt;`,
+        label: `«${relation.type}»`,
         classes: 'relationshipLine',
         style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
         labelpos: 'c',
diff --git a/packages/mermaid/src/diagrams/requirement/styles.js b/packages/mermaid/src/diagrams/requirement/styles.js
index 4e2f72bd3fb..43e1842e010 100644
--- a/packages/mermaid/src/diagrams/requirement/styles.js
+++ b/packages/mermaid/src/diagrams/requirement/styles.js
@@ -40,6 +40,15 @@ const getStyles = (options) => `
   .relationshipLabel {
     fill: ${options.relationLabelColor};
   }
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+  }
+  .edgeLabel .label rect {
+    fill: ${options.edgeLabelBackground};
+  }
+  .edgeLabel .label text {
+    fill: ${options.relationLabelColor};
+  }
   .divider {
     stroke: ${options.nodeBorder};
     stroke-width: 1;