State diagrams (Диаграмма состояний)

• Положение может быть представлено несколькими способами. Самый простой способ - определить идентификатор состояния в качестве описания.

• Другой способ - использовать ключевое слово state с описанием, как показано ниже:

• Также еще одним способом определения положения с описанием является определение идентификатора состояния, за которым следует двоеточие и описание

• Переходы - это путь, при котором одно состояние переходит в другое. Это представлено с помощью текстовой стрелки -->

• Когда вы устанавливаете переход между двумя состояниями, а они еще не определены, то они назначаются с идентификатором перехода. Позже, можно добавить описания к состояниям.
• К взаимосвязи можно добавить текст для ее описания

stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

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

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

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

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

• В некоторых случаях необходимо смоделировать выбор (условия) между двумя или более путями, это возможно выполнить при помощи оператора <<choice>>.
• Обратите внимание на место оператора <<choice>> в синтаксисе диаграммы: ввести его нужно до введения основных условий.

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

• Можно указать разветвление на диаграмме, используя операторы <<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 --> [*]

• В некоторых случаях необходимо создать заметку на диаграмме. Для этого используется заметка Post-it note.

• В примере ниже показано как поместить заметку справа или слева от узла.

   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
      [*] --> Active
  
      state Active {
          [*] --> NumLockOff
          NumLockOff --> NumLockOn : EvNumLockPressed
          NumLockOn --> NumLockOff : EvNumLockPressed
          --
          [*] --> CapsLockOff
          CapsLockOff --> CapsLockOn : EvCapsLockPressed
          CapsLockOn --> CapsLockOff : EvCapsLockPressed
          --
          [*] --> ScrollLockOff
          ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
          ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
      }
  

• Используя оператор direction, можно задать направление, в котором будет отображаться диаграмма.
• К  данному оператору присоединяется символ, который задает направление диаграммы.
•  В примере ниже обозначены символы LR, что соответствует направлению диаграммы слева-направо. Обратите внимание, что направление составного состояния устанавливается отдельно.

stateDiagram
    direction LR
    [*] --> A
    A --> B
    B --> C
    state B {
      direction LR
      a --> b
    }
    B --> D

• Также для настройки направления диаграммы можно использовать следующие символы:

TD/TB - сверху-вниз;

BT - снизу-вверх;

RL - справа-налево;

LR - слева-направо.

• Комментарии могут быть добавлены в диаграмму, которая будет проигнорирована синтаксическим анализатором.
• Комментарии должны быть записаны в отдельной строке и начинаться с %% (двойные знаки процента).
• Любой текст после начала комментария к следующей новой строке будет рассматриваться как комментарий, включая любой синтаксис диаграммы.

stateDiagram-v2
    [*] --> Still
    Still --> [*]
%% this is a comment
    Still --> Moving
    Moving --> Still %% another comment
    Moving --> Crash
    Crash --> [*]

• Стилизация диаграммы выполняется путем определения ряда классов css. Во время визуализации эти классы извлекаются из файла, расположенного по адресу: src/themes/state.scss.