Tutorial Passo a Passo Completo: Como Criar um Diagrama de Máquina de Estados (Para Iniciantes Absolutos)

A Diagrama de Estado UML é uma ferramenta visual poderosa que modela o comportamento dinâmico de um sistema ao ilustrar como ele transita entre diferentes estados em resposta a eventos. Ele captura o ciclo de vida de um objeto ou processo—mostrando o que ele pode ser em, o que dispara uma mudança e quais ações ocorrem durante as mudanças de estado—tornando-o ideal para compreender sistemas complexos como semáforos, máquinas de venda automática, fluxos de login ou personagens de jogos. Ao focar em estados (como “Vermelho”, “Aguardando pagamento” ou “Pulando”), transições (impulsionadas por eventos como “temporizador expira” ou “botão pressionado”) e condições (guardas), os diagramas de estado proporcionam clareza, evitam falhas lógicas e servem como base para o design e o código. Seja você um iniciante aprendendo modelagem de sistemas ou um desenvolvedor criando software robusto, dominar os diagramas de estado equipa você com a capacidade de pensar, projetar e comunicar o comportamento do sistema com precisão e clareza.

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

💡 Objetivo: Aprenda a modelar sistemas do mundo real usando máquinas de estados — desde a ideia até um diagrama limpo e profissional.

🔑 Conceitos-Chave que Você Precisa Entender Primeiro

Conceito O que Significa Por que Isso Importa
Estado Uma condição ou situação em que o sistema se encontra (por exemplo, Vermelho, Aguardando moeda) Mostra o que está acontecendo a qualquer momento
Evento Algo que dispara uma mudança (por exemplo, Inserir moeda, temporizador expira) Causa movimentação entre estados
Transição Uma seta de um estado para outro Liga estados por meio de eventos
Estado Inicial O ponto de partida (●) Sempre há um
Estado Final Fim do processo (○) Opcional — nem sempre necessário
Guarda [condição] Condição que deve ser verdadeira para que a transição ocorra Adiciona lógica (por exemplo, se houver dinheiro suficiente?)
Ação / entrada/fazer O que acontece ao entrar, durante ou sair de um estado Adiciona comportamento aos estados

📌 Pense:
“Este sistema pode estar em X estados.
Quando Y ocorre, ele passa para Z.”
Isso é uma máquina de estados!

🛠 Etapa 0 – Mentalidade: Faça estas perguntas

Antes de desenhar qualquer coisa:

  • Quais são os situações claramente diferentes este objeto pode estar?

  • Qual eventos (ações do usuário, tempo, erros) causam mudanças?

  • Pode estar em dois estados ao mesmo tempo? (Não → máquinas de estado básicas são mutuamente exclusivas.)

👉 Exemplo: Um interruptor de luz é ou Ligado ou Desligado. Nunca os dois.

🧩 Passo 1 – Escolha uma coisa concreta para modelar

✅ Boas escolhas para iniciantes:

  • Porteiro (trancado/desbloqueado)

  • Sinal de trânsito (vermelho/verde/amarelo)

  • Máquina de venda automática

  • Sistema de login

  • Status do pedido: Criado → Pago → Enviado → Entregue

❌ Evite:

  • “A loja online inteira” → muito grande

  • “A experiência do usuário” → muito vago

✏️ Comece simples. Domine primeiro o exemplo pequeno.

📌 Passo 2 – Liste os estados (use substantivos ou gerúndios)

Anote 4 a 8 estados realistas.

Use adjetivos ou gerúndios para torná-lo parecido com um estado:

  • Vermelho

  • Verde

  • Amarelo

  • Aguardando moeda

  • Entregando item

  • Preparando

  • Pagamento falhou

✅ Dica: Se você tiver mais de 10 estados → divida o sistema em sistemas menores.

🖌 Etapa 3 – Desenhe os estados como retângulos arredondados

Use retângulos arredondados:

[ Vermelho ]
[ Verde ]
[ Aguardando moeda ]

✅ Ferramentas:

  • draw.io / diagrams.net (melhor escolha gratuita)

  • Excalidraw (sensação de desenho à mão)

  • PlantUML (baseado em texto → fácil de controlar versões)

  • Lucidchart / Miro

🔷 Etapa 4 – Adicione o estado inicial (ponto preto)

Desenhe um círculo preenchido com uma seta apontando para o primeiro estado.

[*] --> Vermelho

O [*] significa “estado inicial” — é o ponto de partida.

➡️ Etapa 5 – Desenhe transições com eventos

Para cada estado, pergunte:

“O que pode acontecer aqui que me faz sair deste estado?”

Rotule as setas com:

evento [guarda] / ação

🔹 Comece simples: apenas evento ou evento / ação

Eventos comuns:

  • Insira moeda

  • temporizador expira

  • pagamento falhou

  • botão pressionado

  • pedButton

  • tempo esgotado

✅ Etapa 6 – Adicionar estado final (opcional)

Use um círculo com borda grossa para estado final.

[Entregue] --> [●]

