Generador de diagramas de estados
Liste las transiciones entre estados y obtenga un diagrama de máquina de estados con los eventos sobre las flechas.
Procesado localmente en tu navegador/ Tus datos se quedan en tu navegador.
¿Qué es Generador de diagramas de estados?
Un diagrama de estados (máquina de estados finita) describe los estados en los que puede estar un objeto o proceso y los eventos que lo llevan de uno a otro. Se usa para ciclos de vida de pedidos, flujos de interfaz, gestión de protocolos y lógica de juegos.
En modo rápido escribe una transición por línea, "Desde -> Hacia: evento", y usa [*] para el inicio y el final. La herramienta lo convierte en código Mermaid stateDiagram-v2, con alias para los nombres que contienen espacios, y muestra el código generado junto al diagrama. También puede pegar su propio código stateDiagram con estados compuestos, bifurcaciones y notas, y fijar la dirección del diseño.
¿Cómo funciona?
- Escriba transiciones como "Reposo -> Procesando: enviar", una por línea; use [*] para el estado inicial y final.
- O pegue código stateDiagram-v2 para estados compuestos, decisiones y notas.
- Elija la dirección del diseño y un tema.
- Exporte SVG o PNG, o copie el código Mermaid generado.
Casos de uso habituales
- Modelar el ciclo de vida de un pedido: creado, pagado, enviado, entregado, cancelado.
- Documentar un flujo de interfaz o asistente con el evento que provoca cada cambio de pantalla.
- Describir un protocolo de red o la máquina de estados de una conexión.
- Planificar la lógica de un juego o de un motor de flujos antes de programarla.
Ejemplos
Prueba esta entrada en la herramienta de arriba:
stateDiagram-v2
direction LR
[*] --> Idle
Idle --> Processing : submit
Processing --> Success : ok
Processing --> Failed : error
Failed --> Idle : retry
Success --> [*]Privacidad
Generador de diagramas de estados se ejecuta por completo en tu navegador. El texto o los archivos que proporcionas se procesan en tu dispositivo y no se suben, registran ni almacenan en nuestros servidores.
Limitaciones
El esquema rápido solo cubre transiciones simples. Los estados compuestos, las bifurcaciones, las uniones, las decisiones y las notas requieren código stateDiagram-v2. Mermaid dibuja el diagrama pero no verifica que la máquina sea completa o determinista.
Preguntas frecuentes
¿Cómo marco los estados inicial y final?
Use [*] como origen del estado inicial ("[*] -> Reposo") y como destino del estado final ("Terminado -> [*]").
¿Pueden los nombres de estado contener espacios?
Sí. Un nombre como "Esperando el pago" se declara como estado con etiqueta e identificador generado, por lo que las transiciones siguen siendo Mermaid válido.
¿Qué diferencia hay entre stateDiagram y stateDiagram-v2?
stateDiagram-v2 es el motor de renderizado más reciente, con mejor diseño y más funciones. El modo esquema siempre genera código v2.
Herramientas relacionadas
Editor Mermaid en vivo
Un editor Mermaid libre: escriba el diagrama como código y obtenga una vista renderizada en vivo que puede exportar.
Markdown y diagramas
Generador de diagramas de flujo
Describa un proceso con una cadena de pasos por línea y obtenga un diagrama de flujo junto con el código Mermaid que lo genera.
Markdown y diagramas
Generador de diagramas de secuencia
Escriba un mensaje por línea y vea quién habla con quién, en orden, como diagrama de secuencia.
Markdown y diagramas
Generador de diagramas de clases
Escriba código classDiagram con clases, miembros y relaciones y vea el diagrama UML al instante.
Markdown y diagramas
Generador de diagramas ER
Describa sus tablas, claves y relaciones como código Mermaid erDiagram y vea el diagrama ER al instante.
Markdown y diagramas
Editor Markdown con vista previa en vivo
Escriba o pegue Markdown en un lado y lea el resultado renderizado en el otro, con estadísticas instantáneas del documento.
Markdown y diagramas