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

#2045 Adjusted styling css to make use of state diagram theme variables

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-05-06 20:26:00 +02:00
parent 785e5552ae
commit 30faf7bfad
7 changed files with 113 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
cypress/platform/knsv.html
View File

@@ -26,49 +26,40 @@
<body> <body>
<div>info below</div> <div>info below</div>
<div class="flex"> <div class="flex">
<div class="mermaid2" style="width: 100%; height: 400px;">
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
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="mermaid2" style="width: 50%; height: 400px;">
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"]
A
B
C
end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
%% The width of composite states does not grow with the title
stateDiagram-v2
[*] --> Off
Off --> On
state MyChoice [[choice]]
On --> MyChoice
MyChoice --> Washing
MyChoice --> Drying
Washing --> Finished
Finished --> [*]
</div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
%%{init:{ %%{int:{
"themeVariables": {
"transitionColor":"red",
"labelColor":"yellow",
"transitionLabelColor":"blue",
"stateBkg":"green",
"compositeBackground":"pink",
"altBackground":"purple",
"clusterTitleBackground":"blue",
"compositeBorder":"red",
"noteBorderColor":"#522",
"noteBkgColor":"#522",
"noteTextColor":"white"
}}}%%
%%{int:{
"themeVariables": {
"altBackground":"purple"
}}}%%
stateDiagram-v2
state CompositeState {
state AnotherCompositeState {
AnotherState --> YetANotherState:a label
}
}
note left of CompositeState
Important information! You can write
notes.
end note
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{int:{
"themeVariables": { "themeVariables": {
"transitionColor":"red", "transitionColor":"red",
"labelColor":"yellow", "labelColor":"yellow",
@@ -87,157 +78,21 @@ stateDiagram
} }
</div> </div>
<div class="mermaid2" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
%%{init:{ sequenceDiagram
"themeVariables": { Alice->>+John: Hello John, how are you?
"transitionColor":"red", Alice->>+John: John, can you hear me?
"labelColor":"yellow", John-->>-Alice: Hi Alice, I can hear you!
"transitionLabelColor":"blue", John-->>-Alice: I feel great!
"stateBkg":"green", note right of John: Hello note reader
"compositeBackground":"pink", </div>
"altBackground":"purple",
"clusterTitleBackground":"blue"
}}}%%
stateDiagram-v2
[*] --> Off
Off --> On
On --> Select
Select --> Washing
Washing --> Finished
Finished --> [*]
state Select
{
state "Program 1" as Prg1
[*] --> Prg1
Prg1 --> [*]
[*] --> Prg2
Prg2 --> [*]
[*] --> Prg3
Prg3 --> [*]
}
state Washing {
state Using_Prg1 {
[*] --> P1Step1
P1Step1 --> P1Step2
P1Step2 --> P1Step3
P1Step3 --> [*]
}
state Using_Prg2 {
[*] --> P2Step1
P2Step1 --> P2Step2
P2Step2 --> P2Step3
P2Step3 --> [*]
}
state Using_Prg3 {
[*] --> Step1
Step1 --> Step2
Step2 --> [*]
}
[*] --> Using_Prg1
[*] --> Using_Prg2
[*] --> Using_Prg3
Using_Prg1 --> [*]
Using_Prg2 --> [*]
Using_Prg3 --> [*]
}
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base' }}%%
%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
flowchart TD
L1 --- L2
L2 --- C
M1 ---> C
R1 .-> R2
R2 <.-> C
C -->|Label 1| E1
C <-- Label 2 ---> E2
C ----> E3
C <-...-> E4
C ======> E5
</div>
<div class="mermaid2" style="width: 50%; height: 21%;">
flowchart LR
A[red text] -->|default style| B(blue text)
C([red text]) -->|default style| D[[blue text]]
E[(red text)] -->|default style| F((blue text))
G>red text] -->|default style| H{blue text}
I{{red text}} -->|default style| J[/blue text/]
K[
ed text] -->|default style| L[/blue text]
M[
ed text/] -->|default style| N[blue text]
linkStyle default color:Sienna;
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
style B stroke:#0000ff,fill:#ccccff,color:#0000ff
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
style F stroke:#0000ff,fill:#ccccff,color:#0000ff
style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
style H stroke:#0000ff,fill:#ccccff,color:#0000ff
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
style J stroke:#0000ff,fill:#ccccff,color:#0000ff
style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
style L stroke:#0000ff,fill:#ccccff,color:#0000ff
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
style N stroke:#0000ff,fill:#ccccff,color:#0000ff
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'base', theme: 'neutral',
arrowMarkerAbsolute: true, arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
@@ -251,7 +106,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
state:{ state:{
nodeSpacing: 50, nodeSpacing: 50,
rankSpacing: 50, rankSpacing: 50,
defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
}, },
fontSize: 18, fontSize: 18,

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

@@ -17,7 +17,7 @@ g.stateGroup text {
} }
g.stateGroup .state-title { g.stateGroup .state-title {
font-weight: bolder; font-weight: bolder;
fill: ${options.labelColor}; fill: ${options.stateLabelColor};
} }
g.stateGroup rect { g.stateGroup rect {
@@ -65,7 +65,7 @@ g.stateGroup line {
} }
.edgeLabel .label rect { .edgeLabel .label rect {
fill: ${options.tertiaryColor}; fill: ${options.labelBackgroundColor};
opacity: 0.5; opacity: 0.5;
} }
.edgeLabel .label text { .edgeLabel .label text {
@@ -76,7 +76,7 @@ g.stateGroup line {
} }
.stateLabel text { .stateLabel text {
fill: ${options.labelColor}; fill: ${options.stateLabelColor};
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
} }
@@ -98,7 +98,7 @@ g.stateGroup line {
.node rect { .node rect {
fill: ${options.stateBkg || options.mainBkg}; fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.nodeBorder}; stroke: ${options.stateBorder || options.nodeBorder};
stroke-width: 1px; stroke-width: 1px;
} }
.node polygon { .node polygon {
@@ -112,12 +112,12 @@ g.stateGroup line {
.statediagram-cluster rect { .statediagram-cluster rect {
fill: ${options.clusterTitleBackground}; fill: ${options.clusterTitleBackground};
stroke: ${options.compositeBorder || options.nodeBorder}; stroke: ${options.stateBorder || options.nodeBorder};
stroke-width: 1px; stroke-width: 1px;
} }
.cluster-label, .nodeLabel { .cluster-label, .nodeLabel {
color: ${options.labelColor}; color: ${options.stateLabelColor};
} }
.statediagram-cluster rect.outer { .statediagram-cluster rect.outer {
@@ -125,7 +125,7 @@ g.stateGroup line {
ry: 5px; ry: 5px;
} }
.statediagram-state .divider { .statediagram-state .divider {
stroke: ${options.nodeBorder}; stroke: ${options.stateBorder || options.nodeBorder};
} }
.statediagram-state .title-state { .statediagram-state .title-state {

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

@@ -49,6 +49,8 @@ class Theme {
this.tertiaryBorderColor = this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode); this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode); this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
this.noteTextColor = this.noteTextColor || '#333';
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor); this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor); this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
@@ -110,8 +112,11 @@ class Theme {
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || this.lineColor; this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor; this.transitionLabelColor = this.labelColor || this.textColor;
this.labelColor = this.labelColor || this.textColor || this.primaryTextColor; /* The color of the text tables of the tstates*/
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg; this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor; this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || this.tertiaryColor; this.altBackground = this.altBackground || this.tertiaryColor;
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg; this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;

14
src/themes/theme-dark.js
View File

@@ -127,8 +127,18 @@ class Theme {
this.taskTextDarkColor = this.darkTextColor; this.taskTextDarkColor = this.darkTextColor;
/* state colors */ /* state colors */
this.labelColor = this.textColor; this.transitionColor = this.transitionColor || this.lineColor;
this.altBackground = lighten(this.background, 20); this.transitionLabelColor = this.transitionLabelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#555';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.fillType0 = this.primaryColor; this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor; this.fillType1 = this.secondaryColor;

14
src/themes/theme-default.js
View File

@@ -139,6 +139,20 @@ class Theme {
this.taskTextOutsideColor = this.taskTextDarkColor; this.taskTextOutsideColor = this.taskTextDarkColor;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#f0f0f0';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
/* class */ /* class */
this.classText = this.primaryTextColor; this.classText = this.primaryTextColor;
/* journey */ /* journey */

14
src/themes/theme-forest.js
View File

@@ -109,6 +109,20 @@ class Theme {
this.activeTaskBkgColor = this.mainBkg; this.activeTaskBkgColor = this.mainBkg;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#f0f0f0';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
/* class */ /* class */
this.classText = this.primaryTextColor; this.classText = this.primaryTextColor;
/* journey */ /* journey */

22
src/themes/theme-neutral.js
View File

@@ -24,7 +24,7 @@ class Theme {
this.lineColor = invert(this.background); this.lineColor = invert(this.background);
this.textColor = invert(this.background); this.textColor = invert(this.background);
this.altBackground = lighten(this.contrast, 55); // this.altBackground = lighten(this.contrast, 55);
this.mainBkg = '#eee'; this.mainBkg = '#eee';
this.secondBkg = 'calculated'; this.secondBkg = 'calculated';
this.lineColor = '#666'; this.lineColor = '#666';
@@ -119,9 +119,9 @@ class Theme {
this.labelBoxBorderColor = this.actorBorder; this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.text; this.labelTextColor = this.text;
this.loopTextColor = this.text; this.loopTextColor = this.text;
this.noteBorderColor = darken(this.note, 60); this.noteBorderColor = '#999';
this.noteBkgColor = this.note; this.noteBkgColor = '#666';
this.noteTextColor = this.actorTextColor; this.noteTextColor = '#fff';
/* Gantt chart variables */ /* Gantt chart variables */
@@ -146,6 +146,20 @@ class Theme {
this.todayLineColor = this.critBkgColor; this.todayLineColor = this.critBkgColor;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || '#000';
this.transitionLabelColor = this.labelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#e0e0e0';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.stateBorder = this.stateBorder || '#000';
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
/* class */ /* class */
this.classText = this.primaryTextColor; this.classText = this.primaryTextColor;
/* journey */ /* journey */