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)
This commit is contained in:
Sidharth Vinod
2025-04-15 03:12:24 +00:00
committed by GitHub
5 changed files with 75 additions and 4 deletions

View File

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

View File

@@ -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');
});
});
});

View File

@@ -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

View File

@@ -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;

View File

@@ -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