| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/stateDiagram.md](../../packages/mermaid/src/docs/syntax/stateDiagram.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # State diagrams |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. |
| 6dd74de | | | 10 | > State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the |
| 6dd74de | | | 11 | > case, while at other times this is a reasonable abstraction." Wikipedia |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make |
| 6dd74de | | | 14 | it easier for users to share diagrams between mermaid and plantUml. |
| 6dd74de | | | 15 | |
| 6dd74de | | | 16 | ```mermaid-example |
| 6dd74de | | | 17 | --- |
| 6dd74de | | | 18 | title: Simple sample |
| 6dd74de | | | 19 | --- |
| 6dd74de | | | 20 | stateDiagram-v2 |
| 6dd74de | | | 21 | [*] --> Still |
| 6dd74de | | | 22 | Still --> [*] |
| 6dd74de | | | 23 | |
| 6dd74de | | | 24 | Still --> Moving |
| 6dd74de | | | 25 | Moving --> Still |
| 6dd74de | | | 26 | Moving --> Crash |
| 6dd74de | | | 27 | Crash --> [*] |
| 6dd74de | | | 28 | ``` |
| 6dd74de | | | 29 | |
| 6dd74de | | | 30 | ```mermaid |
| 6dd74de | | | 31 | --- |
| 6dd74de | | | 32 | title: Simple sample |
| 6dd74de | | | 33 | --- |
| 6dd74de | | | 34 | stateDiagram-v2 |
| 6dd74de | | | 35 | [*] --> Still |
| 6dd74de | | | 36 | Still --> [*] |
| 6dd74de | | | 37 | |
| 6dd74de | | | 38 | Still --> Moving |
| 6dd74de | | | 39 | Moving --> Still |
| 6dd74de | | | 40 | Moving --> Crash |
| 6dd74de | | | 41 | Crash --> [*] |
| 6dd74de | | | 42 | ``` |
| 6dd74de | | | 43 | |
| 6dd74de | | | 44 | Older renderer: |
| 6dd74de | | | 45 | |
| 6dd74de | | | 46 | ```mermaid-example |
| 6dd74de | | | 47 | stateDiagram |
| 6dd74de | | | 48 | [*] --> Still |
| 6dd74de | | | 49 | Still --> [*] |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | Still --> Moving |
| 6dd74de | | | 52 | Moving --> Still |
| 6dd74de | | | 53 | Moving --> Crash |
| 6dd74de | | | 54 | Crash --> [*] |
| 6dd74de | | | 55 | ``` |
| 6dd74de | | | 56 | |
| 6dd74de | | | 57 | ```mermaid |
| 6dd74de | | | 58 | stateDiagram |
| 6dd74de | | | 59 | [*] --> Still |
| 6dd74de | | | 60 | Still --> [*] |
| 6dd74de | | | 61 | |
| 6dd74de | | | 62 | Still --> Moving |
| 6dd74de | | | 63 | Moving --> Still |
| 6dd74de | | | 64 | Moving --> Crash |
| 6dd74de | | | 65 | Crash --> [*] |
| 6dd74de | | | 66 | ``` |
| 6dd74de | | | 67 | |
| 6dd74de | | | 68 | In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via |
| 6dd74de | | | 69 | a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the |
| 6dd74de | | | 70 | **Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to |
| 6dd74de | | | 71 | the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.) |
| 6dd74de | | | 72 | |
| 6dd74de | | | 73 | ## States |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | A state can be declared in multiple ways. The simplest way is to define a state with just an id: |
| 6dd74de | | | 76 | |
| 6dd74de | | | 77 | ```mermaid-example |
| 6dd74de | | | 78 | stateDiagram-v2 |
| 6dd74de | | | 79 | stateId |
| 6dd74de | | | 80 | ``` |
| 6dd74de | | | 81 | |
| 6dd74de | | | 82 | ```mermaid |
| 6dd74de | | | 83 | stateDiagram-v2 |
| 6dd74de | | | 84 | stateId |
| 6dd74de | | | 85 | ``` |
| 6dd74de | | | 86 | |
| 6dd74de | | | 87 | Another way is by using the state keyword with a description as per below: |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | ```mermaid-example |
| 6dd74de | | | 90 | stateDiagram-v2 |
| 6dd74de | | | 91 | state "This is a state description" as s2 |
| 6dd74de | | | 92 | ``` |
| 6dd74de | | | 93 | |
| 6dd74de | | | 94 | ```mermaid |
| 6dd74de | | | 95 | stateDiagram-v2 |
| 6dd74de | | | 96 | state "This is a state description" as s2 |
| 6dd74de | | | 97 | ``` |
| 6dd74de | | | 98 | |
| 6dd74de | | | 99 | Another way to define a state with a description is to define the state id followed by a colon and the description: |
| 6dd74de | | | 100 | |
| 6dd74de | | | 101 | ```mermaid-example |
| 6dd74de | | | 102 | stateDiagram-v2 |
| 6dd74de | | | 103 | s2 : This is a state description |
| 6dd74de | | | 104 | ``` |
| 6dd74de | | | 105 | |
| 6dd74de | | | 106 | ```mermaid |
| 6dd74de | | | 107 | stateDiagram-v2 |
| 6dd74de | | | 108 | s2 : This is a state description |
| 6dd74de | | | 109 | ``` |
| 6dd74de | | | 110 | |
| 6dd74de | | | 111 | ## Transitions |
| 6dd74de | | | 112 | |
| 6dd74de | | | 113 | Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->". |
| 6dd74de | | | 114 | |
| 6dd74de | | | 115 | When you define a transition between two states and the states are not already defined, the undefined states are defined |
| 6dd74de | | | 116 | with the id from the transition. You can later add descriptions to states defined this way. |
| 6dd74de | | | 117 | |
| 6dd74de | | | 118 | ```mermaid-example |
| 6dd74de | | | 119 | stateDiagram-v2 |
| 6dd74de | | | 120 | s1 --> s2 |
| 6dd74de | | | 121 | ``` |
| 6dd74de | | | 122 | |
| 6dd74de | | | 123 | ```mermaid |
| 6dd74de | | | 124 | stateDiagram-v2 |
| 6dd74de | | | 125 | s1 --> s2 |
| 6dd74de | | | 126 | ``` |
| 6dd74de | | | 127 | |
| 6dd74de | | | 128 | It is possible to add text to a transition to describe what it represents: |
| 6dd74de | | | 129 | |
| 6dd74de | | | 130 | ```mermaid-example |
| 6dd74de | | | 131 | stateDiagram-v2 |
| 6dd74de | | | 132 | s1 --> s2: A transition |
| 6dd74de | | | 133 | ``` |
| 6dd74de | | | 134 | |
| 6dd74de | | | 135 | ```mermaid |
| 6dd74de | | | 136 | stateDiagram-v2 |
| 6dd74de | | | 137 | s1 --> s2: A transition |
| 6dd74de | | | 138 | ``` |
| 6dd74de | | | 139 | |
| 6dd74de | | | 140 | ## Start and End |
| 6dd74de | | | 141 | |
| 6dd74de | | | 142 | There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and |
| 6dd74de | | | 143 | the direction of the transition to it defines it either as a start or a stop state. |
| 6dd74de | | | 144 | |
| 6dd74de | | | 145 | ```mermaid-example |
| 6dd74de | | | 146 | stateDiagram-v2 |
| 6dd74de | | | 147 | [*] --> s1 |
| 6dd74de | | | 148 | s1 --> [*] |
| 6dd74de | | | 149 | ``` |
| 6dd74de | | | 150 | |
| 6dd74de | | | 151 | ```mermaid |
| 6dd74de | | | 152 | stateDiagram-v2 |
| 6dd74de | | | 153 | [*] --> s1 |
| 6dd74de | | | 154 | s1 --> [*] |
| 6dd74de | | | 155 | ``` |
| 6dd74de | | | 156 | |
| 6dd74de | | | 157 | ## Composite states |
| 6dd74de | | | 158 | |
| 6dd74de | | | 159 | In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can |
| 6dd74de | | | 160 | have several internal states. These are called composite states in this terminology. |
| 6dd74de | | | 161 | |
| 6dd74de | | | 162 | In order to define a composite state you need to use the state keyword followed by an id and the body of the composite |
| 6dd74de | | | 163 | state between {}. You can name a composite state on a separate line just like a simple state. See the example below: |
| 6dd74de | | | 164 | |
| 6dd74de | | | 165 | ```mermaid-example |
| 6dd74de | | | 166 | stateDiagram-v2 |
| 6dd74de | | | 167 | [*] --> First |
| 6dd74de | | | 168 | state First { |
| 6dd74de | | | 169 | [*] --> second |
| 6dd74de | | | 170 | second --> [*] |
| 6dd74de | | | 171 | } |
| 6dd74de | | | 172 | |
| 6dd74de | | | 173 | [*] --> NamedComposite |
| 6dd74de | | | 174 | NamedComposite: Another Composite |
| 6dd74de | | | 175 | state NamedComposite { |
| 6dd74de | | | 176 | [*] --> namedSimple |
| 6dd74de | | | 177 | namedSimple --> [*] |
| 6dd74de | | | 178 | namedSimple: Another simple |
| 6dd74de | | | 179 | } |
| 6dd74de | | | 180 | ``` |
| 6dd74de | | | 181 | |
| 6dd74de | | | 182 | ```mermaid |
| 6dd74de | | | 183 | stateDiagram-v2 |
| 6dd74de | | | 184 | [*] --> First |
| 6dd74de | | | 185 | state First { |
| 6dd74de | | | 186 | [*] --> second |
| 6dd74de | | | 187 | second --> [*] |
| 6dd74de | | | 188 | } |
| 6dd74de | | | 189 | |
| 6dd74de | | | 190 | [*] --> NamedComposite |
| 6dd74de | | | 191 | NamedComposite: Another Composite |
| 6dd74de | | | 192 | state NamedComposite { |
| 6dd74de | | | 193 | [*] --> namedSimple |
| 6dd74de | | | 194 | namedSimple --> [*] |
| 6dd74de | | | 195 | namedSimple: Another simple |
| 6dd74de | | | 196 | } |
| 6dd74de | | | 197 | ``` |
| 6dd74de | | | 198 | |
| 6dd74de | | | 199 | You can do this in several layers: |
| 6dd74de | | | 200 | |
| 6dd74de | | | 201 | ```mermaid-example |
| 6dd74de | | | 202 | stateDiagram-v2 |
| 6dd74de | | | 203 | [*] --> First |
| 6dd74de | | | 204 | |
| 6dd74de | | | 205 | state First { |
| 6dd74de | | | 206 | [*] --> Second |
| 6dd74de | | | 207 | |
| 6dd74de | | | 208 | state Second { |
| 6dd74de | | | 209 | [*] --> second |
| 6dd74de | | | 210 | second --> Third |
| 6dd74de | | | 211 | |
| 6dd74de | | | 212 | state Third { |
| 6dd74de | | | 213 | [*] --> third |
| 6dd74de | | | 214 | third --> [*] |
| 6dd74de | | | 215 | } |
| 6dd74de | | | 216 | } |
| 6dd74de | | | 217 | } |
| 6dd74de | | | 218 | ``` |
| 6dd74de | | | 219 | |
| 6dd74de | | | 220 | ```mermaid |
| 6dd74de | | | 221 | stateDiagram-v2 |
| 6dd74de | | | 222 | [*] --> First |
| 6dd74de | | | 223 | |
| 6dd74de | | | 224 | state First { |
| 6dd74de | | | 225 | [*] --> Second |
| 6dd74de | | | 226 | |
| 6dd74de | | | 227 | state Second { |
| 6dd74de | | | 228 | [*] --> second |
| 6dd74de | | | 229 | second --> Third |
| 6dd74de | | | 230 | |
| 6dd74de | | | 231 | state Third { |
| 6dd74de | | | 232 | [*] --> third |
| 6dd74de | | | 233 | third --> [*] |
| 6dd74de | | | 234 | } |
| 6dd74de | | | 235 | } |
| 6dd74de | | | 236 | } |
| 6dd74de | | | 237 | ``` |
| 6dd74de | | | 238 | |
| 6dd74de | | | 239 | You can also define transitions also between composite states: |
| 6dd74de | | | 240 | |
| 6dd74de | | | 241 | ```mermaid-example |
| 6dd74de | | | 242 | stateDiagram-v2 |
| 6dd74de | | | 243 | [*] --> First |
| 6dd74de | | | 244 | First --> Second |
| 6dd74de | | | 245 | First --> Third |
| 6dd74de | | | 246 | |
| 6dd74de | | | 247 | state First { |
| 6dd74de | | | 248 | [*] --> fir |
| 6dd74de | | | 249 | fir --> [*] |
| 6dd74de | | | 250 | } |
| 6dd74de | | | 251 | state Second { |
| 6dd74de | | | 252 | [*] --> sec |
| 6dd74de | | | 253 | sec --> [*] |
| 6dd74de | | | 254 | } |
| 6dd74de | | | 255 | state Third { |
| 6dd74de | | | 256 | [*] --> thi |
| 6dd74de | | | 257 | thi --> [*] |
| 6dd74de | | | 258 | } |
| 6dd74de | | | 259 | ``` |
| 6dd74de | | | 260 | |
| 6dd74de | | | 261 | ```mermaid |
| 6dd74de | | | 262 | stateDiagram-v2 |
| 6dd74de | | | 263 | [*] --> First |
| 6dd74de | | | 264 | First --> Second |
| 6dd74de | | | 265 | First --> Third |
| 6dd74de | | | 266 | |
| 6dd74de | | | 267 | state First { |
| 6dd74de | | | 268 | [*] --> fir |
| 6dd74de | | | 269 | fir --> [*] |
| 6dd74de | | | 270 | } |
| 6dd74de | | | 271 | state Second { |
| 6dd74de | | | 272 | [*] --> sec |
| 6dd74de | | | 273 | sec --> [*] |
| 6dd74de | | | 274 | } |
| 6dd74de | | | 275 | state Third { |
| 6dd74de | | | 276 | [*] --> thi |
| 6dd74de | | | 277 | thi --> [*] |
| 6dd74de | | | 278 | } |
| 6dd74de | | | 279 | ``` |
| 6dd74de | | | 280 | |
| 6dd74de | | | 281 | _You cannot define transitions between internal states belonging to different composite states_ |
| 6dd74de | | | 282 | |
| 6dd74de | | | 283 | ## Choice |
| 6dd74de | | | 284 | |
| 6dd74de | | | 285 | Sometimes you need to model a choice between two or more paths, you can do so using <\<choice>>. |
| 6dd74de | | | 286 | |
| 6dd74de | | | 287 | ```mermaid-example |
| 6dd74de | | | 288 | stateDiagram-v2 |
| 6dd74de | | | 289 | state if_state <<choice>> |
| 6dd74de | | | 290 | [*] --> IsPositive |
| 6dd74de | | | 291 | IsPositive --> if_state |
| 6dd74de | | | 292 | if_state --> False: if n < 0 |
| 6dd74de | | | 293 | if_state --> True : if n >= 0 |
| 6dd74de | | | 294 | ``` |
| 6dd74de | | | 295 | |
| 6dd74de | | | 296 | ```mermaid |
| 6dd74de | | | 297 | stateDiagram-v2 |
| 6dd74de | | | 298 | state if_state <<choice>> |
| 6dd74de | | | 299 | [*] --> IsPositive |
| 6dd74de | | | 300 | IsPositive --> if_state |
| 6dd74de | | | 301 | if_state --> False: if n < 0 |
| 6dd74de | | | 302 | if_state --> True : if n >= 0 |
| 6dd74de | | | 303 | ``` |
| 6dd74de | | | 304 | |
| 6dd74de | | | 305 | ## Forks |
| 6dd74de | | | 306 | |
| 6dd74de | | | 307 | It is possible to specify a fork in the diagram using <\<fork>> <\<join>>. |
| 6dd74de | | | 308 | |
| 6dd74de | | | 309 | ```mermaid-example |
| 6dd74de | | | 310 | stateDiagram-v2 |
| 6dd74de | | | 311 | state fork_state <<fork>> |
| 6dd74de | | | 312 | [*] --> fork_state |
| 6dd74de | | | 313 | fork_state --> State2 |
| 6dd74de | | | 314 | fork_state --> State3 |
| 6dd74de | | | 315 | |
| 6dd74de | | | 316 | state join_state <<join>> |
| 6dd74de | | | 317 | State2 --> join_state |
| 6dd74de | | | 318 | State3 --> join_state |
| 6dd74de | | | 319 | join_state --> State4 |
| 6dd74de | | | 320 | State4 --> [*] |
| 6dd74de | | | 321 | ``` |
| 6dd74de | | | 322 | |
| 6dd74de | | | 323 | ```mermaid |
| 6dd74de | | | 324 | stateDiagram-v2 |
| 6dd74de | | | 325 | state fork_state <<fork>> |
| 6dd74de | | | 326 | [*] --> fork_state |
| 6dd74de | | | 327 | fork_state --> State2 |
| 6dd74de | | | 328 | fork_state --> State3 |
| 6dd74de | | | 329 | |
| 6dd74de | | | 330 | state join_state <<join>> |
| 6dd74de | | | 331 | State2 --> join_state |
| 6dd74de | | | 332 | State3 --> join_state |
| 6dd74de | | | 333 | join_state --> State4 |
| 6dd74de | | | 334 | State4 --> [*] |
| 6dd74de | | | 335 | ``` |
| 6dd74de | | | 336 | |
| 6dd74de | | | 337 | ## Notes |
| 6dd74de | | | 338 | |
| 6dd74de | | | 339 | Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams. |
| 6dd74de | | | 340 | |
| 6dd74de | | | 341 | Here you can choose to put the note to the _right of_ or to the _left of_ a node. |
| 6dd74de | | | 342 | |
| 6dd74de | | | 343 | ```mermaid-example |
| 6dd74de | | | 344 | stateDiagram-v2 |
| 6dd74de | | | 345 | State1: The state with a note |
| 6dd74de | | | 346 | note right of State1 |
| 6dd74de | | | 347 | Important information! You can write |
| 6dd74de | | | 348 | notes. |
| 6dd74de | | | 349 | end note |
| 6dd74de | | | 350 | State1 --> State2 |
| 6dd74de | | | 351 | note left of State2 : This is the note to the left. |
| 6dd74de | | | 352 | ``` |
| 6dd74de | | | 353 | |
| 6dd74de | | | 354 | ```mermaid |
| 6dd74de | | | 355 | stateDiagram-v2 |
| 6dd74de | | | 356 | State1: The state with a note |
| 6dd74de | | | 357 | note right of State1 |
| 6dd74de | | | 358 | Important information! You can write |
| 6dd74de | | | 359 | notes. |
| 6dd74de | | | 360 | end note |
| 6dd74de | | | 361 | State1 --> State2 |
| 6dd74de | | | 362 | note left of State2 : This is the note to the left. |
| 6dd74de | | | 363 | ``` |
| 6dd74de | | | 364 | |
| 6dd74de | | | 365 | ## Concurrency |
| 6dd74de | | | 366 | |
| 6dd74de | | | 367 | As in plantUml you can specify concurrency using the -- symbol. |
| 6dd74de | | | 368 | |
| 6dd74de | | | 369 | ```mermaid-example |
| 6dd74de | | | 370 | stateDiagram-v2 |
| 6dd74de | | | 371 | [*] --> Active |
| 6dd74de | | | 372 | |
| 6dd74de | | | 373 | state Active { |
| 6dd74de | | | 374 | [*] --> NumLockOff |
| 6dd74de | | | 375 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 376 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 377 | -- |
| 6dd74de | | | 378 | [*] --> CapsLockOff |
| 6dd74de | | | 379 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 380 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 381 | -- |
| 6dd74de | | | 382 | [*] --> ScrollLockOff |
| 6dd74de | | | 383 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 384 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 385 | } |
| 6dd74de | | | 386 | ``` |
| 6dd74de | | | 387 | |
| 6dd74de | | | 388 | ```mermaid |
| 6dd74de | | | 389 | stateDiagram-v2 |
| 6dd74de | | | 390 | [*] --> Active |
| 6dd74de | | | 391 | |
| 6dd74de | | | 392 | state Active { |
| 6dd74de | | | 393 | [*] --> NumLockOff |
| 6dd74de | | | 394 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 395 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 396 | -- |
| 6dd74de | | | 397 | [*] --> CapsLockOff |
| 6dd74de | | | 398 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 399 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 400 | -- |
| 6dd74de | | | 401 | [*] --> ScrollLockOff |
| 6dd74de | | | 402 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 403 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 404 | } |
| 6dd74de | | | 405 | ``` |
| 6dd74de | | | 406 | |
| 6dd74de | | | 407 | ## Setting the direction of the diagram |
| 6dd74de | | | 408 | |
| 6dd74de | | | 409 | With state diagrams you can use the direction statement to set the direction which the diagram will render like in this |
| 6dd74de | | | 410 | example. |
| 6dd74de | | | 411 | |
| 6dd74de | | | 412 | ```mermaid-example |
| 6dd74de | | | 413 | stateDiagram |
| 6dd74de | | | 414 | direction LR |
| 6dd74de | | | 415 | [*] --> A |
| 6dd74de | | | 416 | A --> B |
| 6dd74de | | | 417 | B --> C |
| 6dd74de | | | 418 | state B { |
| 6dd74de | | | 419 | direction LR |
| 6dd74de | | | 420 | a --> b |
| 6dd74de | | | 421 | } |
| 6dd74de | | | 422 | B --> D |
| 6dd74de | | | 423 | ``` |
| 6dd74de | | | 424 | |
| 6dd74de | | | 425 | ```mermaid |
| 6dd74de | | | 426 | stateDiagram |
| 6dd74de | | | 427 | direction LR |
| 6dd74de | | | 428 | [*] --> A |
| 6dd74de | | | 429 | A --> B |
| 6dd74de | | | 430 | B --> C |
| 6dd74de | | | 431 | state B { |
| 6dd74de | | | 432 | direction LR |
| 6dd74de | | | 433 | a --> b |
| 6dd74de | | | 434 | } |
| 6dd74de | | | 435 | B --> D |
| 6dd74de | | | 436 | ``` |
| 6dd74de | | | 437 | |
| 6dd74de | | | 438 | ## Comments |
| 6dd74de | | | 439 | |
| 6dd74de | | | 440 | Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their |
| 6dd74de | | | 441 | own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next |
| 6dd74de | | | 442 | newline will be treated as a comment, including any diagram syntax |
| 6dd74de | | | 443 | |
| 6dd74de | | | 444 | ```mermaid-example |
| 6dd74de | | | 445 | stateDiagram-v2 |
| 6dd74de | | | 446 | [*] --> Still |
| 6dd74de | | | 447 | Still --> [*] |
| 6dd74de | | | 448 | %% this is a comment |
| 6dd74de | | | 449 | Still --> Moving |
| 6dd74de | | | 450 | Moving --> Still %% another comment |
| 6dd74de | | | 451 | Moving --> Crash |
| 6dd74de | | | 452 | Crash --> [*] |
| 6dd74de | | | 453 | ``` |
| 6dd74de | | | 454 | |
| 6dd74de | | | 455 | ```mermaid |
| 6dd74de | | | 456 | stateDiagram-v2 |
| 6dd74de | | | 457 | [*] --> Still |
| 6dd74de | | | 458 | Still --> [*] |
| 6dd74de | | | 459 | %% this is a comment |
| 6dd74de | | | 460 | Still --> Moving |
| 6dd74de | | | 461 | Moving --> Still %% another comment |
| 6dd74de | | | 462 | Moving --> Crash |
| 6dd74de | | | 463 | Crash --> [*] |
| 6dd74de | | | 464 | ``` |
| 6dd74de | | | 465 | |
| 6dd74de | | | 466 | ## Styling with classDefs |
| 6dd74de | | | 467 | |
| 6dd74de | | | 468 | As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a |
| 6dd74de | | | 469 | state or states in the diagram. |
| 6dd74de | | | 470 | |
| 6dd74de | | | 471 | **These are the current limitations with state diagram classDefs:** |
| 6dd74de | | | 472 | |
| 6dd74de | | | 473 | 1. Cannot be applied to start or end states |
| 6dd74de | | | 474 | 2. Cannot be applied to or within composite states |
| 6dd74de | | | 475 | |
| 6dd74de | | | 476 | _These are in development and will be available in a future version._ |
| 6dd74de | | | 477 | |
| 6dd74de | | | 478 | You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something |
| 6dd74de | | | 479 | like a _CSS class_) |
| 6dd74de | | | 480 | followed by _a name for the style,_ |
| 6dd74de | | | 481 | and then one or more _property-value pairs_. Each _property-value pair_ is |
| 6dd74de | | | 482 | a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._ |
| 6dd74de | | | 483 | |
| 6dd74de | | | 484 | Here is an example of a classDef with just one property-value pair: |
| 6dd74de | | | 485 | |
| 6dd74de | | | 486 | ```txt |
| 6dd74de | | | 487 | classDef movement font-style:italic; |
| 6dd74de | | | 488 | ``` |
| 6dd74de | | | 489 | |
| 6dd74de | | | 490 | where |
| 6dd74de | | | 491 | |
| 6dd74de | | | 492 | - the _name_ of the style is `movement` |
| 6dd74de | | | 493 | - the only _property_ is `font-style` and its _value_ is `italic` |
| 6dd74de | | | 494 | |
| 6dd74de | | | 495 | If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._ |
| 6dd74de | | | 496 | |
| 6dd74de | | | 497 | Here is an example with three property-value pairs: |
| 6dd74de | | | 498 | |
| 6dd74de | | | 499 | ```txt |
| 6dd74de | | | 500 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 501 | ``` |
| 6dd74de | | | 502 | |
| 6dd74de | | | 503 | where |
| 6dd74de | | | 504 | |
| 6dd74de | | | 505 | - the _name_ of the style is `badBadEvent` |
| 6dd74de | | | 506 | - the first _property_ is `fill` and its _value_ is `#f00` |
| 6dd74de | | | 507 | - the second _property_ is `color` and its _value_ is `white` |
| 6dd74de | | | 508 | - the third _property_ is `font-weight` and its _value_ is `bold` |
| 6dd74de | | | 509 | - the fourth _property_ is `stroke-width` and its _value_ is `2px` |
| 6dd74de | | | 510 | - the fifth _property_ is `stroke` and its _value_ is `yellow` |
| 6dd74de | | | 511 | |
| 6dd74de | | | 512 | ### Apply classDef styles to states |
| 6dd74de | | | 513 | |
| 6dd74de | | | 514 | There are two ways to apply a `classDef` style to a state: |
| 6dd74de | | | 515 | |
| 6dd74de | | | 516 | 1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or |
| 6dd74de | | | 517 | 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 |
| 6dd74de | | | 518 | to/from another state) |
| 6dd74de | | | 519 | |
| 6dd74de | | | 520 | #### 1. `class` statement |
| 6dd74de | | | 521 | |
| 6dd74de | | | 522 | A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is: |
| 6dd74de | | | 523 | |
| 6dd74de | | | 524 | ```txt |
| 6dd74de | | | 525 | class [one or more state names, separated by commas] [name of a style defined with classDef] |
| 6dd74de | | | 526 | ``` |
| 6dd74de | | | 527 | |
| 6dd74de | | | 528 | Here is an example applying the `badBadEvent` style to a state named `Crash`: |
| 6dd74de | | | 529 | |
| 6dd74de | | | 530 | ```txt |
| 6dd74de | | | 531 | class Crash badBadEvent |
| 6dd74de | | | 532 | ``` |
| 6dd74de | | | 533 | |
| 6dd74de | | | 534 | Here is an example applying the `movement` style to the two states `Moving` and `Crash`: |
| 6dd74de | | | 535 | |
| 6dd74de | | | 536 | ```txt |
| 6dd74de | | | 537 | class Moving, Crash movement |
| 6dd74de | | | 538 | ``` |
| 6dd74de | | | 539 | |
| 6dd74de | | | 540 | Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement` |
| 6dd74de | | | 541 | and `badBadEvent` |
| 6dd74de | | | 542 | |
| 6dd74de | | | 543 | ```mermaid-example |
| 6dd74de | | | 544 | stateDiagram |
| 6dd74de | | | 545 | direction TB |
| 6dd74de | | | 546 | |
| 6dd74de | | | 547 | accTitle: This is the accessible title |
| 6dd74de | | | 548 | accDescr: This is an accessible description |
| 6dd74de | | | 549 | |
| 6dd74de | | | 550 | classDef notMoving fill:white |
| 6dd74de | | | 551 | classDef movement font-style:italic |
| 6dd74de | | | 552 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 553 | |
| 6dd74de | | | 554 | [*]--> Still |
| 6dd74de | | | 555 | Still --> [*] |
| 6dd74de | | | 556 | Still --> Moving |
| 6dd74de | | | 557 | Moving --> Still |
| 6dd74de | | | 558 | Moving --> Crash |
| 6dd74de | | | 559 | Crash --> [*] |
| 6dd74de | | | 560 | |
| 6dd74de | | | 561 | class Still notMoving |
| 6dd74de | | | 562 | class Moving, Crash movement |
| 6dd74de | | | 563 | class Crash badBadEvent |
| 6dd74de | | | 564 | class end badBadEvent |
| 6dd74de | | | 565 | ``` |
| 6dd74de | | | 566 | |
| 6dd74de | | | 567 | ```mermaid |
| 6dd74de | | | 568 | stateDiagram |
| 6dd74de | | | 569 | direction TB |
| 6dd74de | | | 570 | |
| 6dd74de | | | 571 | accTitle: This is the accessible title |
| 6dd74de | | | 572 | accDescr: This is an accessible description |
| 6dd74de | | | 573 | |
| 6dd74de | | | 574 | classDef notMoving fill:white |
| 6dd74de | | | 575 | classDef movement font-style:italic |
| 6dd74de | | | 576 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 577 | |
| 6dd74de | | | 578 | [*]--> Still |
| 6dd74de | | | 579 | Still --> [*] |
| 6dd74de | | | 580 | Still --> Moving |
| 6dd74de | | | 581 | Moving --> Still |
| 6dd74de | | | 582 | Moving --> Crash |
| 6dd74de | | | 583 | Crash --> [*] |
| 6dd74de | | | 584 | |
| 6dd74de | | | 585 | class Still notMoving |
| 6dd74de | | | 586 | class Moving, Crash movement |
| 6dd74de | | | 587 | class Crash badBadEvent |
| 6dd74de | | | 588 | class end badBadEvent |
| 6dd74de | | | 589 | ``` |
| 6dd74de | | | 590 | |
| 6dd74de | | | 591 | #### 2. `:::` operator to apply a style to a state |
| 6dd74de | | | 592 | |
| 6dd74de | | | 593 | You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is |
| 6dd74de | | | 594 | |
| 6dd74de | | | 595 | ```txt |
| 6dd74de | | | 596 | [state]:::[style name] |
| 6dd74de | | | 597 | ``` |
| 6dd74de | | | 598 | |
| 6dd74de | | | 599 | You can use this in a diagram within a statement using a class. This includes the start and end states. For example: |
| 6dd74de | | | 600 | |
| 6dd74de | | | 601 | ```mermaid-example |
| 6dd74de | | | 602 | stateDiagram |
| 6dd74de | | | 603 | direction TB |
| 6dd74de | | | 604 | |
| 6dd74de | | | 605 | accTitle: This is the accessible title |
| 6dd74de | | | 606 | accDescr: This is an accessible description |
| 6dd74de | | | 607 | |
| 6dd74de | | | 608 | classDef notMoving fill:white |
| 6dd74de | | | 609 | classDef movement font-style:italic; |
| 6dd74de | | | 610 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 611 | |
| 6dd74de | | | 612 | [*] --> Still:::notMoving |
| 6dd74de | | | 613 | Still --> [*] |
| 6dd74de | | | 614 | Still --> Moving:::movement |
| 6dd74de | | | 615 | Moving --> Still |
| 6dd74de | | | 616 | Moving --> Crash:::movement |
| 6dd74de | | | 617 | Crash:::badBadEvent --> [*] |
| 6dd74de | | | 618 | ``` |
| 6dd74de | | | 619 | |
| 6dd74de | | | 620 | ```mermaid |
| 6dd74de | | | 621 | stateDiagram |
| 6dd74de | | | 622 | direction TB |
| 6dd74de | | | 623 | |
| 6dd74de | | | 624 | accTitle: This is the accessible title |
| 6dd74de | | | 625 | accDescr: This is an accessible description |
| 6dd74de | | | 626 | |
| 6dd74de | | | 627 | classDef notMoving fill:white |
| 6dd74de | | | 628 | classDef movement font-style:italic; |
| 6dd74de | | | 629 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 630 | |
| 6dd74de | | | 631 | [*] --> Still:::notMoving |
| 6dd74de | | | 632 | Still --> [*] |
| 6dd74de | | | 633 | Still --> Moving:::movement |
| 6dd74de | | | 634 | Moving --> Still |
| 6dd74de | | | 635 | Moving --> Crash:::movement |
| 6dd74de | | | 636 | Crash:::badBadEvent --> [*] |
| 6dd74de | | | 637 | ``` |
| 6dd74de | | | 638 | |
| 6dd74de | | | 639 | ## Spaces in state names |
| 6dd74de | | | 640 | |
| 6dd74de | | | 641 | Spaces can be added to a state by first defining the state with an id and then referencing the id later. |
| 6dd74de | | | 642 | |
| 6dd74de | | | 643 | In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**. |
| 6dd74de | | | 644 | After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`) |
| 6dd74de | | | 645 | and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`). |
| 6dd74de | | | 646 | (**yswsii** has been styled so that it is different from the other states.) |
| 6dd74de | | | 647 | |
| 6dd74de | | | 648 | ```mermaid-example |
| 6dd74de | | | 649 | stateDiagram |
| 6dd74de | | | 650 | classDef yourState font-style:italic,font-weight:bold,fill:white |
| 6dd74de | | | 651 | |
| 6dd74de | | | 652 | yswsii: Your state with spaces in it |
| 6dd74de | | | 653 | [*] --> yswsii:::yourState |
| 6dd74de | | | 654 | [*] --> SomeOtherState |
| 6dd74de | | | 655 | SomeOtherState --> YetAnotherState |
| 6dd74de | | | 656 | yswsii --> YetAnotherState |
| 6dd74de | | | 657 | YetAnotherState --> [*] |
| 6dd74de | | | 658 | ``` |
| 6dd74de | | | 659 | |
| 6dd74de | | | 660 | ```mermaid |
| 6dd74de | | | 661 | stateDiagram |
| 6dd74de | | | 662 | classDef yourState font-style:italic,font-weight:bold,fill:white |
| 6dd74de | | | 663 | |
| 6dd74de | | | 664 | yswsii: Your state with spaces in it |
| 6dd74de | | | 665 | [*] --> yswsii:::yourState |
| 6dd74de | | | 666 | [*] --> SomeOtherState |
| 6dd74de | | | 667 | SomeOtherState --> YetAnotherState |
| 6dd74de | | | 668 | yswsii --> YetAnotherState |
| 6dd74de | | | 669 | YetAnotherState --> [*] |
| 6dd74de | | | 670 | ``` |
| 6dd74de | | | 671 | |
| 6dd74de | | | 672 | <!--- cspell:ignore yswsii ---> |