From 16a1a9070574c5b96e87316d3d7324929061b897 Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Sat, 25 Jan 2025 22:01:30 -0500 Subject: [PATCH] adds font family and font size to the title of the user journey diagram Co-authored-by: Pranav Mishra --- .../mermaid/src/diagrams/user-journey/journeyRenderer.ts | 9 +++++++-- packages/mermaid/src/docs/config/theming.md | 2 ++ packages/mermaid/src/themes/theme-default.js | 2 ++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 8165530dc..c2d4349bc 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -48,8 +48,12 @@ function drawActorLegend(diagram) { const conf = getConfig().journey; const LEFT_MARGIN = conf.leftMargin; export const draw = function (text, id, version, diagObj) { + console.warn('hello again'); + console.warn(getConfig()); const conf = getConfig().journey; const titleColor = getConfig().themeVariables.titleColor; + const titleFontSize = getConfig().themeVariables.titleFontSize; + const titleFontFamily = getConfig().themeVariables.titleFontFamily; const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode @@ -94,10 +98,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('fill', titleColor); + .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 index 3d935fa93..d854d13ec 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -136,6 +136,8 @@ The theming engine will only recognize hex colors and not color names. So, the v | 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/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 758a46e46..c3caed9e8 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -233,6 +233,8 @@ class Theme { this.fillType5 = adjust(this.secondaryColor, { h: -64 }); this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType7 = adjust(this.secondaryColor, { h: 128 }); + this.titleFontFamily = this.titleFontFamily || '"trebuchet ms", verdana, arial, sans-serif'; + this.titleFontSize = this.titleFontSize || '16px'; /* pie */ this.pie1 = this.pie1 || this.primaryColor;