feat(arch): improved handling of styles

packages/mermaid/src/config.type.ts

@@ -670,6 +670,7 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
 export interface ArchitectureDiagramConfig extends BaseDiagramConfig {
   padding?: number;
   iconSize?: number;
+  fontSize?: number;
 }
 /**
  * The object containing configurations specific for mindmap diagrams

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -250,7 +250,7 @@ function layoutArchitecture(
           style: {
             'text-valign': 'bottom',
             'text-halign': 'center',
-            'font-size': '16px',
+            'font-size': `${getConfigField('fontSize')}px`,
           },
         },
         {
@@ -265,7 +265,7 @@ function layoutArchitecture(
           selector: '.node-group',
           style: {
             // @ts-ignore Incorrect library types
-            padding: '40px',
+            padding: `${getConfigField('padding')}px`,
           },
         },
       ],

packages/mermaid/src/diagrams/architecture/architectureStyles.ts

@@ -1,80 +1,22 @@
 import type { DiagramStylesProvider } from '../../diagram-api/types.js';
 import type { ArchitectureStyleOptions } from './architectureTypes.js';
-// @ts-expect-error Incorrect khroma types
-import { darken, lighten, isDark } from 'khroma';
-
-const genSections: DiagramStylesProvider = (options) => {
-  let sections = '';
-
-  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
-    options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i];
-    if (isDark(options['lineColor' + i])) {
-      options['lineColor' + i] = lighten(options['lineColor' + i], 20);
-    } else {
-      options['lineColor' + i] = darken(options['lineColor' + i], 20);
-    }
-  }
-
-  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
-    const sw = '' + (17 - 3 * i);
-    sections += `
-    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${i - 1
-      } polygon, .section-${i - 1} path  {
-      fill: ${options['cScale' + i]};
-    }
-    .section-${i - 1} text {
-     fill: ${options['cScaleLabel' + i]};
-    }
-    .node-icon-${i - 1} {
-      font-size: 40px;
-      color: ${options['cScaleLabel' + i]};
-    }
-    .section-edge-${i - 1}{
-      stroke: ${options['cScale' + i]};
-    }
-    .edge-depth-${i - 1}{
-      stroke-width: ${sw};
-    }
-    .section-${i - 1} line {
-      stroke: ${options['cScaleInv' + i]} ;
-      stroke-width: 3;
-    }
-
-    .disabled, .disabled circle, .disabled text {
-      fill: lightgray;
-    }
-    .disabled text {
-      fill: #efefef;
-    }
-    `;
-  }
-  return sections;
-};
 
 const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
   `
   .edge {
-    stroke-width: 3;
-    stroke: #777;
-  }
-  .arrow {
-    fill: #777;
-  }
-  .section-root rect, .section-root path, .section-root circle, .section-root polygon  {
-    fill: #333;
-  }
-  .section-root text {
-    fill:#333;
-  }
-  ${genSections(options)}
-  .edge {
+    stroke-width: ${options.archEdgeStrokeWidth};
+    stroke: ${options.archEdgeStrokeColor};
     fill: none;
   }
 
+  .arrow {
+    fill: ${options.archEdgeArrowColor};
+  }
+
   .node-bkg {
     fill: none;
-    stroke: #000;
-    stroke-width: 2px;
+    stroke: ${options.archGroupBorderStrokeColor};
+    stroke-width: ${options.archGroupBorderStrokeWidth};
     stroke-dasharray: 8;
   }
 `;

packages/mermaid/src/diagrams/architecture/architectureTypes.ts

@@ -172,7 +172,11 @@ export const getArchitectureDirectionXYFactors = function (
 };
 
 export interface ArchitectureStyleOptions {
-  fontFamily: string;
+  archEdgeStrokeColor: string;
+  archEdgeArrowColor: string;
+  archEdgeStrokeWidth: string;
+  archGroupBorderStrokeColor: string;
+  archGroupBorderStrokeWidth: string;
 }
 
 export interface ArchitectureService {

packages/mermaid/src/diagrams/architecture/svgDraw.ts

@@ -133,6 +133,11 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
 };
 
 export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
+  const padding = getConfigField('padding');
+  const groupIconSize = padding * 0.75;
+
+  const fontSize = getConfigField('fontSize');
+
   const iconSize = getConfigField('iconSize');
   const halfIconSize = iconSize / 2;
 
@@ -155,15 +160,15 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
       let shiftedY1 = y1;
       if (data.icon) {
         const bkgElem = groupLabelContainer.append('g');
-        // TODO: magic number
-        getIcon(data.icon)?.(bkgElem, 32);
+        getIcon(data.icon)?.(bkgElem, groupIconSize);
         bkgElem.attr(
           'transform',
           'translate(' + (shiftedX1 + halfIconSize + 1) + ', ' + (shiftedY1 + halfIconSize + 1) + ')'
         );
-        shiftedX1 += 32;
-        // TODO: proper values once dynamic sizes are implemented
-        shiftedY1 += 4;
+        shiftedX1 += groupIconSize;
+        // TODO: test with more values
+        // - 1 - 2 comes from the Y axis transform of the icon and label
+        shiftedY1 += ((fontSize / 2) - 1 - 2);
       }
       if (data.label) {
         const textElem = groupLabelContainer.append('g');

packages/mermaid/src/schemas/config.schema.yaml

@@ -887,13 +887,17 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       - useMaxWidth
       - padding
       - iconSize
+      - fontSize
     properties:
       padding:
         type: number
-        default: 10
+        default: 40
       iconSize:
         type: number
         default: 80
+      fontSize:
+        type: number
+        default: 16
 
   MindmapDiagramConfig:
     title: Mindmap Diagram Config

packages/mermaid/src/themes/theme-base.js

@@ -220,6 +220,13 @@ class Theme {
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
+    /* architecture */
+    this.archEdgeStrokeColor = this.archEdgeStrokeColor || '#777';
+    this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';
+    this.archEdgeStrokeWidth = this.archEdgeStrokeWidth || '3';
+    this.archGroupBorderStrokeColor = this.archGroupBorderStrokeColor || '#000';
+    this.archGroupBorderStrokeWidth = this.archGroupBorderStrokeWidth || '2px';
+
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
     this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });