feat: Add support for styling Journey Diagram title (color, font-family, and font-size)

cypress/integration/rendering/journey.spec.js

@@ -63,4 +63,41 @@ section Checkout from website
       { journey: { useMaxWidth: false } }
     );
   });
+
+  it('should correctly render the user journey diagram title with the specified styling', () => {
+    renderGraph(
+      `---
+config:
+  theme: "forest"
+  themeVariables:
+    primaryColor: "#00ff00"
+    secondaryColor: "#fff"
+    titleColor: "#2900A5"
+    titleFontFamily: "Times New Roman"
+    titleFontSize: "5rem"
+---
+
+journey
+    title User Journey Example
+    section Onboarding
+        Sign Up: 5: John, Shahir
+        Complete Profile: 4: John
+    section Engagement
+        Browse Features: 3: John
+        Use Core Functionality: 4: John
+    section Retention
+        Revisit Application: 5: John
+        Invite Friends: 3: John
+
+        size: 2rem
+    `
+    );
+
+    cy.get('text').contains('User Journey Example').as('title');
+    cy.get('@title').then(($title) => {
+      expect($title).to.have.attr('fill', '#2900A5');
+      expect($title).to.have.attr('font-family', 'Times New Roman');
+      expect($title).to.have.attr('font-size', '5rem');
+    });
+  });
 });

docs/config/theming.md

@@ -213,6 +213,9 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
+| titleColor           | calculated from textColor          | Color to be used for the title text in Journey Diagrams.                                                                         |
+| titleFontFamily      | trebuchet ms, verdana, arial       | Font family to be used for the title text in Journey Diagrams.                                                                   |
+| titleFontSize        | 16px                               | Font size in pixels to be used for the title text in Journey Diagrams.                                                           |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
 | secondaryColor       | calculated from primaryColor       |                                                                                                                                  |

packages/mermaid/src/config.ts

@@ -230,7 +230,7 @@ const ConfigWarning = {
 } as const;
 
 type ConfigWarningStrings = keyof typeof ConfigWarning;
-const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
+const issuedWarnings: Partial<Record<ConfigWarningStrings, boolean>> = {};
 const issueWarning = (warning: ConfigWarningStrings) => {
   if (issuedWarnings[warning]) {
     return;

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

@@ -106,9 +106,7 @@ export const isValidArchitectureDirectionPair = function (
   return x !== 'LL' && x !== 'RR' && x !== 'TT' && x !== 'BB';
 };
 
-export type ArchitectureDirectionPairMap = {
-  [key in ArchitectureDirectionPair]?: string;
-};
+export type ArchitectureDirectionPairMap = Partial<Record<ArchitectureDirectionPair, string>>;
 
 /**
  * Creates a pair of the directions of each side of an edge. This function should be used instead of manually creating it to ensure that the source is always the first character.

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -48,9 +48,13 @@ function drawActorLegend(diagram) {
 const conf = getConfig().journey;
 const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
-  const conf = getConfig().journey;
+  const configObject = getConfig();
+  const conf = configObject.journey;
+  const titleColor = configObject.themeVariables.titleColor;
+  const titleFontSize = configObject.themeVariables.titleFontSize;
+  const titleFontFamily = configObject.themeVariables.titleFontFamily;
 
-  const securityLevel = getConfig().securityLevel;
+  const securityLevel = configObject.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
@@ -93,9 +97,11 @@ export const draw = function (text, id, version, diagObj) {
       .append('text')
       .text(title)
       .attr('x', LEFT_MARGIN)
-      .attr('font-size', '4ex')
+      .attr('font-size', titleFontSize)
       .attr('font-weight', 'bold')
-      .attr('y', 25);
+      .attr('y', 25)
+      .attr('fill', titleColor)
+      .attr('font-family', titleFontFamily);
   }
 
   const height = box.stopy - box.starty + 2 * conf.diagramMarginY;

packages/mermaid/src/docs/config/theming.md

@@ -135,6 +135,9 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
+| titleColor           | calculated from textColor          | Color to be used for the title text in Journey Diagrams.                                                                         |
+| titleFontFamily      | trebuchet ms, verdana, arial       | Font family to be used for the title text in Journey Diagrams.                                                                   |
+| titleFontSize        | 16px                               | Font size in pixels to be used for the title text in Journey Diagrams.                                                           |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
 | secondaryColor       | calculated from primaryColor       |                                                                                                                                  |

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

@@ -178,7 +178,7 @@ class Theme {
     this.clusterBkg = this.secondBkg;
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
-    this.titleColor = this.textColor;
+    this.titleColor = this.titleColor === 'calculated' ? this.textColor : this.titleColor;
     this.edgeLabelBackground = this.labelBackground;
 
     /* Sequence Diagram variables */
@@ -233,6 +233,8 @@ class Theme {
     this.fillType5 = adjust(this.secondaryColor, { h: -64 });
     this.fillType6 = adjust(this.primaryColor, { h: 128 });
     this.fillType7 = adjust(this.secondaryColor, { h: 128 });
+    this.titleFontFamily = this.titleFontFamily || '"trebuchet ms", verdana, arial, sans-serif';
+    this.titleFontSize = this.titleFontSize || '16px';
 
     /* pie */
     this.pie1 = this.pie1 || this.primaryColor;