fix: update styling to match Agros

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

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};
@@ -67,6 +64,14 @@ const getStyles = (options: FlowChartStyleOptions) =>
     fill: none !important;
     stroke: ${options.lineColor} !important;
     stroke-width: 1;
+  }
+    .background {
+    fill: ${options.tertiaryColor};
+    opacity: 0.7;
+    background-color: ${options.tertiaryColor};
+      rect {
+        opacity: 0.5;
+      }
  }
 `;
 

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 = `<<${relation.type}>>`;
-      if (!config.htmlLabels) {
+      if (!shouldUseHtmlLabels()) {
         relationLabel = relationLabel.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
       }
 

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.
+      const prev = wrappedLine[index - 1].content;
-      innerTspan.text(' ' + word.content);
+      const insertSpace = !prev.endsWith('<') && !word.content.startsWith('>');
+      innerTspan.text((insertSpace ? ' ' : '') + word.content);
     }
   });
 }