mermaid-js · Shahir-47 · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025
diff --git a/cypress/integration/rendering/journey.spec.js b/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');
+    });
+  });
 });
diff --git a/docs/config/theming.md b/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       |                                                                                                                                  |

diff --git a/packages/mermaid/src/config.ts b/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;

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -604,6 +604,18 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
+  /**
+   * Calculated from textColor
+   */
+  titleColor?: string;
+  /**
+   * Font family to be used for the title text in Journey Diagrams
+   */
+  titleFontFamily?: string;
+  /**
+   * Font size in pixels to be used for the title text in Journey Diagrams
+   */
+  titleFontSize?: string;
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema

diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/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.

diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -48,7 +48,9 @@ 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 titleColor = conf.titleColor;
+  const titleFontSize = conf.titleFontSize;
+  const titleFontFamily = conf.titleFontFamily;
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
@@ -93,9 +95,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;

diff --git a/packages/mermaid/src/docs/config/theming.md b/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       |                                                                                                                                  |

diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1473,6 +1473,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       - bottomMarginAdj
       - useMaxWidth
       - rightAngles
+      - titleColor
+      - titleFontFamily
+      - titleFontSize
     properties:
       diagramMarginX:
         $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
@@ -1573,6 +1576,18 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         items:
           type: string
         default: ['#fff']
+      titleColor:
+        description: Calculated from textColor
+        type: string
+        default: '#00ff00'
+      titleFontFamily:
+        description: Font family to be used for the title text in Journey Diagrams
+        type: string
+        default: '"Open Sans", sans-serif'
+      titleFontSize:
+        description: Font size in pixels to be used for the title text in Journey Diagrams
+        type: string
+        default: '32px'
 
   TimelineDiagramConfig:
     # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c