mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#1542 Setting up base theme for custom theming

This commit is contained in:
Knut Sveidqvist 2020-07-27 10:01:34 +02:00
parent 4e12f959fc
commit 5a7d770a58
10 changed files with 547 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
cypress/platform/showcase_base.html Normal file
View File

@ -0,0 +1,227 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
background: #f4f4f4;
/* background: #0c0c0c; */
font-family: 'Arial';
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
.height {
min-height: 600px;
height: 600px;
}
.height2 {
min-height: 600px;
height: 1300px;
}
.width {
width: 33%;
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h1>Showcases of diagrams</h1>
<div class="flex flex-wrap">
<div class="mermaid width height">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid width height">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid width height" >
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
</div>
<div class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
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
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</div>
<div class="mermaid width height2">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
</div>
<div class="mermaid width height2">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
</div>
<div class="mermaid width height2">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid width height">
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
themeVariables: { primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
});
function callback(){alert('It worked');}
</script>
</body>
</html>

1
docs/_sidebar.md
View File

@ -28,5 +28,6 @@
- Beginner's Guide
- [overview](n00b-overview.md)
- [Getting started - easier](n00b-gettingStarted.md)
- [Theming](theming.md)
- [Diagram syntax intro](n00b-syntaxReference.md)
- [Advanced usage](n00b-advanced.md)

4
docs/index.html
View File

@ -8,8 +8,8 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css">
<script src="//cdn.jsdelivr.net/npm/mermaid@8.6.4/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.6.4/dist/mermaid.min.js"></script> -->
<script src="http://localhost:9000/mermaid.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

251
docs/theming.md
View File

@ -2,7 +2,7 @@
Mermaid as a system for theming in place. With it a site integrator can override a vast majority of attributes used when rendering a diagram.
The settings for a thime can be set globally for the site with the initialize call. The example below highlights how that can look:
The settings for a theme can be set globally for the site with the initialize call. The example below highlights how that can look:
```
// example
@ -11,14 +11,255 @@ The settings for a thime can be set globally for the site with the initialize ca
It is also possible to override theme settings locally in a diagram using directives.
```
// example
%%{init: {'theme':'base'}}%%
graph TD
a --> b
```
The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these three variables:
The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these variables:
* primaryColor - the base color for the theme
* secondaryColor - A compliment color to the primary color. This color is made lighter and used as background in subgraphs for instance
More specific color variables it is åpossible to change:
More specific color variables it is possible to change:
* lineColor
* textColor
Here is an example of a showcase flowchart with theme set to base, with the default variables set:
```mermaid
%%{init: {'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
Here is an example of overriding the primary color and giving everything a little different look.
```mermaid
%%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
As the theming engine is using color codes to calculate values from the base color/base colors it needs proper color values contrain the actual color data. Aliases like color names is not supported so for instance, the color value 'red' will not work but '#ff0000' will work.
## Showcases
When adjusting a theme it might be helpful to look at the theme with these diagrams to evaluate that everything is visiable and looks good.
### flowchart
```
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
### flowchart (beta)
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
### Sequence diagram
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
```
### Gantt
```mermaid
gantt
dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
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
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
### State diagram
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
```
### State diagram (beta)
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
```
### Entity Relations diagram
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
### User journet diagram
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```

6
src/diagrams/er/styles.js
View File

@ -6,9 +6,9 @@ const getStyles = options =>
}
.relationshipLabelBox {
fill: ${options.edgeLabelBackground};
fillopactity: 0;
background-color: ${options.edgeLabelBackground};
fill: ${options.tertiaryColor};
opacity: 0.3;
background-color: ${options.tertiaryColor};
rect {
opacity: 0.5;
}

2
src/diagrams/gantt/styles.js
View File

@ -252,7 +252,7 @@ const getStyles = options =>
.titleText {
text-anchor: middle;
font-size: 18px;
fill: ${options.taskTextDarkColor} ;
fill: ${options.textColor} ;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
}

1
src/diagrams/state/stateRenderer-v2.js
View File

@ -324,7 +324,6 @@ export const draw = function(text, id) {
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}

18
src/diagrams/state/styles.js
View File

@ -61,6 +61,14 @@ g.stateGroup line {
opacity: 0.5;
}
.edgeLabel .label rect {
fill: ${options.tertiaryColor};
opacity: 0.3;
}
.edgeLabel .label text {
fill: ${options.tertiaryTextColor};
}
.stateLabel text {
fill: ${options.labelColor};
font-size: 10px;
@ -70,12 +78,12 @@ g.stateGroup line {
}
.node circle.state-start {
fill: black;
fill: ${options.primaryBorderColor};
stroke: black;
}
.node circle.state-end {
fill: black;
stroke: white;
fill: ${options.primaryBorderColor};
stroke: ${options.background};
stroke-width: 1.5
}
@ -150,6 +158,10 @@ g.stateGroup line {
ry: 0;
}
.statediagram-note text {
fill: ${options.noteTextColor};
}
.statediagram-note .nodeLabel {
color: ${options.noteTextColor};
}

2
src/themes/index.js
View File

@ -1,6 +1,6 @@
import { getThemeVariables as baseThemeVariables } from './theme-base';
import { getThemeVariables as darkThemeVariables } from './theme-dark';
import { getThemeVariables as defaultThemeVariables } from './theme-default';
import { getThemeVariables as defaultThemeVariables } from './theme-base';
import { getThemeVariables as forestThemeVariables } from './theme-forest';
import { getThemeVariables as neutralThemeVariables } from './theme-neutral';

81
src/themes/theme-base.js
View File

@ -1,53 +1,74 @@
import { darken, lighten, adjust } from 'khroma';
import { darken, lighten, adjust, invert } from 'khroma';
const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
class Theme {
constructor() {
/* Base variables */
this.primaryColor = '#9f33be';
this.secondaryColor = '#b20238';
this.tertiaryColor = lighten(this.primaryColor, 30);
this.relationColor = '#000';
/** # Base variables */
/** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
this.background = '#f4f4f4';
// this.background = '#0c0c0c';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false;
// this.darkMode = true;
// this.primaryColor = '#1f1f00';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
// this.primaryColor = '#9f33be';
this.primaryColor = '#f0fff0';
// this.primaryColor = '#fa255e';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#c39ea0';
// this.tertiaryColor = '#f8e5e5';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#ffffde';
// this.tertiaryColor = '#ffffde';
this.secondaryColor = '#dfdfde';
this.tertiaryColor = '#CCCCFF';
this.background = 'white';
this.lineColor = '#333333';
this.border1 = '#9370DB';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.labelBackground = '#e8e8e8';
this.textColor = '#333';
this.noteBkgColor = '#fff5ad';
this.noteBorderColor = '#aaaa33';
this.updateColors();
this.relationColor = '#000';
}
updateColors() {
this.secondBkg = this.tertiaryColor;
/* Main */
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
/* Flowchart variables */
this.nodeBkg = this.primaryColor;
this.mainBkg = this.primaryColor;
this.nodeBorder = darken(this.primaryColor, 23); // border 1
this.nodeBorder = this.primaryBorderColor;
this.clusterBkg = this.tertiaryColor;
this.clusterBorder = darken(this.tertiaryColor, 30);
this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.textColor;
this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.labelBackground;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = lighten(this.border1, 23);
this.actorBorder = this.primaryBorderColor;
this.actorBkg = this.mainBkg;
this.actorTextColor = 'black';
this.actorTextColor = this.primaryTextColor;
this.actorLineColor = 'grey';
this.labelBoxBkgColor = this.actorBkg;
this.signalColor = this.textColor;
@ -55,29 +76,21 @@ class Theme {
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.actorTextColor;
this.loopTextColor = this.actorTextColor;
this.noteBorderColor = this.border2;
this.noteTextColor = this.actorTextColor;
// this.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = 'white';
/* Gantt chart variables */
this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor;
this.sectionBkgColor = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor = this.secondaryColor;
this.sectionBkgColor2 = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = this.primaryColor;
this.taskBorderColor = lighten(this.primaryColor, 23);
this.taskBorderColor = this.primaryBorderColor;
this.taskBkgColor = this.primaryColor;
this.taskTextLightColor = 'white';
this.taskTextColor = 'calculated';
this.taskTextDarkColor = 'black';
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
this.activeTaskBorderColor = this.primaryColor;
this.activeTaskBkgColor = lighten(this.primaryColor, 23);
this.gridColor = 'lightgrey';
@ -86,9 +99,17 @@ class Theme {
this.critBorderColor = '#ff8888';
this.critBkgColor = 'red';
this.todayLineColor = 'red';
this.taskTextColor = this.textColor;
this.taskTextOutsideColor = this.textColor;
this.taskTextLightColor = this.textColor;
this.taskTextColor = this.primaryTextColor;
this.taskTextDarkColor = this.textColor;
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
/* state colors */
this.labelColor = 'black';
this.labelColor = this.primaryTextColor;
this.altBackground = this.tertiaryColor;
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';