GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

fix(2689): use correct default sans-serif fonts for actors and tasks

Browse Source 
The previous default font, Open-Sans, does not exist (it is Open Sans).
A generic font family must not be in quotes.
There is no changes to tests, as tests set font-family to Courier
for reproducability.

Fixes 2689
See https://fonts.google.com/specimen/Open+Sans
and https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
This commit is contained in:
Daniel Bartholomae 2022-02-15 14:21:04 +01:00
parent d818551f50
commit 74b1219d62
No known key found for this signature in database
GPG Key ID: 6098B667CF239B44
4 changed files with 24 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/Setup.md
View File

@ -387,7 +387,7 @@ Default value: false
| --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
| actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
**Notes:** Default value: "'Open-Sans", "sans-serif"' **Notes:** Default value: "'Open Sans", sans-serif'
### actorFontWeight ### actorFontWeight
@ -1069,61 +1069,16 @@ Returns **any**
```html ```html
<script> <script>
var config = { var config = { theme: 'default', logLevel: 'fatal', securityLevel: 'strict', startOnLoad: true,
theme: 'default', arrowMarkerAbsolute: false, er: { diagramPadding: 20, layoutDirection: 'TB', minEntityWidth: 100,
logLevel: 'fatal', minEntityHeight: 75, entityPadding: 15, stroke: 'gray', fill: 'honeydew', fontSize: 12, useMaxWidth:
securityLevel: 'strict', true, }, flowchart: { diagramPadding: 8, htmlLabels: true, curve: 'basis', }, sequence: {
startOnLoad: true, diagramMarginX: 50, diagramMarginY: 10, actorMargin: 50, width: 150, height: 65, boxMargin: 10,
arrowMarkerAbsolute: false, boxTextMargin: 5, noteMargin: 10, messageMargin: 35, messageAlign: 'center', mirrorActors: true,
bottomMarginAdj: 1, useMaxWidth: true, rightAngles: false, showSequenceNumbers: false, }, gantt: {
er: { titleTopMargin: 25, barHeight: 20, barGap: 4, topPadding: 50, leftPadding: 75, gridLineStartPadding:
diagramPadding: 20, 35, fontSize: 11, fontFamily: '"Open Sans", sans-serif', numberSectionStyles: 4, axisFormat:
layoutDirection: 'TB', '%Y-%m-%d', topAxis: false, }, }; mermaid.initialize(config);
minEntityWidth: 100,
minEntityHeight: 75,
entityPadding: 15,
stroke: 'gray',
fill: 'honeydew',
fontSize: 12,
useMaxWidth: true,
},
flowchart: {
diagramPadding: 8,
htmlLabels: true,
curve: 'basis',
},
sequence: {
diagramMarginX: 50,
diagramMarginY: 10,
actorMargin: 50,
width: 150,
height: 65,
boxMargin: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
messageAlign: 'center',
mirrorActors: true,
bottomMarginAdj: 1,
useMaxWidth: true,
rightAngles: false,
showSequenceNumbers: false,
},
gantt: {
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 50,
leftPadding: 75,
gridLineStartPadding: 35,
fontSize: 11,
fontFamily: '"Open-Sans", "sans-serif"',
numberSectionStyles: 4,
axisFormat: '%Y-%m-%d',
topAxis: false,
},
};
mermaid.initialize(config);
</script> </script>
``` ```

8
docs/sequenceDiagram.md
View File

@ -300,9 +300,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
```html ```html
<script> <script>
mermaid.initialize({ mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
sequence: { showSequenceNumbers: true },
});
</script> </script>
``` ```
@ -493,8 +491,8 @@ mermaid.sequenceConfig = {
| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false | | mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 | | bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
| actorFontSize | Sets the font size for the actor's description | 14 | | actorFontSize | Sets the font size for the actor's description | 14 |
| actorFontFamily | Sets the font family for the actor's description | "Open-Sans", "sans-serif" | | actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
| actorFontWeight | Sets the font weight for the actor's description | "Open-Sans", "sans-serif" | | actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
| noteFontSize | Sets the font size for actor-attached notes | 14 | | noteFontSize | Sets the font size for actor-attached notes | 14 |
| noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial | | noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial |
| noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial | | noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial |

6
src/defaultConfig.js
View File

@ -410,9 +410,9 @@ const config = {
* | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- | * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
* | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily | * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
* *
* **Notes:** Default value: "'Open-Sans", "sans-serif"' * **Notes:** Default value: "'Open Sans", sans-serif'
*/ */
actorFontFamily: '"Open-Sans", "sans-serif"', actorFontFamily: '"Open Sans", sans-serif',
/** /**
* This sets the font weight of the actor's description * This sets the font weight of the actor's description
@ -802,7 +802,7 @@ const config = {
*/ */
rightAngles: false, rightAngles: false,
taskFontSize: 14, taskFontSize: 14,
taskFontFamily: '"Open-Sans", "sans-serif"', taskFontFamily: '"Open Sans", sans-serif',
taskMargin: 50, taskMargin: 50,
// width of activation box // width of activation box
activationWidth: 10, activationWidth: 10,

2
src/mermaidAPI.js
View File

@ -697,7 +697,7 @@ export default mermaidAPI;
* leftPadding: 75, * leftPadding: 75,
* gridLineStartPadding: 35, * gridLineStartPadding: 35,
* fontSize: 11, * fontSize: 11,
* fontFamily: '"Open-Sans", "sans-serif"', * fontFamily: '"Open Sans", sans-serif',
* numberSectionStyles: 4, * numberSectionStyles: 4,
* axisFormat: '%Y-%m-%d', * axisFormat: '%Y-%m-%d',
* topAxis: false, * topAxis: false,