Merge pull request #6225 from Shahir-47/feature/3508_color-user-journey-title

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

.changeset/neat-moose-compare.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add support for styling Journey Diagram title (color, font-family, and font-size)

cypress/integration/rendering/journey.spec.js

@@ -224,4 +224,38 @@ section Checkout from website
         });
       });
   });
+
+  it('should correctly render the user journey diagram title with the specified styling', () => {
+    renderGraph(
+      `---
+config:
+  journey:
+    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');
+    });
+  });
 });

packages/mermaid/src/config.type.ts

@@ -621,6 +621,18 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
+  /**
+   * Color of the title text in Journey Diagrams
+   */
+  titleColor?: string;
+  /**
+   * Font family to be used for the title text in Journey Diagrams
+   */
+  titleFontFamily?: string;
+  /**
+   * Font size to be used for the title text in Journey Diagrams
+   */
+  titleFontSize?: string;
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema

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

@@ -119,9 +119,12 @@ function drawActorLegend(diagram) {
 const conf = getConfig().journey;
 let leftMargin = 0;
 export const draw = function (text, id, version, diagObj) {
-  const conf = getConfig().journey;
+  const configObject = getConfig();
+  const titleColor = configObject.journey.titleColor;
+  const titleFontSize = configObject.journey.titleFontSize;
+  const titleFontFamily = configObject.journey.titleFontFamily;
 
-  const securityLevel = getConfig().securityLevel;
+  const securityLevel = configObject.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
@@ -165,9 +168,11 @@ export const draw = function (text, id, version, diagObj) {
       .append('text')
       .text(title)
       .attr('x', leftMargin)
-      .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/schemas/config.schema.yaml

@@ -1484,6 +1484,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'
@@ -1588,6 +1591,18 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         items:
           type: string
         default: ['#fff']
+      titleColor:
+        description: Color of the title text in Journey Diagrams
+        type: string
+        default: ''
+      titleFontFamily:
+        description: Font family to be used for the title text in Journey Diagrams
+        type: string
+        default: '"trebuchet ms", verdana, arial, sans-serif'
+      titleFontSize:
+        description: Font size to be used for the title text in Journey Diagrams
+        type: string
+        default: '4ex'
 
   TimelineDiagramConfig:
     # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c