Nem todos os sistemas têm estados finais (como semáforos que funcionam para sempre).

🔁 Etapa 7 – Adicionar casos extremos realistas

Pergunte:

  • Você pode cancelar? → adicione Cancelar → voltar para Inativo

  • O tempo acaba? → tempo esgotado → voltar para Aguardando

  • Pode falhar? → adicione erro → Voltar ao Início

  • Pode permanecer no mesmo estado? →transição auto

Exemplo detransição auto (adicione mais dinheiro):

[Tem crédito] -- moeda inserida --> [Tem crédito]

🚦 Etapa 8 – Use Guardas para Lógica Inteligente

Quandoo mesmo evento leva a resultados diferentes, use guardas.

Exemplo:

Se você pressionar pedButton durante Verde, mas ainda não há demanda → você entra emVerde com pedestre esperando.

Mas se a demanda já estiver definida → você apenas ignora.

[Verde do Veículo] --> [Verde do Veículo] : pedButton / definir demanda = verdadeiro

Este é umtransição auto com ação — não um novo estado.

🎯 Etapa 9 – Adicionar Ações de Entrada/Execução/Saída (Opcional, mas Poderoso)

Você pode escrever açõesdentro da caixa de estado:

[Vermelho]
entrada / ligar vermelho
saída / desligar vermelho
fazer / esperar 30 segundos

Ajuda a esclarecer o comportamento sem sobrecarregar as transições.

✅ Etapa 10 – Checklist Final (Pergunte a si mesmo)

✅ Verifique Por que isso importa
Um estado inicial? Precisa começar em algum lugar
Todos os estados têm flechas de saída (exceto o final)? Sem becos sem saída
Sem estados inalcançáveis? Cada estado deveria ser alcançável
As transições estão rotuladas com eventos? Causa e efeito claros
As flechas não dizem “vá para X” — a flecha mostra a direção Mais limpo
Os caminhos de cancelamento / tempo esgotado / erro estão incluídos? Sistemas reais falham — esteja preparado para isso
O diagrama cabe na tela? Limpo e legível

📋 Referência Rápida: Sintaxe do PlantUML (Padrão UML)

Símbolo Significado
[*] Estado inicial
[*] --> Estado Comece neste estado
Estado --> Estado Transição
evento [guarda] / ação Rótulo na seta
estado "Nome" Estado nomeado (opcional)
estado "X" como X Apelido para nomes complexos
nota à direita do Estado Caixa de comentário

🎯 Exemplo 1: Semáforo Simples (Ciclo de 3 Estados)

Perfeito para iniciantes absolutos.

🧠 Uso no Mundo Real:

  • Ciclo básico de semáforo: Vermelho → Verde → Amarelo → Vermelho

✅ Estados:

  • Vermelho

  • Verde

  • Amarelo

🔄 Eventos:

  • temporizador expira (após 30s, 25s, 5s)

🛠 Código PlantUML (Pronto para copiar e colar):

@startuml
skinparam monochrome true
[*] --> Vermelho
Vermelho --> Verde : after(30s)ntemporizador expira
Verde --> Amarelo : after(25s)ntemporizador expira
Amarelo --> Vermelho   : after(5s)ntemporizador expira

Vermelho   : entry / ligar vermelho
Verde : entry / ligar verde
Amarelo: entry / ligar amarelo

nota à direita de Vermelho
  Veículos devem parar
fim da nota

nota à direita de Verde
  Veículos podem seguir
fim da nota

nota à direita de Amarelo
  Prepare-se para parar
fim da nota
@enduml

✅ Como usar:
Vá para https://www.plantuml.com/plantuml, cole o código e pressione “Gerar”.

🖼️ Saída: um diagrama de máquina de estados limpo e com aparência animada.

🎯 Exemplo 2: Semáforo realista com solicitação de pedestre

O versão mais educativa — introduz guardas, transições auto, e lógica complexa.

🧠 Uso no mundo real:

  • Os pedestres pressionam um botão para atravessar.

  • O sinal espera mais tempo se alguém estiver esperando.

  • Depois que o verde termina, ele vai para amarelo → vermelho → passe → não passe piscando → volta para verde.

📌 Estados principais:

  1. VeículoVerde_SemDemanda – verde, sem pedestre esperando

  2. VeículoVerde_PedEsperando – verde, alguém pressionou o botão

  3. VeículoAmarelo – luz amarela (sem passe)

  4. TodosVermelhos – buffer de segurança (muito curto)

  5. PedPasse – sinal de passe ligado

  6. PedClearance – não passe piscando (tempo de liberação)

🧩 Transições principais:

  • botãoPed → se não estiver esperando → definir demanda

  •  → temporizador expira → ir para amarelo (se o tempo verde for atingido)

  • botãoPed enquanto amarelo/vermelho → lembrar da demanda

  • timerWalk → ir para sinal piscando não passe

  • timerClearance → reiniciar e retornar ao verde

🚨 Observação: Esta versão usa guardas e transições auto, mostrando por que máquinas de estado são poderosas.

✅ Código PlantUML (Funcionando totalmente, pronto para uso):

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "Verde para Veículosn(sem demanda de pedestre)" as VG_No
state "Verde para Veículosn(pedestre esperando)"   as VG_Wait
state "Amarelo para Veículos"                  as VYellow
state "Vermelho Totaln(buffer de segurança)"      as AllRed
state "Passe para Pedestres"                    as PedWalk
state "Clearance para Pedestresn(sinal piscando não passe)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : after(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : after(45s)nverde mais longo quando pedestre esperando
VG_Wait --> VG_Wait : pedButton / ignorar (já esperando)
VYellow --> AllRed : after(4s)
AllRed --> PedWalk : after(1s)
PedWalk --> PedClear : after(10s)ntempo de passe expirou
PedClear --> VG_No : after(5s)nlimpeza concluídan/ resetPedDemand

note bottom of VG_No
  Operação normal
  Sem demanda de pedestre
end note

note right of PedClear
  Pedestres terminam de atravessar
  Sinal piscando não passe
end note

note right of VG_Wait
  Pedestre pressionou o botão
  Verde é estendido por até 10s
end note

note right of VYellow
  Preparar para parar
  Luz do veículo muda
end note

note right of PedWalk
  Sinal de passe está ligado
  Pedestres podem atravessar
end note
@enduml

💡 Por que esta versão é melhor que a versão simples?

  • Mostra complexidade do mundo real

  • Demonstra guardas (se pedDemand)

  • Usa transições auto (VG_Wait --> VG_Wait)

  • Modela comportamento real: o verde pode ser estendido!

  • Separar claramente veículo e pedestre lógica

🎓 Exercícios Práticos Recomendados (Faça na Ordem)

# Exemplo Tempo Habilidades Aprendidas
1 Interruptor de luz (Ligado ↔ Desligado) 5 min Transições básicas
2 Porteiro (Trancado ↔ Liberado) 10 min Eventos, guardas
3 Sinal de trânsito (ciclo de 3 estados) 10 min Temporizadores, ações de entrada
4 Máquina de venda automática (esperando → pagando → dispensando) 15 min Múltiplos eventos, lógica de dinheiro
5 Login (vazio → digitando → enviando → sucesso/falha) 15 min Tratamento de erros, estados finais
6 Status do pedido (6 estados) 20 min Modelagem de sistemas do mundo real

✅ Comece com #1–3 em papel ou no draw.io. Depois use PlantUML para o restante.

🧠 Dicas finais para o sucesso

  • Comece pequeno — não tente incluir tudo de uma vez.

  • Use nomes reais — Aguardando moeda, não State1.

  • Labelize as transições claramente — botão pressionado, tempo esgotado, pagamento falhou.

  • Desenhe primeiro à mão — depois digitalize.

  • Teste mentalmente: “Este sistema pode ficar preso?” → se sim, adicione uma transição.

📌 Resumo: Sua lista de verificação da máquina de estados

✅ Um [*] (estado inicial)
✅ Retângulos arredondados para estados
✅ Setas para transições
✅ Eventos nas setas (depois(30s), pedButton)
✅ Guardas onde necessário ([pedDemand])
✅ Transições auto para ações repetidas
✅ Ações de entrada/saída para comportamento
✅ Layout limpo, fonte legível

🎯 Palavras Finais: Você está pronto agora!

Você acabou de aprender:

  • O que é um diagrama de máquina de estados é

  • Como fazer pensar em estados e eventos

  • Como fazer desenhar e ler eles como um profissional

  • Como fazer modelar sistemas reais, como semáforos

  • Como fazer usar o PlantUMLescrever diagramas limpos e sustentáveis

🎉 Você não está apenas aprendendo UML — está aprendendo a modelar sistemas reais, um estado de cada vez.

📌 Próximos Passos (Seu Caminho de Aprendizado)

  1. Desenhe o semáforo de 3 estados à mão— sem ferramentas, apenas papel.

  2. Experimente o PlantUMLcom o código acima — veja-o renderizado.

  3. Modifique: Altere os tempos de espera. Adicione o estado “superação de emergência”.

  4. Experimente a máquina de venda→ mesma lógica, mas com dinheiro.

  5. Desenhe o seu próprio: Um personagem de jogo (andando → pulando → atacando → morto).

💬 Precisa de ajuda? Tente isto: “Estou tentando modelar um[seu sistema]— você pode me ajudar a criar uma máquina de estados?”

🙌 Pensamento Final

🔄 Tudo o que muda — seja uma luz, um login ou um pedido — pode ser modelado com uma máquina de estados.
Você não precisa ser programador para entender. Você só precisa se perguntar:pergunte: “O que esse objeto pode ser e o que faz com que mude?”

✅ Agora você sabe como criar um diagrama profissional e funcional de máquina de estados — do iniciante ao modelador confiante.

🎉 Boa diagramação!
Avise-me se você gostaria de uma versão impressa em PDF, um quiz ou um desafio de programação para testar suas habilidades.

Leave a Reply