diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 89ec06d76..08cd977f5 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -2,7 +2,7 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Flowcart', () => {
- it('should render a simple flowchart', () => {
+ it('should render a simple flowchart no htmlLabels', () => {
imgSnapshotTest(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -11,7 +11,19 @@ describe('Flowcart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- {}
+ { flowchart: { htmlLabels: false } }
+ );
+ });
+ it('should render a simple flowchart with htmlLabels', () => {
+ imgSnapshotTest(
+ `graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
+ { flowchart: { htmlLabels: true } }
);
});
it('should render a simple flowchart with line breaks', () => {
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index faba97d9c..c1bdee040 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -19,7 +19,7 @@ describe('Sequencediagram', () => {
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
+ Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html
index 94850e675..8ad763c4b 100644
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -1,10 +1,22 @@
+
@@ -15,6 +27,10 @@
mermaid.initialize({
startOnLoad: false,
useMaxWidth: true,
+ // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
+ // fontFamily: '\"trebuchet ms\", verdana, arial;'
+ // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
+ fontFamily: '"Mansalva", cursive'
});
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index beee82e17..98f8b66a6 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -309,10 +309,18 @@ export const draw = function(text, id) {
if (endX + textWidth + 1.5 * conf.leftPadding > w) {
return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType;
} else {
- return classStr + ' taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType;
+ return (
+ classStr +
+ ' taskTextOutsideRight taskTextOutside' +
+ secNum +
+ ' ' +
+ taskType +
+ ' width-' +
+ textWidth
+ );
}
} else {
- return classStr + ' taskText taskText' + secNum + ' ' + taskType;
+ return classStr + ' taskText taskText' + secNum + ' ' + taskType + ' width-' + textWidth;
}
});
}
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 949c43944..2dad748d3 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -382,6 +382,7 @@ export const setConf = function(cnf) {
keys.forEach(function(key) {
conf[key] = cnf[key];
});
+ conf.actorFontFamily = cnf.fontFamily;
};
const actorActivations = function(actor) {
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 40dc7fb8e..a75fe6dbf 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -93,9 +93,12 @@ const config = {
* "themeCSS": ".node rect { fill: red; }"
*
*/
-
theme: 'default',
themeCSS: undefined,
+ /**
+ * **fontFamily** The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;
+ */
+ fontFamily: '"trebuchet ms", verdana, arial;',
/**
* This option decides the amount of logging to be used.
@@ -452,6 +455,7 @@ const render = function(id, txt, cb, container) {
d3.select(container)
.append('div')
.attr('id', 'd' + id)
+ .attr('style', 'font-family: ' + config.fontFamily)
.append('svg')
.attr('id', id)
.attr('width', '100%')
@@ -493,6 +497,14 @@ const render = function(id, txt, cb, container) {
if (config.themeCSS !== undefined) {
style += `\n${config.themeCSS}`;
}
+ // user provided theme CSS
+ if (config.fontFamily !== undefined) {
+ style += `\n:root { --mermaid-font-family: ${config.fontFamily}}`;
+ }
+ // user provided theme CSS
+ if (config.altFontFamily !== undefined) {
+ style += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
+ }
// classDef
if (graphType === 'flowchart') {
diff --git a/src/themes/class.scss b/src/themes/class.scss
index 86893cf09..90ac82da1 100644
--- a/src/themes/class.scss
+++ b/src/themes/class.scss
@@ -2,6 +2,7 @@ g.classGroup text {
fill: $nodeBorder;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
font-size: 10px;
.title {
diff --git a/src/themes/flowchart.scss b/src/themes/flowchart.scss
index 91456bcad..4673371b8 100644
--- a/src/themes/flowchart.scss
+++ b/src/themes/flowchart.scss
@@ -1,5 +1,6 @@
.label {
font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
color: #333;
}
@@ -16,6 +17,9 @@
stroke-width: 1px;
}
+.node .label {
+ text-align: center;
+}
.node.clickable {
cursor: pointer;
}
@@ -31,6 +35,7 @@
.edgeLabel {
background-color: $edgeLabelBackground;
+ text-align: center;
}
.cluster rect {
@@ -49,6 +54,7 @@ div.mermaidTooltip {
max-width: 200px;
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
font-size: 12px;
background: $secondBkg;
border: 1px solid $border2;
diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss
index 49c666266..34da04050 100644
--- a/src/themes/gantt.scss
+++ b/src/themes/gantt.scss
@@ -1,5 +1,10 @@
/** Section styling */
+.mermaid-main-font {
+ font-family: "trebuchet ms", verdana, arial;
+ font-family: var(--mermaid-font-family);
+}
+
.section {
stroke: none;
opacity: 0.2;
@@ -39,6 +44,9 @@
text-anchor: start;
font-size: 11px;
text-height: 14px;
+ font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
+
}
@@ -75,12 +83,18 @@
.taskText {
text-anchor: middle;
font-size: 11px;
+ font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
+
}
.taskTextOutsideRight {
fill: $taskTextDarkColor;
text-anchor: start;
font-size: 11px;
+ font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
+
}
.taskTextOutsideLeft {
@@ -233,4 +247,6 @@
text-anchor: middle;
font-size: 18px;
fill: $taskTextDarkColor;
+ font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
}
diff --git a/src/themes/mermaid.scss b/src/themes/mermaid.scss
index adc79fe9d..10e14d3d1 100644
--- a/src/themes/mermaid.scss
+++ b/src/themes/mermaid.scss
@@ -6,7 +6,14 @@
@import 'pie';
@import 'state';
-.composit {
- fill: white;
- border-bottom: 1px
+// .composit {
+// fill: white;
+// border-bottom: 1px
+// }
+
+:root {
+ --mermaid-font-family: '"trebuchet ms", verdana, arial';
+ --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
+ // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
}
+
diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss
index 64097daa3..9d084de48 100644
--- a/src/themes/sequence.scss
+++ b/src/themes/sequence.scss
@@ -77,6 +77,7 @@ text.actor {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
font-size: 14px;
}
diff --git a/src/themes/state.scss b/src/themes/state.scss
index 96f83ca14..35640eb12 100644
--- a/src/themes/state.scss
+++ b/src/themes/state.scss
@@ -1,3 +1,10 @@
+g.stateGroup text {
+ fill: $nodeBorder;
+ stroke: none;
+ font-size: 10px;
+ font-family: 'trebuchet ms', verdana, arial;
+ font-family: var(--mermaid-font-family);
+}
g.stateGroup text {
fill: $nodeBorder;
stroke: none;