mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-22 16:59:48 +02:00
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:
5
.changeset/neat-moose-compare.md
Normal file
5
.changeset/neat-moose-compare.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
---
|
||||
|
||||
feat: Add support for styling Journey Diagram title (color, font-family, and font-size)
|
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -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
|
||||
|
@@ -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;
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user