diff --git a/.changeset/neat-moose-compare.md b/.changeset/neat-moose-compare.md new file mode 100644 index 000000000..98a064789 --- /dev/null +++ b/.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) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 2d6c14c9d..70d5574b8 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/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'); + }); + }); }); diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 5c34ff462..d06a844d9 100644 --- a/packages/mermaid/src/config.type.ts +++ b/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 diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 64e21a10e..e0b22d026 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/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; diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 48e113a94..ab05bbe50 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/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