Полное пошаговое руководство: Как создать диаграмму состояний (для абсолютных новичков)

А Диаграмма состояний UML — это мощный визуальный инструмент, который моделирует динамическое поведение системы, показывая, как она переходит между различными состояниями в ответ на события. Он фиксирует жизненный цикл объекта или процесса — показывая, что он может быть в, что вызывает изменение, и какие действия происходят при смене состояний — делая его идеальным для понимания сложных систем, таких как светофоры, автоматы, рабочие процессы входа в систему или игровые персонажи. Фокусируясь на состояниях (например, «Красный», «Ожидание оплаты» или «Прыжок»), переходах (вызванных событиями, такими как «истек таймер» или «нажата кнопка») и условиях (ограничениях), диаграммы состояний обеспечивают ясность, предотвращают логические пробелы и служат основой как для проектирования, так и для кодирования. Независимо от того, являетесь ли вы новичком, изучающим моделирование систем, или разработчиком, создающим надежное программное обеспечение, овладение диаграммами состояний дает вам возможность мыслить, проектировать и передавать поведение системы с точностью и ясностью.

State Machines for Everyone — Part 1 Introduction | by Alex Dodge | Well Red | Medium

💡 Цель: Научитесь моделировать реальные системы с помощью машин состояний — от идеи до чистой, профессионально выглядящей диаграммы.

🔑 Ключевые концепции, которые необходимо понять в первую очередь

Концепция Что это означает Почему это важно
Состояние Состояние или ситуация, в которой находится система (например, Красный, Ожидание монеты) Показывает, что происходит в любой момент
Событие Что-то, что вызывает изменение (например, Вставить монету, Таймер истек) Вызывает перемещение между состояниями
Переход Стрелка от одного состояния к другому Связывает состояния через события
Начальное состояние Точка начала (●) Всегда есть одна
Конечное состояние Конец процесса (○) Опционально — не всегда необходимо
Условие [условие] Условие, которое должно быть истинным для перехода Добавляет логику (например, если достаточно денег?)
Действие / вход/выполнение Что происходит при входе, во время или выходе из состояния Добавляет поведение состояниям

📌 Подумайте:
«Эта система может находиться в X состояниях.
Когда Y происходит, она переходит в Z.”
Это машина состояний!

🛠 Шаг 0 – Настройка мышления: задайте эти вопросы

Перед тем как рисовать что-либо:

  • В каких четко различных ситуациях может находиться это устройство?

  • Какие события (действия пользователя, время, ошибки) вызывают изменения?

  • Может ли он находиться в двух состояниях одновременно? (Нет → базовые машины состояний взаимоисключающие.)

👉 Пример: А выключатель света либо Вкл или Выкл. Никогда оба.

🧩 Шаг 1 – Выберите одно конкретное вещь для моделирования

✅ Хорошие начальные варианты:

  • Пропускная будка (заблокирована/разблокирована)

  • Светофор (красный/зелёный/жёлтый)

  • Автомат по продаже товаров

  • Система входа

  • Статус заказа: Создан → Оплачен → Отправлен → Доставлен

❌ Избегайте:

  • «Весь интернет-магазин» → слишком большой

  • «Опыт пользователя» → слишком расплывчато

✏️ Начните просто. Сначала освойте небольшой пример.

📌 Шаг 2 – Перечислите состояния (используйте существительные или причастия)

Запишите 4–8 реалистичных состояний.

Используйте прилагательные или причастия чтобы это выглядело как состояние:

  • Красный

  • Зеленый

  • Желтый

  • Ожидание монеты

  • Выдача товара

  • Подготовка

  • Оплата не удалась

✅ Совет: если у вас более 10 состояний → разделите систему на более мелкие части.

🖌 Шаг 3 – Нарисуйте состояния в виде скруглённых прямоугольников

Используйте скруглённые прямоугольники:

[ Красный ]
[ Зеленый ]
[ Ожидание монеты ]

✅ Инструменты:

  • draw.io / diagrams.net (лучший бесплатный выбор)

  • Excalidraw (ощущение ручной работы)

  • PlantUML (основан на тексте → легко интегрируется в систему контроля версий)

  • Lucidchart / Miro

🔷 Шаг 4 – Добавьте начальное состояние (чёрная точка)

Нарисуйте закрашенный чёрный круг с стрелкой, указывающей на первое состояние.

[*] --> Красный

Знак [*] означает «начальное состояние» — это точка старта.

➡️ Шаг 5 – Нарисуйте переходы с событиями

Для каждого состояния задайте вопрос:

«Что может произойти здесь, что заставит меня покинуть это состояние?»

Подпишите стрелки:

событие [ограничение] / действие

🔹 Начните просто: просто событие или событие / действие

Общие события:

  • Вставить монету

  • таймер истек

  • оплата не удалась

  • кнопка нажата

  • pedButton

  • таймаут

✅ Шаг 6 – Добавить конечное состояние (по желанию)

Используйте круг с толстой границей для конечного состояния.

[Доставлено] --> [●]

Не все системы имеют конечные состояния (например, светофоры, которые работают бесконечно).

