🔄 Mermaid

Diagrama de estados

Captura cada estado y transición de un sistema

Abrir este ejemplo en el editor Generar uno con IA

¿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?».

Ejemplo en directo

Código Mermaid

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Ejemplo en directo

Cuándo usarlo

Modelar los ciclos de vida de pedidos, tickets o documentos

Diseñar los estados de componentes de UI y de conexiones

Especificar las reglas de negocio en torno a las transiciones de estado

Sintaxis básica

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

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.

Explora otros tipos de diagramas

🔀 Diagrama de flujo 💬 Diagrama de secuencia 🧩 Diagrama de clases 🗄️ Diagrama entidad-relación 📅 Diagrama de Gantt 🥧 Gráfico circular 🧠 Mapa mental 🌿 Grafo Git 🕰️ Línea de tiempo 🚶 Recorrido del usuario 🎯 Gráfico de cuadrantes

Crea tu Diagrama de estados ahora

Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.

Abrir Mermaid Studio