From 920d55402cbc0a3d162ec5ce7e8f3d6c28c38b11 Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Tue, 16 Sep 2025 15:48:48 +0530
Subject: [PATCH] fix:  update styling to match Agros

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 packages/mermaid/src/diagrams/er/styles.ts          | 13 +++++++++----
 .../src/diagrams/requirement/requirementDb.ts       |  3 ++-
 packages/mermaid/src/rendering-util/createText.ts   |  5 +++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/er/styles.ts b/packages/mermaid/src/diagrams/er/styles.ts
index 8ce468550..f7abb5cb2 100644
--- a/packages/mermaid/src/diagrams/er/styles.ts
+++ b/packages/mermaid/src/diagrams/er/styles.ts
@@ -33,10 +33,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
     background-color: ${fade(options.tertiaryColor, 0.5)};
   }
 
-  .edgeLabel .label {
-    fill: ${options.nodeBorder};
-    font-size: 14px;
-  }
+
 
   .label {
     font-family: ${options.fontFamily};
@@ -68,6 +65,14 @@ const getStyles = (options: FlowChartStyleOptions) =>
     stroke: ${options.lineColor} !important;
     stroke-width: 1;
   }
+    .background {
+    fill: ${options.tertiaryColor};
+    opacity: 0.7;
+    background-color: ${options.tertiaryColor};
+      rect {
+        opacity: 0.5;
+      }
+ }
 `;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.ts b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
index 7b5522863..e1676ef78 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
@@ -2,6 +2,7 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import type { Node, Edge } from '../../rendering-util/types.js';
+import { shouldUseHtmlLabels } from '../../utils.js';
 
 import {
   setAccTitle,
@@ -319,7 +320,7 @@ export class RequirementDB implements DiagramDB {
       const isContains = relation.type === this.Relationships.CONTAINS;
 
       let relationLabel = `&lt;&lt;${relation.type}&gt;&gt;`;
-      if (!config.htmlLabels) {
+      if (!shouldUseHtmlLabels()) {
         relationLabel = relationLabel.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
       }
 
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 759330390..c5c91f934 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -176,8 +176,9 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
     if (index === 0) {
       innerTspan.text(word.content);
     } else {
-      // TODO: check what joiner to use.
-      innerTspan.text(' ' + word.content);
+      const prev = wrappedLine[index - 1].content;
+      const insertSpace = !prev.endsWith('<') && !word.content.startsWith('>');
+      innerTspan.text((insertSpace ? ' ' : '') + word.content);
     }
   });
 }