🔁 Шаг 7 – Добавьте реалистичные крайние случаи

Спросите:

  • Можно отменить? → добавить Отмена → вернуться к Ожидание

  • Время истекло? → таймаут → вернуться к Ожидание

  • Может ли это завершиться неудачей? → добавить ошибка → Вернуться к началу

  • Может ли оставаться в том же состоянии? →самопередача

Пример самопередача (добавление дополнительных денег):

[Имеется кредит] -- внесена монета --> [Имеется кредит]

🚦 Шаг 8 – Использование условий для умной логики

Когда одно и то же событие приводит к разным результатам, используйте условия.

Пример:

Если вы нажмете pedButton в течение Зелёный, но спрос еще не установлен → вы переходите в Зелёный с ожиданием пешехода.

Но если спрос уже установлен → вы просто игнорируете его.

[Зелёный для транспорта] --> [Зелёный для транспорта] : pedButton / установить спрос = true

Это самопередача с действием — а не новое состояние.

🎯 Шаг 9 – Добавить действия входа/выполнения/выхода (необязательно, но мощно)

Вы можете писать действиявнутри блока состояния:

[Красный]
вход / включить красный
выход / выключить красный
выполнение / ждать 30 секунд

Помогает прояснить поведение, не загромождая переходы.

✅ Шаг 10 – Финальный чек-лист (задайте себе)

✅ Проверить Почему это важно
Одно начальное состояние? Должно начинаться где-то
Все состояния имеют исходящие стрелки (кроме конечного)? Нет тупиковых точек
Нет недоступных состояний? Каждое состояние должно быть достижимым
Переходы помечены событиями? Четкая причинно-следственная связь
Стрелки не говорят «перейти к X» — стрелка показывает направление Чище
Включены пути отмены / истечения времени / ошибки? Реальные системы выходят из строя — будьте к этому готовы
Диаграмма помещается на экране? Чисто и понятно

📋 Краткая справка: синтаксис PlantUML (стандарт UML)

Символ Значение
[*] Начальное состояние
[*] --> Состояние Начать с этого состояния
Состояние --> Состояние Переход
событие [условие] / действие Метка на стрелке
состояние "Имя" Именованное состояние (необязательно)
состояние "X" как X Псевдоним для сложных имён
заметка справа от Состояния Комментарий

🎯 Пример 1: Простой светофор (цикл из 3 состояний)

Идеально для абсолютных новичков.

🧠 Практическое применение:

  • Базовый цикл светофора: Красный → Зелёный → Жёлтый → Красный

✅ Состояния:

  • Красный

  • Зелёный

  • Жёлтый

🔄 События:

  • таймер истек (через 30с, 25с, 5с)

🛠 Код PlantUML (готов к копированию и вставке):

@startuml
skinparam monochrome true
[*] --> Красный
Красный --> Зелёный : после(30с)nтаймер истек
Зелёный --> Жёлтый : после(25с)nтаймер истек
Жёлтый --> Красный   : после(5с)nтаймер истек

Красный   : entry / включить красный
Зелёный : entry / включить зелёный
Жёлтый: entry / включить жёлтый

заметка справа от Красный
  Автомобили должны остановиться
end note

заметка справа от Зелёный
  Автомобили могут двигаться
end note

заметка справа от Жёлтый
  Подготовьтесь к остановке
end note
@enduml

✅ Как использовать:
Перейдите к https://www.plantuml.com/plantuml, вставьте код и нажмите «Сгенерировать».

🖼️ Вывод: чистая, анимированная диаграмма конечного автомата.

🎯 Пример 2: Реалистичный светофор с запросом пешехода

The наиболее образовательная версия — вводит условия, самопереключения и сложную логику.

🧠 Практическое применение:

  • Пешеходы нажимают кнопку, чтобы перейти дорогу.

  • Светофор ждет дольше, если кто-то ждет.

  • После окончания зеленого света он переходит на желтый → красный → разрешение перехода → мигающий запрет перехода → обратно на зеленый.

📌 Ключевые состояния:

  1. VehicleGreen_NoDemand – зеленый, пешеходы не ждут

  2. VehicleGreen_PedWaiting – зеленый, кто-то нажал кнопку

  3. VehicleYellow – желтый свет (переход запрещен)

  4. AllRed – буфер безопасности (очень короткий)

  5. PedWalk – включен знак «можно переходить»

  6. PedClearance – мигающий запрет перехода (время освобождения)

🧩 Ключевые переходы:

  • pedButton → если не ждут → установить запрос

  •  → таймер истек → перейти на желтый (если время зеленого света истекло)

  • pedButton — пока желтый/красный → запомнить запрос

  • таймер ходьбы → перейти к мигающему сигналу «не переходите»

  • таймер освобождения → сброс и возврат к зеленому

🚨 Примечание: Эта версия использует условия и самопередачи, показывая почему конечные автоматы мощны.

