fix: edge label rendering for ER and requirement diagrams when flowchart: { htmlLabels: false }

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

Author: darshanr0107

.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

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 } }
+    );
+  });
 });

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 } }
+      );
+    });
   });
 });

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;

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: `<<${relation.type}>>`,
+        label: `«${relation.type}»`,
         classes: 'relationshipLine',
         style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
         labelpos: 'c',

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;