Restructured the build function and addressed more review comment

packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison

@@ -1,8 +1,3 @@
-/** mermaid
- *  https://knsv.github.io/mermaid
- *  (c) 2015 Knut Sveidqvist
- *  MIT license.
- */
 %lex
 %options case-insensitive
 

packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import { parser } from './quadrant.jison';
 import { Mock, vi } from 'vitest';
 
@@ -45,7 +45,7 @@ describe('Testing quadrantChart jison file', () => {
   });
 
   it('should be able to parse directive', () => {
-    let str =
+    const str =
       '%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%  \n quadrantChart';
     expect(parserFnConstructor(str)).not.toThrow();
     expect(mockDB.parseDirective.mock.calls[0]).toEqual(['%%{', 'open_directive']);
@@ -242,7 +242,7 @@ describe('Testing quadrantChart jison file', () => {
   });
 
   it('should be able to parse the whole chart', () => {
-    let str = `%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
+    const str = `%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
     quadrantChart
       title Analytics and Business Intelligence Platforms
       x-axis "Completeness of Vision ❤" --> "x-axis-2"

packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts

@@ -2,35 +2,45 @@
 import { scaleLinear } from 'd3';
 import { log } from '../../logger.js';
 import { QuadrantChartConfig } from '../../config.type.js';
+import defaultConfig from '../../defaultConfig.js';
+import { getThemeVariables } from '../../themes/theme-default.js';
 
-export interface QuadrantPointInputType {
+const defaultThemeVariables = getThemeVariables();
-  x: number;
-  y: number;
-  text: string;
-}
 
 export type TextVerticalPos = 'left' | 'center' | 'right';
 export type TextHorizontalPos = 'top' | 'middle' | 'bottom';
 
-export interface QuadrantTextType {
+export interface Point {
-  text: string;
-  fill: string;
   x: number;
   y: number;
+}
+
+export interface QuadrantPointInputType extends Point {
+  text: string;
+}
+
+export interface QuadrantTextType extends Point {
+  text: string;
+  fill: string;
   verticalPos: TextVerticalPos;
   horizontalPos: TextHorizontalPos;
   fontSize: number;
   rotation: number;
 }
 
-export interface QuadrantPointType {
+export interface QuadrantPointType extends Point {
-  x: number;
-  y: number;
   fill: string;
   radius: number;
   text: QuadrantTextType;
 }
 
+export interface QuadrantQuadrantsType extends Point {
+  text: QuadrantTextType;
+  width: number;
+  height: number;
+  fill: string;
+}
+
 export interface QuadrantLineType {
   strokeWidth: number;
   strokeFill: string;
@@ -40,15 +50,6 @@ export interface QuadrantLineType {
   y2: number;
 }
 
-export interface QuadrantQuadrantsType {
-  text: QuadrantTextType;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  fill: string;
-}
-
 export interface QuadrantBuildType {
   points: QuadrantPointType[];
   quadrants: QuadrantQuadrantsType[];
@@ -57,7 +58,7 @@ export interface QuadrantBuildType {
   borderLines?: QuadrantLineType[];
 }
 
-export interface QuadrantBuilderConfig extends QuadrantChartConfig {
+export interface quadrantBuilderData {
   titleText: string;
   quadrant1Text: string;
   quadrant2Text: string;
@@ -68,6 +69,9 @@ export interface QuadrantBuilderConfig extends QuadrantChartConfig {
   yAxisBottomText: string;
   yAxisTopText: string;
   points: QuadrantPointInputType[];
+}
+
+export interface QuadrantBuilderConfig extends QuadrantChartConfig {
   showXAxis: boolean;
   showYAxis: boolean;
   showTitle: boolean;
@@ -91,16 +95,40 @@ export interface QuadrantBuilderThemeConfig {
   quadrantExternalBorderStrokeFill: string;
 }
 
+interface CalculateSpaceData {
+  xAxisSpace: {
+    top: number;
+    bottom: number;
+  };
+  yAxisSpace: {
+    left: number;
+    right: number;
+  };
+  titleSpace: {
+    top: number;
+  };
+  quadrantSpace: {
+    quadrantLeft: number;
+    quadrantTop: number;
+    quadrantWidth: number;
+    quadrantHalfWidth: number;
+    quadrantHeight: number;
+    quadrantHalfHeight: number;
+  };
+}
+
 export class QuadrantBuilder {
   private config: QuadrantBuilderConfig;
   private themeConfig: QuadrantBuilderThemeConfig;
+  private data: quadrantBuilderData;
 
   constructor() {
     this.config = this.getDefaultConfig();
     this.themeConfig = this.getDefaultThemeConfig();
+    this.data = this.getDefaultData();
   }
 
-  getDefaultConfig(): QuadrantBuilderConfig {
+  getDefaultData(): quadrantBuilderData {
     return {
       titleText: '',
       quadrant1Text: '',
@@ -112,58 +140,70 @@ export class QuadrantBuilder {
       yAxisBottomText: '',
       yAxisTopText: '',
       points: [],
+    };
+  }
+
+  getDefaultConfig(): QuadrantBuilderConfig {
+    return {
       showXAxis: true,
       showYAxis: true,
       showTitle: true,
-      chartHeight: 500,
+      chartHeight: defaultConfig.quadrantChart?.chartWidth || 500,
-      chartWidth: 500,
+      chartWidth: defaultConfig.quadrantChart?.chartHeight || 500,
-      titlePadding: 5,
+      titlePadding: defaultConfig.quadrantChart?.titlePadding || 5,
-      titleFontSize: 20,
+      titleFontSize: defaultConfig.quadrantChart?.titleFontSize || 20,
-      quadrantPadding: 5,
+      quadrantPadding: defaultConfig.quadrantChart?.quadrantPadding || 5,
-      xAxisLabelPadding: 5,
+      xAxisLabelPadding: defaultConfig.quadrantChart?.xAxisLabelPadding || 5,
-      yAxisLabelPadding: 5,
+      yAxisLabelPadding: defaultConfig.quadrantChart?.yAxisLabelPadding || 5,
-      xAxisLabelFontSize: 16,
+      xAxisLabelFontSize: defaultConfig.quadrantChart?.xAxisLabelFontSize || 16,
-      yAxisLabelFontSize: 16,
+      yAxisLabelFontSize: defaultConfig.quadrantChart?.yAxisLabelFontSize || 16,
-      quadrantLabelFontSize: 16,
+      quadrantLabelFontSize: defaultConfig.quadrantChart?.quadrantLabelFontSize || 16,
-      quadrantTextTopPadding: 5,
+      quadrantTextTopPadding: defaultConfig.quadrantChart?.quadrantTextTopPadding || 5,
-      pointTextPadding: 5,
+      pointTextPadding: defaultConfig.quadrantChart?.pointTextPadding || 5,
-      pointLabelFontSize: 12,
+      pointLabelFontSize: defaultConfig.quadrantChart?.pointLabelFontSize || 12,
-      pointRadius: 5,
+      pointRadius: defaultConfig.quadrantChart?.pointRadius || 5,
-      xAxisPosition: 'top',
+      xAxisPosition: defaultConfig.quadrantChart?.xAxisPosition || 'top',
-      yAxisPosition: 'left',
+      yAxisPosition: defaultConfig.quadrantChart?.yAxisPosition || 'left',
-      quadrantInternalBorderStrokeWidth: 2,
+      quadrantInternalBorderStrokeWidth:
-      quadrantExternalBorderStrokeWidth: 3,
+        defaultConfig.quadrantChart?.quadrantInternalBorderStrokeWidth || 1,
+      quadrantExternalBorderStrokeWidth:
+        defaultConfig.quadrantChart?.quadrantExternalBorderStrokeWidth || 2,
     };
   }
 
   getDefaultThemeConfig(): QuadrantBuilderThemeConfig {
     return {
-      quadrant1Fill: '#8bc2f3',
+      quadrant1Fill: defaultThemeVariables.quadrant1Fill,
-      quadrant2Fill: '#faebd7',
+      quadrant2Fill: defaultThemeVariables.quadrant2Fill,
-      quadrant3Fill: '#00ffff',
+      quadrant3Fill: defaultThemeVariables.quadrant3Fill,
-      quadrant4Fill: '#f0ffff',
+      quadrant4Fill: defaultThemeVariables.quadrant4Fill,
-      quadrant1TextFill: '#93690e',
+      quadrant1TextFill: defaultThemeVariables.quadrant1TextFill,
-      quadrant2TextFill: '#8644ff',
+      quadrant2TextFill: defaultThemeVariables.quadrant2TextFill,
-      quadrant3TextFill: '#e3004d',
+      quadrant3TextFill: defaultThemeVariables.quadrant3TextFill,
-      quadrant4TextFill: '#000000',
+      quadrant4TextFill: defaultThemeVariables.quadrant4TextFill,
-      quadrantPointFill: '#60B19C',
+      quadrantPointFill: defaultThemeVariables.quadrantPointFill,
-      quadrantPointTextFill: '#0000ff',
+      quadrantPointTextFill: defaultThemeVariables.quadrantPointTextFill,
-      quadrantXAxisTextFill: '#000000',
+      quadrantXAxisTextFill: defaultThemeVariables.quadrantXAxisTextFill,
-      quadrantYAxisTextFill: '#000000',
+      quadrantYAxisTextFill: defaultThemeVariables.quadrantYAxisTextFill,
-      quadrantTitleFill: '#000000',
+      quadrantTitleFill: defaultThemeVariables.quadrantTitleFill,
-      quadrantInternalBorderStrokeFill: '#000000',
+      quadrantInternalBorderStrokeFill: defaultThemeVariables.quadrantInternalBorderStrokeFill,
-      quadrantExternalBorderStrokeFill: '#000000',
+      quadrantExternalBorderStrokeFill: defaultThemeVariables.quadrantExternalBorderStrokeFill,
     };
   }
 
   clear() {
     this.config = this.getDefaultConfig();
     this.themeConfig = this.getDefaultThemeConfig();
+    this.data = this.getDefaultData();
     log.info('clear called');
   }
 
+  setData(data: Partial<quadrantBuilderData>) {
+    this.data = { ...this.data, ...data };
+  }
+
   addPoints(points: QuadrantPointInputType[]) {
-    this.config.points = [...points, ...this.config.points];
+    this.data.points = [...points, ...this.data.points];
   }
 
   setConfig(config: Partial<QuadrantBuilderConfig>) {
@@ -176,20 +216,12 @@ export class QuadrantBuilder {
     this.themeConfig = { ...this.themeConfig, ...themeConfig };
   }
 
-  build(): QuadrantBuildType {
+  calculateSpace(
-    const showXAxis =
+    xAxisPosition: typeof this.config.xAxisPosition,
-      this.config.showXAxis && (this.config.xAxisLeftText || this.config.xAxisRightText);
+    showXAxis: boolean,
-    const showYAxis =
+    showYAxis: boolean,
-      this.config.showYAxis && (this.config.yAxisTopText || this.config.yAxisBottomText);
+    showTitle: boolean
-    const showTitle = this.config.showTitle && this.config.titleText;
+  ): CalculateSpaceData {
-
-    const halfExternalBorderWidth = this.config.quadrantExternalBorderStrokeWidth / 2;
-    const halfInternalBorderWidth = this.config.quadrantInternalBorderStrokeWidth / 2;
-
-    const xAxisPosition = this.config.points.length > 0 ? 'bottom' : this.config.xAxisPosition;
-
-    const drawAxisLabelInMiddle = this.config.points.length === 0;
-
     const xAxisSpaceCalculation =
       this.config.xAxisLabelPadding * 2 + this.config.xAxisLabelFontSize;
     const xAxisSpace = {
@@ -222,12 +254,44 @@ export class QuadrantBuilder {
 
     const quadrantHalfWidth = quadrantWidth / 2;
     const quadrantHalfHeight = quadrantHeight / 2;
+    const quadrantSpace = {
+      quadrantLeft,
+      quadrantTop,
+      quadrantWidth,
+      quadrantHalfWidth,
+      quadrantHeight,
+      quadrantHalfHeight,
+    };
 
+    return {
+      xAxisSpace,
+      yAxisSpace,
+      titleSpace,
+      quadrantSpace,
+    };
+  }
+
+  getAxisLabels(
+    xAxisPosition: typeof this.config.xAxisPosition,
+    showXAxis: boolean,
+    showYAxis: boolean,
+    spaceData: CalculateSpaceData
+  ): QuadrantTextType[] {
+    const { quadrantSpace, titleSpace } = spaceData;
+    const {
+      quadrantHalfHeight,
+      quadrantHeight,
+      quadrantLeft,
+      quadrantHalfWidth,
+      quadrantTop,
+      quadrantWidth,
+    } = quadrantSpace;
+    const drawAxisLabelInMiddle = this.data.points.length === 0;
     const axisLabels: QuadrantTextType[] = [];
 
-    if (this.config.xAxisLeftText && showXAxis) {
+    if (this.data.xAxisLeftText && showXAxis) {
       axisLabels.push({
-        text: this.config.xAxisLeftText,
+        text: this.data.xAxisLeftText,
         fill: this.themeConfig.quadrantXAxisTextFill,
         x: quadrantLeft + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0),
         y:
@@ -240,9 +304,9 @@ export class QuadrantBuilder {
         rotation: 0,
       });
     }
-    if (this.config.xAxisRightText && showXAxis) {
+    if (this.data.xAxisRightText && showXAxis) {
       axisLabels.push({
-        text: this.config.xAxisRightText,
+        text: this.data.xAxisRightText,
         fill: this.themeConfig.quadrantXAxisTextFill,
         x: quadrantLeft + quadrantHalfWidth + (drawAxisLabelInMiddle ? quadrantHalfWidth / 2 : 0),
         y:
@@ -256,9 +320,9 @@ export class QuadrantBuilder {
       });
     }
 
-    if (this.config.yAxisBottomText && showYAxis) {
+    if (this.data.yAxisBottomText && showYAxis) {
       axisLabels.push({
-        text: this.config.yAxisBottomText,
+        text: this.data.yAxisBottomText,
         fill: this.themeConfig.quadrantYAxisTextFill,
         x:
           this.config.yAxisPosition === 'left'
@@ -271,9 +335,9 @@ export class QuadrantBuilder {
         rotation: -90,
       });
     }
-    if (this.config.yAxisTopText && showYAxis) {
+    if (this.data.yAxisTopText && showYAxis) {
       axisLabels.push({
-        text: this.config.yAxisTopText,
+        text: this.data.yAxisTopText,
         fill: this.themeConfig.quadrantYAxisTextFill,
         x:
           this.config.yAxisPosition === 'left'
@@ -286,11 +350,18 @@ export class QuadrantBuilder {
         rotation: -90,
       });
     }
+    return axisLabels;
+  }
+
+  getQuadrants(spaceData: CalculateSpaceData): QuadrantQuadrantsType[] {
+    const { quadrantSpace } = spaceData;
+
+    const { quadrantHalfHeight, quadrantLeft, quadrantHalfWidth, quadrantTop } = quadrantSpace;
 
     const quadrants: QuadrantQuadrantsType[] = [
       {
         text: {
-          text: this.config.quadrant1Text,
+          text: this.data.quadrant1Text,
           fill: this.themeConfig.quadrant1TextFill,
           x: 0,
           y: 0,
@@ -307,7 +378,7 @@ export class QuadrantBuilder {
       },
       {
         text: {
-          text: this.config.quadrant2Text,
+          text: this.data.quadrant2Text,
           fill: this.themeConfig.quadrant2TextFill,
           x: 0,
           y: 0,
@@ -324,7 +395,7 @@ export class QuadrantBuilder {
       },
       {
         text: {
-          text: this.config.quadrant3Text,
+          text: this.data.quadrant3Text,
           fill: this.themeConfig.quadrant3TextFill,
           x: 0,
           y: 0,
@@ -341,7 +412,7 @@ export class QuadrantBuilder {
       },
       {
         text: {
-          text: this.config.quadrant4Text,
+          text: this.data.quadrant4Text,
           fill: this.themeConfig.quadrant4TextFill,
           x: 0,
           y: 0,
@@ -360,7 +431,7 @@ export class QuadrantBuilder {
     for (const quadrant of quadrants) {
       quadrant.text.x = quadrant.x + quadrant.width / 2;
       // place the text in the center of the box
-      if (this.config.points.length === 0) {
+      if (this.data.points.length === 0) {
         quadrant.text.y = quadrant.y + quadrant.height / 2;
         quadrant.text.horizontalPos = 'middle';
         // place the text top of the quadrant square
@@ -370,6 +441,14 @@ export class QuadrantBuilder {
       }
     }
 
+    return quadrants;
+  }
+
+  getQuadrantPoints(spaceData: CalculateSpaceData): QuadrantPointType[] {
+    const { quadrantSpace } = spaceData;
+
+    const { quadrantHeight, quadrantLeft, quadrantTop, quadrantWidth } = quadrantSpace;
+
     const xAxis = scaleLinear()
       .domain([0, 1])
       .range([quadrantLeft, quadrantWidth + quadrantLeft]);
@@ -378,7 +457,7 @@ export class QuadrantBuilder {
       .domain([0, 1])
       .range([quadrantHeight + quadrantTop, quadrantTop]);
 
-    const points: QuadrantPointType[] = this.config.points.map((point) => {
+    const points: QuadrantPointType[] = this.data.points.map((point) => {
       const props: QuadrantPointType = {
         x: xAxis(point.x),
         y: yAxis(point.y),
@@ -397,6 +476,21 @@ export class QuadrantBuilder {
       };
       return props;
     });
+    return points;
+  }
+
+  getBorders(spaceData: CalculateSpaceData): QuadrantLineType[] {
+    const halfExternalBorderWidth = this.config.quadrantExternalBorderStrokeWidth / 2;
+    const { quadrantSpace } = spaceData;
+
+    const {
+      quadrantHalfHeight,
+      quadrantHeight,
+      quadrantLeft,
+      quadrantHalfWidth,
+      quadrantTop,
+      quadrantWidth,
+    } = quadrantSpace;
 
     const borderLines: QuadrantLineType[] = [
       // top border
@@ -454,17 +548,13 @@ export class QuadrantBuilder {
         y2: quadrantTop + quadrantHalfHeight,
       },
     ];
+    return borderLines;
+  }
 
-    const retVal: QuadrantBuildType = {
+  getTitle(showTitle: boolean): QuadrantTextType | undefined {
-      points,
-      quadrants,
-      axisLabels,
-      borderLines,
-    };
-
     if (showTitle) {
-      retVal.title = {
+      return {
-        text: this.config.titleText,
+        text: this.data.titleText,
         fill: this.themeConfig.quadrantTitleFill,
         fontSize: this.config.titleFontSize,
         horizontalPos: 'top',
@@ -474,7 +564,26 @@ export class QuadrantBuilder {
         x: this.config.chartWidth / 2,
       };
     }
+    return;
+  }
 
-    return retVal;
+  build(): QuadrantBuildType {
+    const showXAxis =
+      this.config.showXAxis && !!(this.data.xAxisLeftText || this.data.xAxisRightText);
+    const showYAxis =
+      this.config.showYAxis && !!(this.data.yAxisTopText || this.data.yAxisBottomText);
+    const showTitle = this.config.showTitle && !!this.data.titleText;
+
+    const xAxisPosition = this.data.points.length > 0 ? 'bottom' : this.config.xAxisPosition;
+
+    const calculatedSpace = this.calculateSpace(xAxisPosition, showXAxis, showYAxis, showTitle);
+
+    return {
+      points: this.getQuadrantPoints(calculatedSpace),
+      quadrants: this.getQuadrants(calculatedSpace),
+      axisLabels: this.getAxisLabels(xAxisPosition, showXAxis, showYAxis, calculatedSpace),
+      borderLines: this.getBorders(calculatedSpace),
+      title: this.getTitle(showTitle),
+    };
   }
 }

packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts

@@ -24,35 +24,35 @@ type LexTextObj = { text: string; type: 'text' | 'markdown' };
 const quadrantBuilder = new QuadrantBuilder();
 
 function setQuadrant1Text(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ quadrant1Text: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ quadrant1Text: textSanitizer(textObj.text) });
 }
 
 function setQuadrant2Text(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ quadrant2Text: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ quadrant2Text: textSanitizer(textObj.text) });
 }
 
 function setQuadrant3Text(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ quadrant3Text: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ quadrant3Text: textSanitizer(textObj.text) });
 }
 
 function setQuadrant4Text(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ quadrant4Text: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ quadrant4Text: textSanitizer(textObj.text) });
 }
 
 function setXAxisLeftText(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ xAxisLeftText: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ xAxisLeftText: textSanitizer(textObj.text) });
 }
 
 function setXAxisRightText(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ xAxisRightText: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ xAxisRightText: textSanitizer(textObj.text) });
 }
 
 function setYAxisTopText(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ yAxisTopText: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ yAxisTopText: textSanitizer(textObj.text) });
 }
 
 function setYAxisBottomText(textObj: LexTextObj) {
-  quadrantBuilder.setConfig({ yAxisBottomText: textSanitizer(textObj.text) });
+  quadrantBuilder.setData({ yAxisBottomText: textSanitizer(textObj.text) });
 }
 
 function addPoint(textObj: LexTextObj, x: number, y: number) {
@@ -90,7 +90,7 @@ function getQuadrantData() {
     quadrantInternalBorderStrokeFill: themeVariables.quadrantInternalBorderStrokeFill,
     quadrantTitleFill: themeVariables.quadrantTitleFill,
   });
-  quadrantBuilder.setConfig({ titleText: getDiagramTitle() });
+  quadrantBuilder.setData({ titleText: getDiagramTitle() });
   return quadrantBuilder.build();
 }
 

packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts

@@ -2,7 +2,6 @@
 import { select } from 'd3';
 import * as configApi from '../../config.js';
 import { log } from '../../logger.js';
-
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Diagram } from '../../Diagram.js';
 import {
@@ -16,8 +15,8 @@ import {
 } from './quadrantBuilder.js';
 
 export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => {
-  function getDominantBaseLine(horizintalPos: TextHorizontalPos) {
+  function getDominantBaseLine(horizontalPos: TextHorizontalPos) {
-    return horizintalPos === 'top' ? 'text-before-edge' : 'middle';
+    return horizontalPos === 'top' ? 'text-before-edge' : 'middle';
   }
 
   function getTextAnchor(verticalPos: TextVerticalPos) {

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

@@ -222,16 +222,16 @@ class Theme {
 
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
-    this.quadrant2Fill = this.quadrant2Fill || adjust(this.quadrant1Fill, { r: 5, g: 5, b: 5 });
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
-    this.quadrant3Fill = this.quadrant3Fill || adjust(this.quadrant1Fill, { r: 10, g: 10, b: 10 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
-    this.quadrant4Fill = this.quadrant4Fill || adjust(this.quadrant1Fill, { r: 15, g: 15, b: 15 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
     this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
     this.quadrant2TextFill =
-      this.quadrant2TextFill || adjust(this.quadrant1TextFill, { r: -5, g: -5, b: -5 });
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
     this.quadrant3TextFill =
-      this.quadrant3TextFill || adjust(this.quadrant1TextFill, { r: -10, g: -10, b: -10 });
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
     this.quadrant4TextFill =
-      this.quadrant4TextFill || adjust(this.quadrant1TextFill, { r: -15, g: -15, b: -15 });
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
     this.quadrantPointFill =
       this.quadrantPointFill || isDark(this.quadrant1Fill)
         ? lighten(this.quadrant1Fill)
@@ -242,7 +242,7 @@ class Theme {
     this.quadrantInternalBorderStrokeFill =
       this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantExternalBorderStrokeFill =
-      this.quadrantExternalBorderStrokeFill || this.secondaryBorderColor;
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
     /* requirement-diagram */

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

@@ -228,16 +228,16 @@ class Theme {
 
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
-    this.quadrant2Fill = this.quadrant2Fill || adjust(this.quadrant1Fill, { r: 5, g: 5, b: 5 });
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
-    this.quadrant3Fill = this.quadrant3Fill || adjust(this.quadrant1Fill, { r: 10, g: 10, b: 10 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
-    this.quadrant4Fill = this.quadrant4Fill || adjust(this.quadrant1Fill, { r: 15, g: 15, b: 15 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
     this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
     this.quadrant2TextFill =
-      this.quadrant2TextFill || adjust(this.quadrant1TextFill, { r: -5, g: -5, b: -5 });
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
     this.quadrant3TextFill =
-      this.quadrant3TextFill || adjust(this.quadrant1TextFill, { r: -10, g: -10, b: -10 });
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
     this.quadrant4TextFill =
-      this.quadrant4TextFill || adjust(this.quadrant1TextFill, { r: -15, g: -15, b: -15 });
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
     this.quadrantPointFill =
       this.quadrantPointFill || isDark(this.quadrant1Fill)
         ? lighten(this.quadrant1Fill)
@@ -248,7 +248,7 @@ class Theme {
     this.quadrantInternalBorderStrokeFill =
       this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantExternalBorderStrokeFill =
-      this.quadrantExternalBorderStrokeFill || this.secondaryBorderColor;
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
     /* class */

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

@@ -249,16 +249,16 @@ class Theme {
 
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
-    this.quadrant2Fill = this.quadrant2Fill || adjust(this.quadrant1Fill, { r: 5, g: 5, b: 5 });
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
-    this.quadrant3Fill = this.quadrant3Fill || adjust(this.quadrant1Fill, { r: 10, g: 10, b: 10 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
-    this.quadrant4Fill = this.quadrant4Fill || adjust(this.quadrant1Fill, { r: 15, g: 15, b: 15 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
     this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
     this.quadrant2TextFill =
-      this.quadrant2TextFill || adjust(this.quadrant1TextFill, { r: -5, g: -5, b: -5 });
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
     this.quadrant3TextFill =
-      this.quadrant3TextFill || adjust(this.quadrant1TextFill, { r: -10, g: -10, b: -10 });
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
     this.quadrant4TextFill =
-      this.quadrant4TextFill || adjust(this.quadrant1TextFill, { r: -15, g: -15, b: -15 });
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
     this.quadrantPointFill =
       this.quadrantPointFill || isDark(this.quadrant1Fill)
         ? lighten(this.quadrant1Fill)
@@ -269,7 +269,7 @@ class Theme {
     this.quadrantInternalBorderStrokeFill =
       this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantExternalBorderStrokeFill =
-      this.quadrantExternalBorderStrokeFill || this.secondaryBorderColor;
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
     /* requirement-diagram */

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

@@ -217,16 +217,16 @@ class Theme {
 
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
-    this.quadrant2Fill = this.quadrant2Fill || adjust(this.quadrant1Fill, { r: 5, g: 5, b: 5 });
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
-    this.quadrant3Fill = this.quadrant3Fill || adjust(this.quadrant1Fill, { r: 10, g: 10, b: 10 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
-    this.quadrant4Fill = this.quadrant4Fill || adjust(this.quadrant1Fill, { r: 15, g: 15, b: 15 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
     this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
     this.quadrant2TextFill =
-      this.quadrant2TextFill || adjust(this.quadrant1TextFill, { r: -5, g: -5, b: -5 });
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
     this.quadrant3TextFill =
-      this.quadrant3TextFill || adjust(this.quadrant1TextFill, { r: -10, g: -10, b: -10 });
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
     this.quadrant4TextFill =
-      this.quadrant4TextFill || adjust(this.quadrant1TextFill, { r: -15, g: -15, b: -15 });
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
     this.quadrantPointFill =
       this.quadrantPointFill || isDark(this.quadrant1Fill)
         ? lighten(this.quadrant1Fill)
@@ -237,7 +237,7 @@ class Theme {
     this.quadrantInternalBorderStrokeFill =
       this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantExternalBorderStrokeFill =
-      this.quadrantExternalBorderStrokeFill || this.secondaryBorderColor;
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
     /* requirement-diagram */

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

@@ -248,16 +248,16 @@ class Theme {
 
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
-    this.quadrant2Fill = this.quadrant2Fill || adjust(this.quadrant1Fill, { r: 5, g: 5, b: 5 });
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
-    this.quadrant3Fill = this.quadrant3Fill || adjust(this.quadrant1Fill, { r: 10, g: 10, b: 10 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
-    this.quadrant4Fill = this.quadrant4Fill || adjust(this.quadrant1Fill, { r: 15, g: 15, b: 15 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
     this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
     this.quadrant2TextFill =
-      this.quadrant2TextFill || adjust(this.quadrant1TextFill, { r: -5, g: -5, b: -5 });
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
     this.quadrant3TextFill =
-      this.quadrant3TextFill || adjust(this.quadrant1TextFill, { r: -10, g: -10, b: -10 });
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
     this.quadrant4TextFill =
-      this.quadrant4TextFill || adjust(this.quadrant1TextFill, { r: -15, g: -15, b: -15 });
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
     this.quadrantPointFill =
       this.quadrantPointFill || isDark(this.quadrant1Fill)
         ? lighten(this.quadrant1Fill)
@@ -268,7 +268,7 @@ class Theme {
     this.quadrantInternalBorderStrokeFill =
       this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantExternalBorderStrokeFill =
-      this.quadrantExternalBorderStrokeFill || this.secondaryBorderColor;
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
     /* requirement-diagram */