Diagrama de estados
Captura cada estado y transición de un sistema
¿Qué es un Diagrama de estados?
Un diagrama de estados muestra los estados en los que puede encontrarse un objeto y los eventos que lo mueven entre ellos: ciclos de vida de pedidos, flujos documentales, estados de interfaz, gestión de conexiones. Esencial siempre que importe «¿en qué estado estamos?».
Los diagramas de estados pertenecen a las especificaciones, donde «¿puede un pedido reembolsado volver a enviado?» tiene que tener respuesta. Son el único diagrama que hace visibles las transiciones ilegales: lo que no está dibujado no está permitido, y eso convierte la imagen en un plan de pruebas. Su límite es la combinatoria — dos máquinas independientes en un mismo diagrama producen un producto cartesiano ilegible. Sepáralas, o anídalas en estados compuestos.
Ejemplo en directo
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : request changes
Review --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]Cuándo usarlo
Errores frecuentes
Los nombres de varias palabras se parten
Waiting for payment --> Paid crea tres estados llamados Waiting, for y payment. Nombra el estado una vez con state "Waiting for payment" as waiting y usa después el identificador corto waiting en cada transición.
Un [*] anidado no es el inicio
Un [*] escrito dentro de un estado compuesto marca la entrada de ese compuesto, no la del diagrama. Si todos los [*] están anidados, el diagrama se queda sin punto de entrada y nadie sabe por dónde empezar.
Las etiquetas son eventos, no código
El texto tras los dos puntos es libre: score > 80 se muestra pero nunca se evalúa, y dos transiciones pueden llevar condiciones contradictorias sin queja alguna. Revísalas como revisas la prosa, no como revisas la lógica.
Sintaxis básica
stateDiagram-v2
[*] --> Idle
Idle --> Active : start
Active --> [*] : stopstateDiagram-v2 direction LRUsa el renderizador -v2, aquel para el que está escrita la sintaxis actual. Añadir direction LR conviene a ciclos de vida largos y lineales que si no se salen por abajo.
[*] --> Draft Draft --> Review : submit[*] es el marcador de inicio a la izquierda de una flecha y el estado final a la derecha. El texto tras los dos puntos nombra el evento que dispara la transición.
state Payment { [*] --> Pending Pending --> Captured }Un estado compuesto esconde una submáquina detrás de una sola caja. Una transición puede apuntar al compuesto en sí, en el que se entra por su propio marcador de inicio.
state gate <<choice>> gate --> Approved : score > 80Un pseudoestado de elección ramifica según una condición sin inventar un estado falso para ella. Los marcadores <<fork>> y <<join>> hacen lo mismo con los caminos paralelos.
Preguntas sobre este diagrama
¿Cuál es la diferencia con un diagrama de flujo?
Un diagrama de flujo sigue un proceso de principio a fin. Un diagrama de estados describe todos los estados posibles de una cosa y qué eventos provocan las transiciones — incluidos ciclos y estados de error.
¿Admite Mermaid estados anidados?
Sí — stateDiagram-v2 admite estados compuestos (anidados), forks, joins, elecciones y notas para máquinas de estados realistas.
¿Puede un diagrama de estados de Mermaid expresar guardas y acciones de entrada y salida?
No formalmente. Una transición lleva una sola etiqueta de texto libre, así que una guarda como score > 80 se escribe ahí como prosa y nada la hace cumplir. Tampoco hay sintaxis de entry o exit: ponlas en una nota junto al estado.
¿Cómo muestro un estado que vuelve sobre sí mismo?
Pon el mismo estado a ambos lados de la flecha: Draft --> Draft : edit. Mermaid lo dibuja como un bucle sobre la caja y conserva la etiqueta; y varias transiciones entre los dos mismos estados mantienen cada una su etiqueta en lugar de fundirse.
¿Puedo dar un color distinto a un estado?
Sí. classDef bad fill:#fdd define un estilo y class Failed bad lo aplica, de modo que los estados de error o terminales destacan. El estilo vive en el código, así que sobrevive a la exportación en PNG y SVG.
¿Cómo exporto un diagrama de estados para una presentación?
Exporta PNG a 2× o 4× si va a proyectarse, o SVG cuando la herramienta lo acepte, ya que el SVG se mantiene nítido y conserva el texto seleccionable. El código Mermaid sigue siendo la versión que editas y vuelves a exportar.
¿Diagrama de estados u otro tipo de diagrama?
¿Diagrama de estados o diagrama de secuencia?
El de secuencia muestra un camino a través de varios participantes; el de estados, todos los caminos de un solo participante. Si la pregunta interesante es «qué respondió la API», usa secuencia. Si es «podemos volver aquí alguna vez», usa estados.
¿Diagrama de estados o diagrama de clases?
El de clases da a un pedido sus campos y sus relaciones; el de estados le da una vida. Escribe el de clases cuando pregunten qué datos existen, y el de estados cuando pregunten qué transiciones debe rechazar el código.
Crea tu Diagrama de estados ahora
Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.
Abrir Mermaid Studio