marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 19:24:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1543 from mermaid-js/bug/1485_application_of_font_settings

Browse Source 
#1485 Setting proper font settings in the root css
This commit is contained in:
Knut Sveidqvist
2020-07-15 14:00:00 +02:00
committed by GitHub
parent dc2f9c304d fe5d9e486b
commit 389afde138
13 changed files with 326 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/other/webpackUsage.spec.js
View File

@@ -6,6 +6,6 @@ describe('Sequencediagram', () => {
cy.visit(url);
cy.get('body')
.find('svg')
.should('have.length', 2);
.should('have.length', 1);
});
});

40
cypress/platform/bundle-test.js
View File

@@ -1,10 +1,36 @@
import mermaid from '../../dist/mermaid.core'
import mermaid from '../../dist/mermaid.core';
const code = `graph LR
Power_Supply --> Transmitter_A
Power_Supply --> Transmitter_B
Transmitter_A --> D
Transmitter_B --> D`;
mermaid.initialize({
theme: 'forest',
gantt: { axisFormatter: [
['%Y-%m-%d', (d) => {
return d.getDay() === 1
}]
] }
})
fontFamily: '"Lucida Console", Monaco, monospace',
startOnLoad: false,
flowchart: {
htmlLabels: true
},
gantt: {
axisFormatter: [
[
'%Y-%m-%d',
d => {
return d.getDay() === 1;
}
]
]
}
});
mermaid.render(
'the-id-of-the-svg',
code,
svg => {
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
}
// ,document.querySelector('#tmp')
);

27
cypress/platform/webpackUsage.html
View File

@@ -1,22 +1,17 @@
<!doctype html>
<html>
<head>
<style>
/* .mermaid {
font-family: "trebuchet ms", verdana, arial;;
} */
/* .mermaid {
font-family: 'arial';
} */
</style>
</head>
<body>
<div class="mermaid">
graph LR
A-->B
</div>
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
</div>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
</body>

151
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

151
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

14
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
docs/Setup.md
View File

@@ -83,14 +83,15 @@ theme , the CSS style sheet
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
## startOnLoad

20
src/mermaidAPI.js
View File

@@ -271,7 +271,7 @@ const render = function(id, _txt, cb, container) {
}
// classDef
if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
const classes = flowRenderer.getClasses(txt);
for (const className in classes) {
style += `\n.${className} > * { ${classes[className].styles.join(
@@ -289,13 +289,17 @@ const render = function(id, _txt, cb, container) {
style1.innerHTML = scope(style, `#${id}`);
svg.insertBefore(style1, firstChild);
const style2 = document.createElement('style');
const cs = window.getComputedStyle(svg);
style2.innerHTML = `#${id} {
color: ${cs.color};
font: ${cs.font};
}`;
svg.insertBefore(style2, firstChild);
// Verify that the generated svgs are ok before removing this
// const style2 = document.createElement('style');
// const cs = window.getComputedStyle(svg);
// style2.innerHTML = `#d${id} * {
// color: ${cs.color};
// // font: ${cs.font};
// // font-family: Arial;
// // font-size: 24px;
// }`;
// svg.insertBefore(style2, firstChild);
try {
switch (graphType) {

10
src/themes/mermaid.scss
View File

@@ -13,8 +13,9 @@
: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';
font-family: '"trebuchet ms", verdana, arial';
font-family: var(--mermaid-font-family);
font-size: 16px;
}
/* Classes common for multiple diagrams */
@@ -52,3 +53,8 @@
.marker.cross {
stroke: $lineColor;
}
svg {
font-family: var(--mermaid-font-family);
font-size: 24px;
}

5
src/themes/pie.scss
View File

@@ -9,3 +9,8 @@
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}
.legend text {
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 17px;
}