State diagrams

1. summary

「状態図は、コンピュータサイエンスや関連分野でシステムの動作を説明するために使用される図の一種です。状態図では、説明するシステムが有限数の状態で構成されている必要があります。実際にそうである場合もあれば、そうである場合もあります。 これは合理的な抽象化です。」 ウィキペディア

マーメイドは状態図をレンダリングできます。 構文は、plantUmlで使用されている構文に準拠しようとします。これにより、ユーザーがマーメイドとplantUmlの間で図を共有しやすくなります。

sample

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

code

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

状態図では、システムはその状態と、システムの状態が遷移を介して別の状態にどのように変化するかという観点から説明されています。 上の図の例は、Still、Moving、Crashの3つの状態を示しています。 静止状態から始めます。 Stillから状態をMovingに変更できます。 移動では、状態をStilに戻すことができます

2. Srtates

状態は複数の方法で宣言できます。 最も簡単な方法は、状態IDを説明として定義することです。

stateDiagram-v2
    s1

    state "This is a state description" as s2

stateDiagram-v2
    s1

%% 別の方法は、以下のように説明とともにstateキーワードを使用することです。
    state "This is a state description" as s2

%% 説明を使用して状態を定義する別の方法は、状態IDの後にコロンと説明を続けることです。
%% s2 :これは状態の説明です

3. Transitions

遷移は、ある状態が別の状態に移行するときのパス/エッジです。 これは、テキスト矢印「->」を使用して表されます。
2つの状態間の遷移を定義し、状態がまだ定義されていない場合、未定義の状態は遷移からのIDで定義されます。 この方法で定義された状態に後で説明を追加できます。

stateDiagram-v2
    s1 --> s2

 s3 --> s4: A transition

stateDiagram-v2
    s1 --> s2

%% トランジションにテキストを追加することができます。 
 s3 --> s4: A transition

4. Start and End

ダイアグラムの開始と停止を示す2つの特別な状態があります。 これらは[*]構文で記述されており、その構文への遷移の方向によって、開始状態または停止状態として定義されます。

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

5-1. Composite states

状態図の実際の使用では、1つの状態が複数の内部状態を持つ可能性があるため、多くの場合、多次元の図になります。 この用語では、これらは複合状態と呼ばれます。
複合状態を定義するには、stateキーワードに続けて、IDと{}の間の複合状態の本体を使用する必要があります。 以下の例を参照してください。

stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

5-2. Composite states

You can do this in several layers:

stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }

stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }

5-3. Composite states

You can also define transitions also between composite states:

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

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }

Info

異なる複合状態に属する内部状態間の遷移を定義することはできません

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

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }

6. Composite Choice

2つ以上のパスからの選択をモデル化する必要がある場合は、choice を使用してモデル化できます。

stateDiagram-v2
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0

stateDiagram-v2
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0

7. Composite Forks

fork , join を使用して、ダイアグラムでフォークを指定することができます。

   stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

   stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

8. Composite Notes

ノートをノードの右側または左側に配置することを選択できます。

    stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.

    stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.

9. Composite Concurrency

plantUmlと同様に、「 - 」 記号を使用して並行性を指定できます。

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
    }

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
    }