Máquina de estados

Ciclo de vida de un objeto.

Definición

La máquina de estados dibuja los estados por los que pasa un objeto y las transiciones entre ellos, con el verbo que las dispara y su condición. Cada estado lleva escrito lo que es cierto mientras el objeto está en él, y las transiciones prohibidas se dibujan tachadas. Sirve para acordar el ciclo de vida de un pedido, una cuenta o una solicitud.

Editar con tus datos SVG Spec JSON

Un objeto no tiene pasos: tiene estados, y cada salto pide su guarda

Datos: tipo · nombre · fila · columna · invariante · nota · desde · hasta · accion · guarda · prohibida · bucle · desvio · rol
Buena para: Acordar qué estados tiene un objeto y qué paso entre ellos está permitido.
Evítala cuando: Cuando quieres contar cuándo estuvo cada caso en cada estado: aquí solo hay reglas, no historia.
Se lee bien: Entre 2 y 12 elementos; dibuja hasta 24
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`tipo`	string	Si la fila es un estado o una transición. Obligatoria: sin ella todas las filas caen en la misma celda y la pieza se niega en vez de recolocar.
`nombre`	string	El nombre del estado, que es la clave de las transiciones. Obligatorio: «hay un estado sin `Nombre`; el nombre es la clave de las transiciones».
`fila`	number	Coordenada vertical del estado. Obligatoria: medido, quitando `fila` Y `columna` a la vez la pieza NO recoloca — dos estados caen en la misma celda y falla nombrándolos.
`columna`	number	Coordenada horizontal. Misma regla que `fila`.
`invariante` · opcional	string	Lo que es cierto mientras el objeto está en ese estado.
`nota` · opcional	string	El matiz bajo el estado.
`desde`	string	El estado del que sale la transición. Obligatorio en las transiciones.
`hasta`	string	El estado al que llega. Obligatorio en las transiciones.
`accion` · opcional	string	El verbo que dispara la transición.
`guarda` · opcional	string	La condición, entre corchetes, bajo el verbo.
`prohibida` · opcional	string	Marca la transición que NO puede ocurrir: se dibuja tachada en vez de no dibujarse.
`bucle` · opcional	string	Por qué lado sale el bucle sobre el mismo estado.
`desvio` · opcional	number	Desvío de la transición para que dos que unen los mismos estados no se pisen.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable. `ausente` es el estado que existe en el negocio y nadie ha modelado.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Describes las reglas y no la historia de casos concretos?

Si quieres ver en qué estado estuvo cada elemento y cuándo, la línea de estados lo pone en el tiempo.

Sí: quédate con máquina de estados

No: usa Línea de estados

¿Lo que cambia es el estado de un objeto y no el trabajo de alguien?

Si describes los pasos de un trabajo con sus bifurcaciones, el diagrama de flujo de trabajo es más claro.

Sí: quédate con máquina de estados

No: usa Diagrama de flujo de trabajo

¿Los estados pueden saltar entre sí, no siempre en el mismo orden?

Si siempre se pasa por los mismos pasos y se vuelve al inicio, el ciclo cerrado basta.

Sí: quédate con máquina de estados

No: usa Ciclo cerrado

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('concept-statemachine');
spec.data.rows = misFilas; // tipo, nombre, fila, columna, desde, hasta
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Por qué se dibujan las transiciones prohibidas?

Porque el ciclo de vida también es lo que no puede pasar. Tachadas se ven; omitidas, se olvidan.

¿Quién decide dónde va cada estado?

Tú, con su fila y su columna, que son obligatorias. La pieza no recoloca: si dos estados caen en la misma celda, falla nombrándolos.

¿Qué es la invariante?

Lo que es cierto mientras el objeto está en ese estado, escrito dentro de él.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «flujos y recorridos»

Guía para elegir: flujos y recorridos →