Диаграммы состояний Mermaid

Диаграммы состояний (state diagrams) описывают жизненный цикл объектов: возможные состояния и переходы между ними. Они идеальны для документирования конечных автоматов, статус-моделей задач, бизнес-процессов.

Базовый синтаксис

stateDiagram-v2
    [*] --> Бэклог
    Бэклог --> В_работе : Назначить
    В_работе --> Ревью : Отправить на ревью
    Ревью --> В_работе : Вернуть
    Ревью --> Готово : Одобрить
    Готово --> [*]

Базовая диаграмма состояний

[*] — начальное или конечное состояние.

Переходы с описанием

Текст перехода добавляется через ::

stateDiagram-v2
    [*] --> Draft : create()
    Draft --> Pending : submit()
    Pending --> Approved : approve()
    Pending --> Rejected : reject()
    Approved --> Published : publish()
    Rejected --> Draft : revise()
    Published --> Archived : archive()
    Archived --> [*]

Заметки к состояниям

stateDiagram-v2
    [*] --> Idle

    state Idle {
        note right of Idle
            Задача ожидает
            назначения
        end note
    }

    Idle --> Active : assign
    Active --> Completed : complete
    Completed --> [*]

Вложенные состояния (составные)

stateDiagram-v2
    [*] --> InProgress

    state InProgress {
        [*] --> Development
        Development --> CodeReview : submit PR
        CodeReview --> Development : request changes
        CodeReview --> Testing : approved
        Testing --> Development : bug found
        Testing --> [*] : passed
    }

    InProgress --> Done : all checks passed
    Done --> [*]

Вложенные состояния

Параллельные состояния (fork/join)

stateDiagram-v2
    [*] --> Deployment

    state Deployment {
        [*] --> Fork_state
        Fork_state --> Backend_Deploy
        Fork_state --> Frontend_Deploy
        Fork_state --> DB_Migration

        Backend_Deploy --> Join_state
        Frontend_Deploy --> Join_state
        DB_Migration --> Join_state

        Join_state --> [*]
    }

    Deployment --> [*]

Fork_state и Join_state — специальные обозначения для параллельных веток.

Выбор (choice)

stateDiagram-v2
    [*] --> Validate

    state if_valid <<choice>>
    Validate --> if_valid
    if_valid --> Approved : valid
    if_valid --> Rejected : invalid
    if_valid --> NeedsReview : partial

    Approved --> [*]
    Rejected --> [*]
    NeedsReview --> Validate : after changes

Пример: жизненный цикл задачи в FlowEra

stateDiagram-v2
    direction LR

    [*] --> Backlog : Задача создана

    state "Активные" as Active {
        [*] --> InProgress : Взять в работу
        InProgress --> InReview : Отправить на ревью
        InReview --> InProgress : Вернуть на доработку
        InReview --> [*] : Одобрено
    }

    Backlog --> Active : Назначить
    Active --> Done : Завершить
    Done --> Backlog : Переоткрыть

    state Done {
        [*] --> Verified
        Verified --> Released
    }

    Done --> [*]

![Жизненный цикл задачи в FlowEra](/docs/mermaid/examples/state-lifecycle.png)

    note right of Backlog
        Задачи без исполнителя
        или с низким приоритетом
    end note

Стили состояний

stateDiagram-v2
    classDef success fill:#22c55e,color:white
    classDef error fill:#ef4444,color:white
    classDef active fill:#4f6ef7,color:white

    [*] --> Pending
    Pending --> Success:::success
    Pending --> Failed:::error
    Pending --> Processing:::active