Si estás empezando con máquinas de estado, lo primero que necesitas dominar son los diagramas de estado y sus tres piezas fundamentales: estados, eventos y transiciones. Esta guía te explica cómo se conectan entre sí y por qué son la base para modelar flujos en aplicaciones reales, ideal si trabajas en frontend, lógica de negocio o interfaces.

Qué es un diagrama de estado y para qué sirve

Un diagrama de estado es la representación visual de una máquina de estado. Sirve para entender de un vistazo cómo se mueve un proceso entre distintas situaciones posibles, en lugar de leer código línea por línea para imaginar el flujo.

El diagrama tiene tres componentes que se conectan con flechas:

• Estados, que muestran en qué punto está el proceso.
• Transiciones, que son las flechas que conectan un estado con otro.
• Eventos, que disparan el movimiento entre estados.

¿Para qué sirve un diagrama de estado? Para visualizar todos los estatus posibles de una interfaz o proceso y las reglas que permiten pasar de uno a otro, sin ambigüedad.

Qué son los estados y qué tipos existen

Un estado funciona como un snapshot: te dice cuál es el estatus actual del proceso o de la interfaz que estás modelando [0:32]. Si tu máquina está en el estado loading, sabes que la aplicación está cargando. Sin más interpretación.

Cuál es el estado inicial de una máquina de estado

El estado inicial es donde siempre arranca el flujo. En el ejemplo de la clase, ese estado inicial es inactivo [0:53]. Cada vez que la máquina empieza, parte de ahí.

Una regla clave: solo puede haber un estado inicial dentro de una máquina de estado. No dos, no tres. Uno.

Qué son los estados finales

Los estados finales marcan el cierre del flujo. En el ejemplo, son mostrar error y mostrar datos [1:18]. Cuando la máquina llega a uno de estos estados, ya no hay más movimientos por hacer.

Piénsalo así: el estado final es la señal de que el flujo terminó, ya sea con éxito o con un error controlado. Todo está OK o todo falló de forma esperada, pero en ambos casos la máquina cumplió su trabajo.

¿Cuántos estados finales puede tener una máquina? Puede tener varios, a diferencia del estado inicial. Cada uno representa una forma distinta de cerrar el flujo.

Cómo funcionan los eventos y las transiciones

Los estados por sí solos no sirven de mucho. Necesitas la manera de moverte entre ellos, y ahí entran los eventos y las transiciones [1:43].

La diferencia es sutil pero importante:

• La transición es el movimiento de un estado a otro.
• El evento es la acción concreta que dispara ese movimiento.

En el ejemplo de la clase, si tu máquina está en loading y el request falla, ese fallo es el evento. El paso de loading a mostrar error es la transición [2:00]. Si el request tiene success, el evento es el éxito y la transición lleva a mostrar datos.

Por qué importa separar evento de transición

Separar estos dos conceptos te da claridad cuando modelas flujos complejos. El evento responde a la pregunta qué pasó. La transición responde a hacia dónde voy. Cuando los confundes, terminas con diagramas que mezclan causas y efectos en la misma flecha.

Con estas piezas claras (diagramas, estados, eventos y transiciones) ya tienes el vocabulario base para empezar a modelar máquinas de estado en proyectos reales. ¿Has intentado dibujar el flujo de una pantalla de login con esta lógica? Cuéntame en los comentarios cómo lo estructurarías.