diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt
index f2b37dcaf..bdde26d14 100644
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -110,6 +110,7 @@ strikethrough
stringifying
struct
STYLECLASS
+STYLEDEF
STYLEOPTS
subcomponent
subcomponents
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 9a1a27abe..7bc467c83 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -558,6 +558,29 @@ stateDiagram-v2
{ logLevel: 0, fontFamily: 'courier' }
);
});
+ it(' can have styles applied ', () => {
+ imgSnapshotTest(
+ `
+stateDiagram-v2
+AState
+style AState fill:#636,border:1px solid red,color:white;
+ `,
+ { logLevel: 0, fontFamily: 'courier' }
+ );
+ });
+ it(' should let styles take preceedence over classes', () => {
+ imgSnapshotTest(
+ `
+stateDiagram-v2
+AState: Should NOT be white
+BState
+classDef exampleStyleClass fill:#fff,color: blue;
+class AState,BState exampleStyleClass
+style AState fill:#636,border:1px solid red,color:white;
+ `,
+ { logLevel: 0, fontFamily: 'courier' }
+ );
+ });
});
it('1433: should render a simple state diagram with a title', () => {
imgSnapshotTest(
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index f94c6d82e..91414e689 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -75,295 +75,45 @@
-
----
-config:
- theme: neo
- look: neo
- layout: elk
- elk.mergeEdges: true
- themeVariables: {}
----
-
-stateDiagram
- direction TB
- A --> B
- A --> C
- A --> D
- A --> E
- A --> F
-
-
----
-config:
- theme: default
- look: classic
- layout: elk
----
-flowchart TD
- subgraph subgraph_ao83d50qa["Subgraph"]
- C("Let me think")
- end
- A["Easter"] -- Get eggs --> B("Go shopping")
- B o--o C
- B --> H["H"]
- C -- One --> D["Laptop"]
- C -- Two --> E["iPhone"]
- C -- Three --> F["fa:fa-car Car"]
- C --> G["G"]
- G --> H
- H --> C & E
- D --> E
- F --> E
- style B stroke:#FF6D00,stroke-width:4px,stroke-dasharray: 0,fill:#FFFFFF
-
-
-
-
----
-config:
- theme: default
- look: classic
- layout: elk
----
-flowchart TD
- subgraph subgraph_ao83d50qa["Subgraph1"]
- C("Let me think")
- end
- A["Easter"] -- Get eggs --> B("Go shopping")
- B o--o C
- B --> H["H"]
- C -- One --> D["Laptop"]
- C -- Two --> E["iPhone"]
- C -- Three --> F["fa:fa-car Car"]
- C --> G["G"]
- G --> H
- H --> C & E
- D --> E
- F --> E
- style B stroke:#FF6D00,stroke-width:4px,stroke-dasharray: 0,fill:#FFFFFF
-
-
-
-flowchart RL
-subgraph Apa["Apa"]
- subgraph Gorilla
- A["Start"]
- B["This is B"]
- end
-end
- A --> B & C["C"]
- Gorilla --> C
+flowchart
+ a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+ a_a --> c --> d_d --> c_c
+ classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+ class a_a apa;
+ click a_a "http://www.aftonbladet.se" "bookmark"
+ click c_c callback "new tooltip"
-
+
flowchart LR
-subgraph Apa["Apa"]
- subgraph Gorilla
- A["Start"]
- B["This is B"]
- end
-end
- A --> B & C["C"]
- Apa --> C
-
-
-flowchart LR
-subgraph Apa["Apa"]
- subgraph Gorilla
- B["This is B"]
- A["Start"]
- end
-end
-Apa --> C
-A --> B & C["C"]
-
-
-stateDiagram
-direction LR
- state Gorilla0 {
- state Apa0 {
- A0 --> B0
- }
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
- }
- Apa0 --> C0
- A0 --> C0
- C1: "`This is C`"
-
-
-flowchart LR
- subgraph Gorilla
- subgraph Apa
- A[A] --- B
- end
- end
- Apa --- C
- A --x C
+
-
----
-config:
- look: neo
- theme: neo
- layout: elk
- elk.mergeEdges: true
- themeVariables: {}
----
-%% 'elk.stress',
-%% 'elk.force'
-%%'elk.mrtree'
-%% 'elk.sporeOverlap
-stateDiagram
- direction TB
- A --> B
- A --> C
- A --> D
- A --> E
- A --> F
- state F {
- Another
- }
- Another --> A
+
+ flowchart LR
+ A:::foo & B:::bar --> C:::foobar
+ classDef foo stroke:#f00
+ classDef bar stroke:#0f0
+ classDef ash color:red
+ class C ash
+ style C stroke:#00f, fill:black
+
-
-
-flowchart LR
- Apa --Hello--> C
-
-
-
- %%{init: {"layout": "dagre", "mergeEdges": false} }%%
-flowchart LR
- A ==> B(This is B)
- A[Start] --> B(Is it?)
- B -- Yes --> C[OK]
- C --> D[Rethink]
- D --> B
- B -. No ...-> E[End]
-
-
-
-
- %%{init: {"layout": "elk", "mergeEdges": true} }%%
-flowchart
- A --> B(This is B)
-
-
- %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+
stateDiagram
- state if_state <<choice>>
- [*] --> IsPositive
- IsPositive --> if_state
- if_state --> False: if n < 0
- if_state --> True : if n >= 0
-
-
- %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
- stateDiagram
- state if_state <<choice>>
- [*] --> IsPositive
- IsPositive --> if_state
- if_state --> False: if n < 0
- if_state --> True : if n >= 0
-
-
- %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
- direction TB
- State T1 {
- T12--> T11
- }
- T1 --> T2
- T11 --> T2
-
-
- %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
-State T1 {
- T21
- --
- T22
- }
-
-
- %%{init: {"layouts": "elk2", "mergeEdges": true} }%%
- stateDiagram
- State S1 {
- direction TB
- S11
- }
- S1 --> S2
-
-
- %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-State T1 {
- T21
- --
- T22
- }
-
-
- %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
- [*] --> T1
- T1 --> T2
- T1 --> T3
- T1 --> T4
-
-
- %%{init: {"layout": "elk"} }%%
-stateDiagram
- [*] --> T1
- T1 --> T2
- T2 --> T3
- T3 --> T1
- T1 --> T3
-
-
-stateDiagram
- State1: The state with a note
- note right of State1
- Important information! You can write
- notes.
- end note
-
-
-stateDiagram-v2
- direction LR
- [*] --> Active
+ A:::foo
+ B:::bar --> C:::foobar
+ classDef foo stroke:#f00
+ classDef bar stroke:#0f0
+ style C stroke:#00f, fill:black, color:white
- state Active {
- direction BT
- [*] --> Inner
- Inner --> NumLockOn : EvNumLockPressed
- }
- %% Outer --> Inner
-
+