Generador de diagramas de estados
Modela una máquina de estados como texto y mírala renderizarse. Define estados, transiciones y eventos con stateDiagram-v2 de Mermaid — ciclos de vida de pedidos, estados de conexión, flujos de aprobación — todo en tu dispositivo.
One step per line. Indent two spaces to branch beneath the line above.
Estados, transiciones y eventos entre ellos
Un diagrama de estados responde "¿qué puede ser esto, y cómo se mueve entre esos estados?" El stateDiagram-v2 de Mermaid mapea directamente a eso: "[*]" marca inicio y fin, cada "A --> B: event" es una transición etiquetada, y un compuesto "state Name { … }" anida sub-estados para comportamiento más rico. Es la forma más clara de precisar un ciclo de vida de pedido, un protocolo de conexión, o una ruta de aprobación de documento.
Escribirlo como texto significa que el modelo se mantiene honesto. Agrega un estado, nombra el evento que lo alcanza, re-renderiza — el diseño fluye automáticamente y el diagrama nunca se desvía de las reglas que documenta.
De un enum de estado a una imagen
Si tu código ya tiene un campo de estado — pendiente, pagado, enviado, cancelado — un diagrama de estados convierte ese enum en algo que todo un equipo puede razonar, incluyendo las transiciones que tu código permite y las que prohíbe. Etiqueta cada flecha con el evento o método que la desencadena para que el diagrama se lea como la especificación.
Coloca el bloque Mermaid en un documento de diseño o solicitud de extracción y los revisores pueden detectar una transición faltante o una ruta imposible antes de que se convierta en un error.
Preguntas frecuentes
¿Cómo hago un diagrama de estados a partir de texto?
Comienza con "stateDiagram-v2", marca el inicio con "[*] --> First", luego agrega transiciones como "Pending --> Paid: payment confirmed". Los estados finales usan "Last --> [*]". Se renderiza en vivo y exporta a SVG o PNG.
¿Cómo etiqueto una transición con su evento?
Coloca el disparador después de dos puntos en la flecha, por ejemplo "Draft --> Submitted: submit". La etiqueta muestra el evento, método o condición que causa el cambio de estado.
¿Puedo anidar estados (estados compuestos)?
Sí — envuelve sub-estados en "state Name { … }" con su propio inicio "[*] --> …". La hoja de trucos anterior muestra la sintaxis; el ejemplo del reproductor de multimedia demuestra un estado compuesto Playing.
¿Cuál es la diferencia entre un diagrama de estados y un diagrama de flujo?
Un diagrama de flujo muestra un proceso — pasos y decisiones ejecutados una vez. Un diagrama de estados muestra los estados que un objeto puede ocupar durante su vida útil y los eventos que lo mueven entre ellos, por lo que los bucles a estados anteriores son normales.
¿Mi diagrama de estados se sube a algún lugar?
No. Se renderiza en tu navegador con Mermaid, por lo que tus estados, eventos y lógica interna nunca dejan tu dispositivo.