Architecture Diagram Text Background

[silkentrance]

The text is rendered directly above the line and becomes thus very hard to read.

Would it be possible to render the text with a background (the same color as the diagram a/o group), e.g.

[koshea]

I ran into this as well. Here is a patch I used to fix it for now. Not pushing this as a PR as I don't know this codebase well enough yet.

diff --git a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
index 7f494ecd1..6e0e67d8e 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
@@ -3,6 +3,10 @@ import type { ArchitectureStyleOptions } from './architectureTypes.js';

 const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
   `
+  .labelBkg {
+    fill: ${options.labelBackground};
+  }
+
   .edge {
     stroke-width: ${options.archEdgeWidth};
     stroke: ${options.archEdgeColor};
@@ -20,10 +24,10 @@ const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
     stroke-dasharray: 8;
   }
   .node-icon-text {
-    display: flex;
+    display: flex;
     align-items: center;
   }
-
+
   .node-icon-text > div {
     color: #fff;
     margin: 1px;
diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
index b3ef55ec6..011cdb5c8 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -176,6 +176,7 @@ export interface ArchitectureStyleOptions {
   archEdgeWidth: string;
   archGroupBorderColor: string;
   archGroupBorderWidth: string;
+  labelBackground: string;
 }

 export interface ArchitectureService {
diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
index b10a451fe..e8dfc2035 100644
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -277,6 +277,7 @@ export const drawServices = async function (
           useHtmlLabels: false,
           width: iconSize * 1.5,
           classes: 'architecture-service-label',
+          addSvgBackground: true,
         },
         getConfig()
       );
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index cc189e46e..0659082a2 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -119,7 +119,7 @@ function createFormattedText(
 ) {
   const lineHeight = 1.1;
   const labelGroup = g.append('g');
-  const bkg = labelGroup.insert('rect').attr('class', 'background').attr('style', 'stroke: none');
+  const bkg = labelGroup.insert('rect').attr('class', 'labelBkg').attr('style', 'stroke: none');
   const textElement = labelGroup.append('text').attr('y', '-10.1');
   let lineIndex = 0;
   for (const line of structuredText) {
@@ -139,10 +139,10 @@ function createFormattedText(
   }
   if (addBackground) {
     const bbox = textElement.node().getBBox();
-    const padding = 2;
+    const padding = 8;
     bkg
-      .attr('x', bbox.x - padding)
-      .attr('y', bbox.y - padding)
+      .attr('x', bbox.x - bbox.width/2 - padding)
+      .attr('y', bbox.y)
       .attr('width', bbox.width + 2 * padding)
       .attr('height', bbox.height + 2 * padding);