Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

State diagram themeing #2048

Merged
merged 7 commits into from
May 6, 2021
Merged

State diagram themeing #2048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1337ffe
#2043 Added PieChart theme variable support
ashishjain0512 May 5, 2021
edb06b1
#2043 Added PieChart theme variable support
ashishjain0512 May 6, 2021
a1cd398
knsv May 6, 2021
785e555
Merge branch 'pie_chart_themeing' into state-diagram-themeing
knsv May 6, 2021
30faf7b
#2045 Adjusted styling css to make use of state diagram theme variables
knsv May 6, 2021
2104c98
#2045 Fix for default value
knsv May 6, 2021
30909bd
#2045 Fix for text color in state diagram v1 in dark
knsv May 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
232 changes: 55 additions & 177 deletions cypress/platform/knsv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,195 +26,73 @@
<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%;">
%%{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 "Long state name" as NotShooting {
a-->b
}

</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
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
state CompositeState {
state AnotherCompositeState {
AnotherState --> YetANotherState:a label
}
}
note left of CompositeState
Important information! You can write
notes.
end note

element test_entity {
type: simulation
}

element test_entity2 {
type: word doc
docRef: reqs/test_entity
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{int:{
"themeVariables": {
"transitionColor":"red",
"labelColor":"yellow",
"transitionLabelColor":"blue",
"stateBkg":"green",
"compositeBackground":"pink",
"altBackground":"purple",
"clusterTitleBackground":"blue",
"compositeBorder":"red"
}}}%%
stateDiagram
state CompositeState {
state AnotherCompositeState {
AnotherState --> YetANotherState:a label
}
}


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>
<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: 'neutral',
theme: 'dark',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
Expand All @@ -228,7 +106,7 @@
state:{
nodeSpacing: 50,
rankSpacing: 50,
defaultRenderer: 'dagre-wrapper',
// defaultRenderer: 'dagre-wrapper',
},

fontSize: 18,
Expand Down