✅ Код PlantUML (полностью рабочий, готов к использованию):

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "Зеленый для транспортаn(нет запросов пешеходов)" as VG_No
state "Зеленый для транспортаn(пешеход ждет)"   as VG_Wait
state "Желтый для транспорта"                  as VYellow
state "Все красныеn(безопасный буфер)"      as AllRed
state "Пешеходный переход"                    as PedWalk
state "Освобождение пешеходовn(мигающий сигнал «не переходите»)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : after(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : after(45s)nдлиннее зеленый при ожидании пешехода
VG_Wait --> VG_Wait : pedButton / игнорировать (уже ждет)
VYellow --> AllRed : after(4s)
AllRed --> PedWalk : after(1s)
PedWalk --> PedClear : after(10s)nвремя ходьбы истекло
PedClear --> VG_No : after(5s)nосвобождение завершеноn/ resetPedDemand

note bottom of VG_No
  Нормальная работа
  Нет запросов пешеходов
end note

note right of PedClear
  Пешеходы завершили переход
  Мигающий сигнал «не переходите»
end note

note right of VG_Wait
  Пешеход нажал кнопку
  Зеленый свет продлевается до 10 секунд
end note

note right of VYellow
  Подготовка к остановке
  Свет для транспорта меняется
end note

note right of PedWalk
  Сигнал «можно переходить» включен
  Пешеходы могут переходить
end note
@enduml

💡 Почему это лучше, чем простая версия?

  • Показывает реальную сложность мира

  • Демонстрирует условия (если pedDemand)

  • Использует самопередачи (VG_Wait --> VG_Wait)

  • Моделирует реальное поведение: зеленый свет может быть продлен!

  • Четкое разделение между транспорт и пешеход логика

🎓 Рекомендуемые упражнения по практике (сделать в порядке)

# Пример Время Освоенные навыки
1 Выключатель света (Вкл ↔ Выкл) 5 мин Базовые переходы
2 Поворотный ворота (Заблокировано ↔ Разблокировано) 10 мин События, условия
3 Светофор (цикл из 3 состояний) 10 мин Таймеры, действия входа
4 Автомат (ожидание → оплата → выдача) 15 мин Несколько событий, логика денег
5 Вход (пусто → ввод → отправка → успех/неудача) 15 мин Обработка ошибок, конечные состояния
6 Статус заказа (6 состояний) 20 мин Моделирование реальных систем

✅ Начните с #1–3 на бумаге или в draw.io. Затем используйтеPlantUML для остального.

🧠 Последние советы для успеха

  • Начните с малого — не пытайтесь включить всё сразу.

  • Используйте реальные имена — Ожидание монеты, а неState1.

  • Чётко обозначьте переходы — кнопка нажата, тайм-аут, оплата не удалась.

  • Сначала нарисуйте от руки — затем переведите в цифровой формат.

  • Проверьте это в уме: «Может ли эта система застрять?» → если да, добавьте переход.

📌 Обзор: ваш чек-лист конечного автомата

✅ Один[*] (начальное состояние)
✅ Округлые прямоугольники для состояний
✅ Стрелки для переходов
✅ События на стрелках (через(30с), pedButton)
✅ Условия при необходимости ([pedDemand])
✅ Самоперехождения для повторяющихся действий
✅ Действия входа/выхода для поведения
✅ Чистая компоновка, читаемый шрифт

🎯 Заключительные слова: Вы готовы!

Вы только что узнали:

  • Что такое диаграмма конечного автомата это

  • Как думать в терминах состояний и событий

  • Как рисовать и читать их, как профессионал

  • Как моделировать реальные системы, например, светофоры

  • Как использовать PlantUMLписать чистые, поддерживаемые диаграммы

🎉 Вы не просто изучаете UML — вы учитесь моделировать реальные системы, по одному состоянию за раз.

📌 Следующие шаги (ваш путь обучения)

  1. Нарисуйте светофор с тремя состояниями от руки— без инструментов, только бумага.

  2. Попробуйте PlantUMLс кодом выше — посмотрите, как он отображается.

  3. Измените: Измените временные интервалы ожидания. Добавьте состояние «аварийное отключение».

  4. Попробуйте автомат с напитками→ та же логика, но с деньгами.

  5. Нарисуйте свой собственный: Персонаж игры (идет → прыгает → атакует → мёртв).

💬 Нужна помощь? Попробуйте так: «Я пытаюсь смоделировать систему [ваша система]— можете ли вы помочь мне создать машину состояний?»

🙌 Последняя мысль

🔄 Всё, что изменяется — будь то свет, вход в систему или заказ — может быть смоделировано с помощью машины состояний.
Вам не нужно быть программистом, чтобы понять это. Вам нужно просто задать вопрос: «В каком состоянии может находиться это устройство, и что заставляет его меняться?»спросить: «В каком состоянии может находиться это устройство, и что заставляет его меняться?»

✅ Теперь вы знаете, как создавать профессиональные, рабочие диаграммы машин состояний — от новичка до уверенного моделировщика.

🎉 Удачного моделирования!
Сообщите мне, если вам нужна распечатываемая версия PDF, тест или кодировочный вызов, чтобы проверить свои навыки.

Leave a Reply