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

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
cypress/platform/knsv.html
View File

@ -26,49 +26,40 @@
<body>
<div>info below</div>
<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%;">
%%{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": {
"transitionColor":"red",
"labelColor":"yellow",
@ -87,157 +78,21 @@ stateDiagram
}
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
%%{init:{
"themeVariables": {
"transitionColor":"red",
"labelColor":"yellow",
"transitionLabelColor":"blue",
"stateBkg":"green",
"compositeBackground":"pink",
"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>
<div class="mermaid" style="width: 100%; height: 20%;">
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
note right of John: Hello note reader
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
theme: 'neutral',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
@ -251,7 +106,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
state:{
nodeSpacing: 50,
rankSpacing: 50,
defaultRenderer: 'dagre-wrapper',
// defaultRenderer: 'dagre-wrapper',
},
fontSize: 18,

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

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

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

@ -49,6 +49,8 @@ class Theme {
this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, 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.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
@ -110,8 +112,11 @@ class Theme {
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
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.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || this.tertiaryColor;
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;

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

@ -127,8 +127,18 @@ class Theme {
this.taskTextDarkColor = this.darkTextColor;
/* state colors */
this.labelColor = this.textColor;
this.altBackground = lighten(this.background, 20);
this.transitionColor = this.transitionColor || this.lineColor;
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.fillType1 = this.secondaryColor;

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

@ -139,6 +139,20 @@ class Theme {
this.taskTextOutsideColor = this.taskTextDarkColor;
/* 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 */
this.classText = this.primaryTextColor;
/* journey */

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

@ -109,6 +109,20 @@ class Theme {
this.activeTaskBkgColor = this.mainBkg;
/* 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 */
this.classText = this.primaryTextColor;
/* journey */

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

@ -24,7 +24,7 @@ class Theme {
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.altBackground = lighten(this.contrast, 55);
// this.altBackground = lighten(this.contrast, 55);
this.mainBkg = '#eee';
this.secondBkg = 'calculated';
this.lineColor = '#666';
@ -119,9 +119,9 @@ class Theme {
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.text;
this.loopTextColor = this.text;
this.noteBorderColor = darken(this.note, 60);
this.noteBkgColor = this.note;
this.noteTextColor = this.actorTextColor;
this.noteBorderColor = '#999';
this.noteBkgColor = '#666';
this.noteTextColor = '#fff';
/* Gantt chart variables */
@ -146,6 +146,20 @@ class Theme {
this.todayLineColor = this.critBkgColor;
/* 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 */
this.classText = this.primaryTextColor;
/* journey */