marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-25 10:20:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

adds font family and font size to the title of the user journey diagram

Browse Source 
Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-01-25 22:01:30 -05:00
parent 3221cbfa0a
commit 16a1a90705
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
View File

@@ -48,8 +48,12 @@ function drawActorLegend(diagram) {
const conf = getConfig().journey; const conf = getConfig().journey;
const LEFT_MARGIN = conf.leftMargin; const LEFT_MARGIN = conf.leftMargin;
export const draw = function (text, id, version, diagObj) { export const draw = function (text, id, version, diagObj) {
console.warn('hello again');
console.warn(getConfig());
const conf = getConfig().journey; const conf = getConfig().journey;
const titleColor = getConfig().themeVariables.titleColor; const titleColor = getConfig().themeVariables.titleColor;
const titleFontSize = getConfig().themeVariables.titleFontSize;
const titleFontFamily = getConfig().themeVariables.titleFontFamily;
const securityLevel = getConfig().securityLevel; const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sandbox mode // Handle root and Document for when rendering in sandbox mode
@@ -94,10 +98,11 @@ export const draw = function (text, id, version, diagObj) {
.append('text') .append('text')
.text(title) .text(title)
.attr('x', LEFT_MARGIN) .attr('x', LEFT_MARGIN)
.attr('font-size', '4ex') .attr('font-size', titleFontSize)
.attr('font-weight', 'bold') .attr('font-weight', 'bold')
.attr('y', 25) .attr('y', 25)
.attr('fill', titleColor); .attr('fill', titleColor)
.attr('font-family', titleFontFamily);
} }
const height = box.stopy - box.starty + 2 * conf.diagramMarginY; const height = box.stopy - box.starty + 2 * conf.diagramMarginY;

2
packages/mermaid/src/docs/config/theming.md
View File

@@ -136,6 +136,8 @@ The theming engine will only recognize hex colors and not color names. So, the v
| fontFamily | trebuchet ms, verdana, arial | | | fontFamily | trebuchet ms, verdana, arial | |
| fontSize | 16px | Font size in pixels | | fontSize | 16px | Font size in pixels |
| titleColor | calculated from textColor | Color to be used for the title text in Journey Diagrams. | | 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 | | 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` | | primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` |
| secondaryColor | calculated from primaryColor | | | secondaryColor | calculated from primaryColor | |

2
packages/mermaid/src/themes/theme-default.js
View File

@@ -233,6 +233,8 @@ class Theme {
this.fillType5 = adjust(this.secondaryColor, { h: -64 }); this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { 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 */ /* pie */
this.pie1 = this.pie1 || this.primaryColor; this.pie1 = this.pie1 || this.primaryColor;