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

fix: styles for Sankey, Gantt, and User Journey diagrams

Browse Source
This commit is contained in:
saurabhg772244
2025-01-20 20:05:51 +05:30
parent 1d9c2aab8d
commit c432aec2f6
5 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/mermaid/src/diagrams/gantt/styles.js
View File

@@ -1,7 +1,7 @@
const getStyles = (options) => const getStyles = (options) =>
` `
.mermaid-main-font { .mermaid-main-font {
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
} }
.exclude-range { .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
.sectionTitle { .sectionTitle {
text-anchor: start; text-anchor: start;
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
} }
@@ -58,7 +58,7 @@ const getStyles = (options) =>
} }
.grid .tick text { .grid .tick text {
font-family: ${options.fontFamily}; font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
fill: ${options.textColor}; fill: ${options.textColor};
} }
@@ -86,13 +86,13 @@ const getStyles = (options) =>
.taskText { .taskText {
text-anchor: middle; text-anchor: middle;
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: ${options.taskTextDarkColor}; fill: ${options.taskTextDarkColor};
text-anchor: start; text-anchor: start;
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
text-anchor: middle; text-anchor: middle;
font-size: 18px; font-size: 18px;
fill: ${options.titleColor || options.textColor}; fill: ${options.titleColor || options.textColor};
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
} }
`; `;

2
packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
View File

@@ -4,11 +4,13 @@ import parser from './parser/sankey.jison';
import db from './sankeyDB.js'; import db from './sankeyDB.js';
import renderer from './sankeyRenderer.js'; import renderer from './sankeyRenderer.js';
import { prepareTextForParsing } from './sankeyUtils.js'; import { prepareTextForParsing } from './sankeyUtils.js';
import sankeyStyles from './styles.js';
const originalParse = parser.parse.bind(parser); const originalParse = parser.parse.bind(parser);
parser.parse = (text: string) => originalParse(prepareTextForParsing(text)); parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
export const diagram: DiagramDefinition = { export const diagram: DiagramDefinition = {
styles: sankeyStyles,
parser, parser,
db, db,
renderer, renderer,

1
packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
View File

@@ -136,7 +136,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
svg svg
.append('g') .append('g')
.attr('class', 'node-labels') .attr('class', 'node-labels')
.attr('font-family', 'sans-serif')
.attr('font-size', 14) .attr('font-size', 14)
.selectAll('text') .selectAll('text')
.data(graph.nodes) .data(graph.nodes)

6
packages/mermaid/src/diagrams/sankey/styles.js Normal file
View File

@@ -0,0 +1,6 @@
const getStyles = (options) =>
`.label {
font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
}`;
export default getStyles;

6
packages/mermaid/src/diagrams/user-journey/styles.js
View File

@@ -1,7 +1,6 @@
const getStyles = (options) => const getStyles = (options) =>
`.label { `.label {
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
font-family: var(--mermaid-font-family);
color: ${options.textColor}; color: ${options.textColor};
} }
.mouth { .mouth {
@@ -79,8 +78,7 @@ const getStyles = (options) =>
text-align: center; text-align: center;
max-width: 200px; max-width: 200px;
padding: 2px; padding: 2px;
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
font-family: var(--mermaid-font-family);
font-size: 12px; font-size: 12px;
background: ${options.tertiaryColor}; background: ${options.tertiaryColor};
border: 1px solid ${options.border2}; border: 1px solid ${options.border2};