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

#989 Font configuration

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-10-12 16:53:21 +02:00
parent 2da55993e0
commit 53bdfee057
12 changed files with 98 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/integration/rendering/flowchart.spec.js
View File

@@ -2,7 +2,7 @@
import { imgSnapshotTest } from '../../helpers/util'; import { imgSnapshotTest } from '../../helpers/util';
describe('Flowcart', () => { describe('Flowcart', () => {
it('should render a simple flowchart', () => { it('should render a simple flowchart no htmlLabels', () => {
imgSnapshotTest( imgSnapshotTest(
`graph TD `graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -11,7 +11,19 @@ describe('Flowcart', () => {
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] 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', () => { it('should render a simple flowchart with line breaks', () => {

2
cypress/integration/rendering/gantt.spec.js
View File

@@ -19,7 +19,7 @@ describe('Sequencediagram', () => {
section Critical tasks section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h 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 Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d Future task in critical line :crit, 5d
Create tests for renderer :2d Create tests for renderer :2d

20
cypress/platform/e2e.html
View File

@@ -1,10 +1,22 @@
<html> <html>
<head> <head>
<script src="/e2e.js"></script> <script src="/e2e.js"></script>
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
<style> <style>
mermaid, svg { .mermaid {
font-family: 'Courier New', Courier, monospace; /* font-family: 'Mansalva', cursive;
font-family: 'Mansalva', cursive; */
/* font-family: 'trebuchet ms', verdana, arial; */
} }
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
} */
/* :root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
--mermaid-font-family: '"Lucida Console", Monaco, monospace';
} */
</style> </style>
</head> </head>
<body> <body>
@@ -15,6 +27,10 @@
mermaid.initialize({ mermaid.initialize({
startOnLoad: false, startOnLoad: false,
useMaxWidth: true, 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'
}); });
</script> </script>
</body> </body>

12
src/diagrams/gantt/ganttRenderer.js
View File

@@ -309,10 +309,18 @@ export const draw = function(text, id) {
if (endX + textWidth + 1.5 * conf.leftPadding > w) { if (endX + textWidth + 1.5 * conf.leftPadding > w) {
return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType; return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType;
} else { } else {
return classStr + ' taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType; return (
classStr +
' taskTextOutsideRight taskTextOutside' +
secNum +
' ' +
taskType +
' width-' +
textWidth
);
} }
} else { } else {
return classStr + ' taskText taskText' + secNum + ' ' + taskType; return classStr + ' taskText taskText' + secNum + ' ' + taskType + ' width-' + textWidth;
} }
}); });
} }

1
src/diagrams/sequence/sequenceRenderer.js
View File

@@ -382,6 +382,7 @@ export const setConf = function(cnf) {
keys.forEach(function(key) { keys.forEach(function(key) {
conf[key] = cnf[key]; conf[key] = cnf[key];
}); });
conf.actorFontFamily = cnf.fontFamily;
}; };
const actorActivations = function(actor) { const actorActivations = function(actor) {

14
src/mermaidAPI.js
View File

@@ -93,9 +93,12 @@ const config = {
* "themeCSS": ".node rect { fill: red; }" * "themeCSS": ".node rect { fill: red; }"
* </pre> * </pre>
*/ */
theme: 'default', theme: 'default',
themeCSS: undefined, 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. * This option decides the amount of logging to be used.
@@ -452,6 +455,7 @@ const render = function(id, txt, cb, container) {
d3.select(container) d3.select(container)
.append('div') .append('div')
.attr('id', 'd' + id) .attr('id', 'd' + id)
.attr('style', 'font-family: ' + config.fontFamily)
.append('svg') .append('svg')
.attr('id', id) .attr('id', id)
.attr('width', '100%') .attr('width', '100%')
@@ -493,6 +497,14 @@ const render = function(id, txt, cb, container) {
if (config.themeCSS !== undefined) { if (config.themeCSS !== undefined) {
style += `\n${config.themeCSS}`; 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 // classDef
if (graphType === 'flowchart') { if (graphType === 'flowchart') {

1
src/themes/class.scss
View File

@@ -2,6 +2,7 @@ g.classGroup text {
fill: $nodeBorder; fill: $nodeBorder;
stroke: none; stroke: none;
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 10px; font-size: 10px;
.title { .title {

6
src/themes/flowchart.scss
View File

@@ -1,5 +1,6 @@
.label { .label {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
color: #333; color: #333;
} }
@@ -16,6 +17,9 @@
stroke-width: 1px; stroke-width: 1px;
} }
.node .label {
text-align: center;
}
.node.clickable { .node.clickable {
cursor: pointer; cursor: pointer;
} }
@@ -31,6 +35,7 @@
.edgeLabel { .edgeLabel {
background-color: $edgeLabelBackground; background-color: $edgeLabelBackground;
text-align: center;
} }
.cluster rect { .cluster rect {
@@ -49,6 +54,7 @@ div.mermaidTooltip {
max-width: 200px; max-width: 200px;
padding: 2px; padding: 2px;
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 12px; font-size: 12px;
background: $secondBkg; background: $secondBkg;
border: 1px solid $border2; border: 1px solid $border2;

16
src/themes/gantt.scss
View File

@@ -1,5 +1,10 @@
/** Section styling */ /** Section styling */
.mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
}
.section { .section {
stroke: none; stroke: none;
opacity: 0.2; opacity: 0.2;
@@ -39,6 +44,9 @@
text-anchor: start; text-anchor: start;
font-size: 11px; font-size: 11px;
text-height: 14px; text-height: 14px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
} }
@@ -75,12 +83,18 @@
.taskText { .taskText {
text-anchor: middle; text-anchor: middle;
font-size: 11px; font-size: 11px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: $taskTextDarkColor; fill: $taskTextDarkColor;
text-anchor: start; text-anchor: start;
font-size: 11px; font-size: 11px;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
@@ -233,4 +247,6 @@
text-anchor: middle; text-anchor: middle;
font-size: 18px; font-size: 18px;
fill: $taskTextDarkColor; fill: $taskTextDarkColor;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
} }

13
src/themes/mermaid.scss
View File

@@ -6,7 +6,14 @@
@import 'pie'; @import 'pie';
@import 'state'; @import 'state';
.composit { // .composit {
fill: white; // fill: white;
border-bottom: 1px // 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';
} }

1
src/themes/sequence.scss
View File

@@ -77,6 +77,7 @@ text.actor {
fill: black; fill: black;
stroke: none; stroke: none;
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 14px; font-size: 14px;
} }

7
src/themes/state.scss
View File

@@ -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 { g.stateGroup text {
fill: $nodeBorder; fill: $nodeBorder;
stroke: none; stroke: none;