marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +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';
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', () => {

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

@@ -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

20
cypress/platform/e2e.html
View File

@@ -1,10 +1,22 @@
<html>
<head>
<script src="/e2e.js"></script>
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
<style>
mermaid, svg {
font-family: 'Courier New', Courier, monospace;
.mermaid {
/* 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>
</head>
<body>
@@ -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'
});
</script>
</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) {
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;
}
});
}

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

@@ -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) {

14
src/mermaidAPI.js
View File

@@ -93,9 +93,12 @@ const config = {
* "themeCSS": ".node rect { fill: red; }"
* </pre>
*/
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') {

1
src/themes/class.scss
View File

@@ -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 {

6
src/themes/flowchart.scss
View File

@@ -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;

16
src/themes/gantt.scss
View File

@@ -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);
}

13
src/themes/mermaid.scss
View File

@@ -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';
}

1
src/themes/sequence.scss
View File

@@ -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;
}

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 {
fill: $nodeBorder;
stroke: none;