# State diagram demos

## Very simple showing change from State1 to State2

        ---
        title: Very simple diagram
        ---
        stateDiagram
          accTitle: This is the accessible title
          accDescr:This is an accessible description
          State1 --> State2

## This has classDef statements to apply style classes to specific states

#### Here are the `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
`

#### And these are how they are applied:

`class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
`

        ---
        title: Very simple diagram
        ---
        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
          Still --> [*]
          Still --> Moving
          Moving --> Still
          Moving --> Crash
          Crash --> [*]

          class Still notMoving
          class Moving, Crash movement
          class Crash badBadEvent
          class end badBadEvent

## Here is a diagram that uses the ::: operator to apply styles to states

#### Here are the `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
`

#### And these are how they are applied:

`[*] --> 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
          accDescr: This is a state diagram showing one state
          State1

## States with spaces in them

          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 --> [*]

## You can label the relationships

        stateDiagram-v2
        [*] --> State1
        State1 --> State2 : Transition 1
        State1 --> State3 : Transition 2
        State1 --> State4 : Transition 3
        State1 --> [*]

## This shows Composite states

        stateDiagram-v2
        [*] --> First
        First --> Second
        First --> Third

        state "the first composite" as First {
            [*] --> 1st
            state innerFirst {
              state "1 in innerFirst" as 1st1st
              1st2nd: 2 in innerFirst
              [*] --> 1st1st
              1st1st --> 1st2nd
              %% 1st2nd --> 1st
            }
            1st --> innerFirst
            innerFirst --> 2nd
        }
        state Second {
            2nd --> [*]
        }
        state Third {
            [*] --> 3rd
            3rd --> [*]
        }

## Composite states can link to themselves

          stateDiagram-v2
                state Active {
                  Idle
                }
                Inactive --> Idle: ACT
                Active --> Active: LOG

## transition labels can span multiple lines using "br" tags or \n

          stateDiagram-v2
          [*] --> S1
          S1 --> S2: This long line uses a br tag
    to create multiple
    lines.
          S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines.

## You can add Notes

        stateDiagram-v2
          direction LR
          State1: A state with a note
          note right of State1
            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).
          note right of State2 : Notes can be to the right of a state\n(like this one).