Creador de diagramas de estados con Mermaid
Escribe diagramas de estados en código Mermaid y míralos dibujarse mientras tecleas. Empieza con el ejemplo de abajo y luego exporta PNG o SVG, comparte un enlace o incrusta el diagrama.
Updated · Code editor with live preview
Ejemplo de diagrama de estados
Rendering preview…
stateDiagram-v2
[*] --> Borrador
Borrador --> Revisión : enviar
Revisión --> Borrador : pedir cambios
Revisión --> Publicado : aprobar
Publicado --> Archivado : archivar
Archivado --> [*]¿Qué es un diagrama de estados?
Un diagrama de estados muestra los estados en los que puede estar algo y los eventos que lo llevan de un estado a otro. Se usa a menudo para describir una máquina de estados, como el ciclo de vida de un pedido o de un componente de interfaz. En Mermaid empieza con la palabra clave stateDiagram-v2.
Cuándo usar un diagrama de estados
- Modelar ciclos de vida de pedidos, tickets o documentos
- Diseñar estados de componentes de interfaz como carga, error y éxito
- Documentar una máquina de estados del código
- Acordar qué transiciones están permitidas
Cómo crear un diagrama de estados en Mermaid
- Paso 1
Abre el editor
Abre TryMermaid con el ejemplo de esta página, o empieza un diagrama nuevo con stateDiagram-v2 en la primera línea.
- Paso 2
Añade el inicio y el final
Usa [*] --> Borrador para marcar dónde empieza la máquina y Archivado --> [*] para marcar dónde termina.
- Paso 3
Añade transiciones
Escribe una transición por línea, como Borrador --> Revisión : enviar. El texto tras los dos puntos es el evento que provoca el cambio.
- Paso 4
Agrupa estados y exporta
Anida estados relacionados dentro de un bloque de estado compuesto, revisa la vista previa y exporta PNG o SVG o comparte un enlace.
Sintaxis de diagrama de estados: chuleta
| Elemento | Sintaxis | Qué hace |
|---|---|---|
| Inicio o fin | [*] | Punto inicial o final relleno |
| Transición | A --> B | Flecha entre estados |
| Evento | A --> B : enviar | Etiqueta sobre una transición |
| Estado compuesto | state Pago { … } | Estados anidados dentro de otro |
| Elección | state check <<choice>> | Bifurcación según una condición |
| Bifurcación y unión | state split <<fork>> | Divide o une caminos paralelos |
| Nota | note right of A : Texto | Nota junto a un estado |
| Concurrencia | -- | Regiones paralelas en un estado compuesto |
Preguntas frecuentes sobre diagrama de estados
¿Cuál es la diferencia entre stateDiagram y stateDiagram-v2?
Ambas palabras clave dibujan diagramas de estados. stateDiagram-v2 usa el renderizador más reciente de Mermaid y es la recomendada para diagramas nuevos; la antigua se mantiene para que los diagramas existentes sigan funcionando.
¿Cómo muestro una decisión en un diagrama de estados?
Declara un estado de elección con state esValido <<choice>>, apunta una transición hacia él y añade una transición de salida por resultado, por ejemplo esValido --> Aprobado : sí y esValido --> Rechazado : no.