classDef notMoving fill:white
- classDef movement font-style:italic;
- classDef badBadEvent fill:#f00,color:white,font-weight:bold
+ classDef movement font-style:italic
+ classDef badBadEvent
+ fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
classDef statements:
+
+ classDef notMoving fill:white
+
+ classDef movement font-style:italic
+ classDef badBadEvent
+ fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+
+ [*] --> Still:::notMoving
+
+ ...
+ Still --> Moving:::movement
+ ...
+ Moving --> Crash:::movement
+ Crash:::badBadEvent --> [*]
+
+ Note that both the starting state and the end state have styles applied:
+ The start state has the start classDef style
and the end state has the
+ stop classDef style applied.
+
+ stateDiagram + direction TB + + accTitle: This is the accessible title + accDescr: This is an accessible description + + classDef notMoving fill:white + classDef movement font-style:italic + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + + [*] --> Still:::notMoving + Still --> [*] + Still --> Moving:::movement + Moving --> Still + Moving --> Crash:::movement + Crash:::badBadEvent --> [*] ++
stateDiagram-v2
accTitle: very very simple state
@@ -79,6 +129,20 @@ title: Very simple diagram
+ stateDiagram + classDef yourState font-style:italic,font-weight:bold,fill:white + + yswsii: Your state with spaces in it + [*] --> yswsii:::yourState + [*] --> SomeOtherState + SomeOtherState --> YetAnotherState + yswsii --> YetAnotherState + YetAnotherState --> [*] ++
stateDiagram-v2
@@ -127,7 +191,7 @@ title: Very simple diagram
stateDiagram-v2
[*] --> S1
- S1 --> S2: This long line uses a br tag
to create multiple
lines.
+ S1 --> S2: This long line uses a br tag
to create multiple
lines.
S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
@@ -139,7 +203,7 @@ title: Very simple diagram
direction LR
State1: A state with a note
note right of State1
- Important information!
You can write notes.
And\nthey\ncan\nbe\nmulti-\nline.
+ Important information!
You can write notes.
And\nthey\ncan\nbe\nmulti-\nline.
end note
State1 --> State2
note left of State2 : Notes can be to the left of a state\n(like this one).
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index 3687518b2..a9cb72948 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -35,8 +35,8 @@ stateDiagram
```
In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
-a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
- **Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
+a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
+**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
## States
@@ -266,12 +266,12 @@ As with other diagrams (like flowcharts), you can define a style in the diagram
state or states in the diagram.
**These are the current limitations with state diagram classDefs:**
+
1. They cannot be applied to start or end states
2. The cannot be applied to or within composite states
_These are in development and will be available in a future version._
-
You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
like a _CSS class_)
followed by _a name for the style,_
@@ -314,7 +314,6 @@ There are two ways to apply a `classDef` style to a state:
2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
to/from another state)
-
#### 1. `class` statement
A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
@@ -335,7 +334,6 @@ Here is an example applying the `movement` style to the two states `Moving` and
class Moving, Crash movement
```
-
Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
and `badBadEvent`
@@ -392,8 +390,6 @@ stateDiagram
Crash:::badBadEvent --> [*]
```
-
-
## Spaces in state names
Spaces can be added to a state by first defining the state with an id and then referencing the id later.
@@ -402,10 +398,11 @@ In the following example there is a state with the id **yswsii** and description
After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
(**yswsii** has been styled so that it is different from the other states.)
+
```mermaid-example
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
-
+
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState