A Diagrama de estado UML es una herramienta visual potente que modela el comportamiento dinámico de un sistema al ilustrar cómo cambia entre diferentes estados en respuesta a eventos. Captura el ciclo de vida de un objeto o proceso—mostrando en qué puede estar estar en, qué desencadena un cambio y qué acciones ocurren durante los cambios de estado—lo que lo hace ideal para comprender sistemas complejos como semáforos, máquinas expendedoras, flujos de inicio de sesión o personajes de juegos. Al centrarse en estados (como “Rojo”, “Esperando pago” o “Saltando”), transiciones (impulsadas por eventos como “el temporizador expira” o “se presiona el botón”) y condiciones (guardas), los diagramas de estado proporcionan claridad, evitan brechas lógicas y sirven como base tanto para el diseño como para el código. Ya sea que seas un principiante que aprende modelado de sistemas o un desarrollador que construye software robusto, dominar los diagramas de estado te proporciona la capacidad de pensar, diseñar y comunicar el comportamiento del sistema con precisión y claridad.

💡 Objetivo: Aprende a modelar sistemas del mundo real usando máquinas de estados — desde la idea hasta un diagrama limpio y de aspecto profesional.

🔑 Conceptos clave que debes entender primero

Concepto	Qué significa	Por qué es importante
Estado	Una condición o situación en la que se encuentra el sistema (por ejemplo, Rojo, Esperando moneda)	Muestra lo que está sucediendo en cualquier momento
Evento	Algo que desencadena un cambio (por ejemplo, Insertar moneda, el temporizador expira)	Provoca el movimiento entre estados
Transición	Una flecha desde un estado a otro	Enlaza estados mediante eventos
Estado inicial	El punto de inicio (●)	Siempre hay uno
Estado final	Final del proceso (○)	Opcional — no siempre necesario
Guardia [condición]	Condición que debe ser verdadera para que ocurra la transición	Agrega lógica (por ejemplo, ¿si hay suficiente dinero?)
Acción / entrada / hacer	Lo que sucede al entrar, durante o al salir de un estado	Agrega comportamiento a los estados

📌 Piensa:
“Este sistema puede estar en X estados.
Cuando Y ocurre, pasa a Z.”
¡Eso es una máquina de estados!

---

🛠 Paso 0 – Mentalidad: Haz estas preguntas

Antes de dibujar cualquier cosa:

• ¿Cuáles son los situaciones claramente diferentes en las que puede estar esta cosa?

• ¿Qué eventos (acciones del usuario, tiempo, errores) causan cambios?

• ¿Puede estar en dos estados al mismo tiempo? (No → las máquinas de estados básicas son mutuamente excluyentes.)

👉 Ejemplo: Un interruptor de luz es either Encendido o Apagado. Nunca ambos.

---

🧩 Paso 1 – Elige una cosa concreta para modelar

✅ Buenas opciones para principiantes:

• Carril de acceso (bloqueado/desbloqueado)

• Semáforo (rojo/verde/amarillo)

• Máquina expendedora

• Sistema de inicio de sesión

• Estado del pedido: Creado → Pagado → Enviado → Entregado

❌ Evita:

• “La tienda en línea completa” → demasiado grande

• “La experiencia del usuario” → demasiado vago

✏️ Empieza sencillo. Domina primero el ejemplo pequeño.

---

📌 Paso 2 – Lista los estados (usa sustantivos o participios presentes)

Escribe 4–8 estados realistas.

Usa adjetivos o participios presentes para que parezca un estado:

• Rojo

• Verde

• Amarillo

• Esperando moneda

• Entregando artículo

• Preparando

• Pago fallido

✅ Consejo: Si tienes más de 10 estados → divide el sistema en sistemas más pequeños.

---

🖌 Paso 3 – Dibuja los estados como rectángulos redondeados

Usa rectángulos redondeados:

[ Rojo ]
[ Verde ]
[ Esperando moneda ]

✅ Herramientas:

• draw.io / diagrams.net (mejor opción gratuita)

• Excalidraw (sensación de dibujo a mano)

• PlantUML (basado en texto → fácil de control de versiones)

• Lucidchart / Miro

---

🔷 Paso 4 – Agrega el estado inicial (punto negro)

Dibuja un círculo negro relleno con una flecha que apunta al primer estado.

[*] --> Rojo

El [*] significa “estado inicial” — es el punto de partida.

---

➡️ Paso 5 – Dibuja transiciones con eventos

Para cada estado, pregunta:

“¿Qué puede suceder aquí que me haga salir de este estado?”

Etiqueta las flechas con:

evento [guardia] / acción

🔹 Comienza de forma sencilla: simplementeevento o evento / acción

Eventos comunes:

• Insertar moneda

• el temporizador expira

• el pago falló

• se presionó el botón

• pedBotón

• tiempo de espera agotado

---

✅ Paso 6 – Agregar estado final (opcional)

Usa un círculo con un borde grueso para el estado final.

[Entregado] --> [●]

No todos los sistemas tienen estados finales (como los semáforos que funcionan para siempre).

---

🔁 Paso 7 – Agregar casos extremos realistas

Pregunta:

• ¿Puedes cancelar? → agrega Cancelar → volver a Inactivo

• ¿Se agota el tiempo? → tiempo de espera agotado → volver a Esperando

• ¿Puede fallar? → agrega error → Volver al inicio

• ¿Puede permanecer en el mismo estado? →transición autónoma

Ejemplo detransición autónoma (añadiendo más dinero):

[Tiene crédito] -- moneda insertada --> [Tiene crédito]

---

🚦 Paso 8 – Usa guardas para lógica inteligente

Cuandoel mismo evento lleva a resultados diferentes, usaguardas.

Ejemplo:

Si presionaspedButton duranteVerde, pero aún no hay demanda → entras aVerde con peatón esperando.

Pero si la demanda ya está establecida → simplemente la ignoras.

[Verde para vehículos] --> [Verde para vehículos] : pedButton / establecer demanda = verdadero

Este es untransición autónoma con acción — no es un nuevo estado.

---

🎯 Paso 9 – Agregar acciones de entrada/realizar/salida (Opcional pero potente)

Puedes escribir accionesdentro de la caja del estado:

[Rojo]
entrada / encender rojo
salida / apagar rojo
durante / esperar 30 segundos

Ayuda a aclarar el comportamiento sin ensuciar las transiciones.

---

✅ Paso 10 – Lista de verificación final (pregúntate)

✅ Verificar	¿Por qué importa
¿Un estado inicial?	Debe comenzar en algún lugar
¿Todos los estados tienen flechas salientes (excepto el final)?	Sin puntos muertos
¿Sin estados inalcanzables?	Cada estado debería ser alcanzable
¿Las transiciones etiquetadas con eventos?	Causa y efecto claros
Las flechas no dicen «ir a X» — la flecha muestra la dirección	Más limpio
¿Incluidos los caminos de cancelación / tiempo agotado / error?	Los sistemas reales fallan — prepárate para ello
¿El diagrama cabe en la pantalla?	Limpio y legible

---

📋 Referencia rápida: Sintaxis de PlantUML (Estándar UML)

Símbolo	Significado
[*]	Estado inicial
[*] --> Estado	Comienza desde este estado
Estado --> Estado	Transición
evento [guarda] / acción	Etiqueta en la flecha
estado "Nombre"	Estado nombrado (opcional)
estado "X" como X	Alias para nombres complejos
nota a la derecha del Estado	Cuadro de comentarios

---

🎯 Ejemplo 1: Semáforo simple (ciclo de 3 estados)

Perfecto para principiantes absolutos.

🧠 Uso en el mundo real:

• Ciclo básico de semáforo: Rojo → Verde → Amarillo → Rojo

✅ Estados:

• Rojo

• Verde

• Amarillo

🔄 Eventos:

• el temporizador expira (después de 30s, 25s, 5s)

🛠 Código PlantUML (listo para copiar y pegar):

@startuml
skinparam monochrome true
[*] --> Rojo
Rojo --> Verde : after(30s)nEl temporizador expira
Verde --> Amarillo : after(25s)nEl temporizador expira
Amarillo --> Rojo   : after(5s)nEl temporizador expira

Rojo   : entry / encender rojo
Verde : entry / encender verde
Amarillo: entry / encender amarillo

nota a la derecha de Rojo
  Los vehículos deben detenerse
fin nota

nota a la derecha de Verde
  Los vehículos pueden avanzar
fin nota

nota a la derecha de Amarillo
  Prepararse para detenerse
fin nota
@enduml

✅ Cómo usar:
Ve a https://www.plantuml.com/plantuml, pega el código y presiona “Generar”.

🖼️ Salida: Un diagrama de máquina de estados limpio y con aspecto animado.

---

🎯 Ejemplo 2: Semáforo realista con solicitud de peatón

El versión más educativa — introduce condiciones, transiciones auto-referidas y lógica compleja.

🧠 Uso en el mundo real:

• Los peatones presionan un botón para cruzar.

• La luz espera más tiempo si alguien está esperando.

• Después de que el verde termina, pasa al amarillo → rojo → cruzar → no cruzar parpadeando → de vuelta al verde.

📌 Estados clave:

1. VehículoVerde_SinDemanda – verde, sin peatón esperando

2. VehículoVerde_PedEsperando – verde, alguien presionó el botón

3. VehículoAmarillo – luz amarilla (sin cruzar)

4. TodosRojo – buffer de seguridad (muy corto)

5. PedCruzar – señal de cruzar encendida

6. PedAclaración – no cruzar parpadeando (tiempo de aclaración)

---

🧩 Transiciones clave:

• botónPeatón → si no está esperando → establecer demanda

•  → el temporizador expira → pasar al amarillo (si se cumplió el tiempo verde)

• botónPeatón mientras amarillo/rojo → recordar la demanda

• timerWalk → ir al destello de no cruzar

• timerClearance → reiniciar y volver al verde

🚨 Nota: Esta versión usa guardas y transiciones auto, mostrando por qué las máquinas de estado son potentes.

---

✅ Código PlantUML (Funcional completo, listo para usar):

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "Verde para vehículosn(sin demanda peatonal)" as VG_No
state "Verde para vehículosn(pedestres esperando)"   as VG_Wait
state "Amarillo para vehículos"                  as VYellow
state "Todos rojosn(buffer de seguridad)"      as AllRed
state "Cruzar"                    as PedWalk
state "Clearance peatonaln(señal parpadeante de no cruzar)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : after(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : after(45s)nverde más largo cuando hay peatones esperando
VG_Wait --> VG_Wait : pedButton / ignorar (ya esperando)
VYellow --> AllRed : after(4s)
AllRed --> PedWalk : after(1s)
PedWalk --> PedClear : after(10s)nexpira el tiempo de cruce
PedClear --> VG_No : after(5s)nfinalizado el clearancen/ resetPedDemand

note bottom of VG_No
  Operación normal
  Sin demanda peatonal
end note

note right of PedClear
  Los peatones terminan de cruzar
  Señal parpadeante de no cruzar
end note

note right of VG_Wait
  El peatón presionó el botón
  El verde se extiende hasta 10s
end note

note right of VYellow
  Prepararse para detenerse
  Cambio de luz para vehículos
end note

note right of PedWalk
  La señal de cruzar está encendida
  Los peatones pueden cruzar
end note
@enduml

💡 ¿Por qué esta versión es mejor que la versión simple?

• Muestra complejidad del mundo real

• Muestra guardas (si pedDemand)

• Usa transiciones auto (VG_Wait --> VG_Wait)

• Modela comportamiento real: ¡el verde puede extenderse!

• Separación clara entre vehículo y peatón lógica

---

🎓 Ejercicios recomendados de práctica (hágalo en orden)

#	Ejemplo	Tiempo	Habilidades aprendidas
1	Interruptor de luz (Encendido ↔ Apagado)	5 min	Transiciones básicas
2	Carril de acceso (Bloqueado ↔ Desbloqueado)	10 min	Eventos, condiciones
3	Semáforo (ciclo de 3 estados)	10 min	Temporizadores, acciones de entrada
4	Máquina expendedora (espera → pago → dispensación)	15 min	Múltiples eventos, lógica de dinero
5	Inicio de sesión (vacío → escritura → envío → éxito/fracaso)	15 min	Manejo de errores, estados finales
6	Estado del pedido (6 estados)	20 min	Modelado de sistemas de la vida real

✅ Comienza con el #1–3 en papel o en draw.io. Luego usaPlantUML para el resto.

---

🧠 Consejos finales para tener éxito

• Empieza pequeño — no trates de incluir todo de una vez.

• Usa nombres reales — Esperando la moneda, noEstado1.

• Etiqueta claramente las transiciones — botón presionado, tiempo de espera agotado, el pago falló.

• Dibújalo primero a mano — luego digitalízalo.

• Prueba mentalmente: “¿Puede este sistema quedar atrapado?” → si es sí, añade una transición.

---

📌 Resumen: tu lista de verificación de máquina de estados

✅ Uno[*] (estado inicial)
✅ Rectángulos redondeados para estados
✅ Flechas para transiciones
✅ Eventos en las flechas (después(30s), pedButton)
✅ Guardas donde sea necesario ([pedDemand])
✅ Transiciones autoresolutivas para acciones repetidas
✅ Acciones de entrada/salida para el comportamiento
✅ Diseño limpio, fuente legible

---

🎯 Palabras finales: ¡Ya estás listo!

Acabas de aprender:

• Qué es un diagrama de máquina de estados es

• Cómo pensar en estados y eventos

• Cómo dibujar y leer como un profesional

• Cómo modelar sistemas reales, como semáforos

• Cómo usar PlantUMLescribir diagramas limpios y mantenibles

🎉 No estás solo aprendiendo UML — estás aprendiendo a modelar sistemas reales, un estado a la vez.

---

📌 Próximos pasos (tu camino de aprendizaje)

1. Dibuja el semáforo de 3 estados a mano— sin herramientas, solo papel.

2. Prueba PlantUMLcon el código anterior — verlo renderizado.

3. Modifica: Cambia los tiempos de espera. Añade el estado “intervención de emergencia”.

4. Prueba la máquina expendedora→ misma lógica, pero con dinero.

5. Dibuja el tuyo: Un personaje de juego (caminando → saltando → atacando → muerto).

💬 ¿Necesitas ayuda? Prueba esto: “Estoy tratando de modelar un[tu sistema]— ¿puedes ayudarme a crear una máquina de estados?”

---

🙌 Pensamiento final

🔄 Todo lo que cambia — ya sea una luz, un inicio de sesión o un pedido — puede ser modelado con una máquina de estados.
No necesitas ser programador para entenderlo. Solo necesitas preguntarte:preguntar: “¿Qué puede ser esta cosa y qué la hace cambiar?”

---

✅ Ahora sabes cómo crear un diagrama profesional y funcional de máquina de estados — desde principiante hasta modelador seguro.

🎉 ¡Feliz diagramación!
Avísame si quieres una versión imprimible en PDF, una prueba o un desafío de programación para probar tus habilidades.

---