¿Cuál es la diferencia entre stateDiagram y stateDiagram-v2?

`stateDiagram-v2` es la sintaxis recomendada actual en Mermaid v10+. Añade soporte para estados compuestos (anidados), regiones concurrentes, pseudoelecciones, bifurcaciones y uniones — características que faltan en el `stateDiagram` original. La sintaxis v1 todavía funciona para compatibilidad retroactiva, pero todos los diagramas nuevos deben usar `stateDiagram-v2` para acceder al conjunto completo de características.

¿Cómo muestro estados anidados (compuestos) en Mermaid?

Usa un bloque `state` con llaves: `state Procesando { [*] --> Validando \n Validando --> Cargando \n Cargando --> [*] }`. El estado externo 'Procesando' contiene su propia máquina de estados interna. Los estados compuestos modelan flujos de trabajo complejos donde un estado de alto nivel tiene subprocesos internos, como un pedido que pasa por múltiples subpasos mientras está en estado 'Procesando'.

¿Cómo añado etiquetas a las transiciones de estado?

Añade dos puntos después de la flecha de transición: `Inactivo --> Cargando : el usuario envía el formulario`. La etiqueta documenta el evento o la condición que activa la transición. Las transiciones bien etiquetadas convierten un diagrama de estado en una especificación ejecutable — los desarrolladores pueden mapear cada etiqueta directamente a una llamada de función, manejador de eventos o respuesta de API en su implementación.

¿Qué son los estados concurrentes y cuándo debo usarlos?

Los estados concurrentes (usando el separador `--` dentro de un estado compuesto) modelan partes de un sistema que se ejecutan en paralelo. Por ejemplo, un reproductor de música podría tener estados concurrentes para la reproducción (reproduciendo/en pausa) y la visualización (pantalla completa/normal). Usa estados concurrentes cuando dos comportamientos independientes coexisten y cada uno necesita su propia máquina de estados, en lugar de modelar cada combinación como un estado de nivel superior separado.

Visor de Diagramas de Estado Mermaid

Renderiza diagramas de estado y máquinas de estado Mermaid en tu navegador. Previsualiza transiciones y exporta a SVG o PNG. Herramienta online gratuita.

Código Mermaid

Vista Previa

Introduce código Mermaid para previsualizar tu diagrama

Los diagramas de estado modelan el comportamiento de un sistema mostrando todos los estados posibles y las transiciones entre ellos, activadas por eventos. Son esenciales para diseñar máquinas de estados finitos, modelar ciclos de vida de componentes de UI, documentar flujos de trabajo de pedidos y especificar el comportamiento de sistemas embebidos. La sintaxis `stateDiagram-v2` de Mermaid es generada ampliamente por asistentes de IA cuando los desarrolladores hacen preguntas como 'Modela los estados de un pedido de pago', 'Muéstrame el ciclo de vida de un componente de React' o 'Diseña la máquina de estados para un semáforo'. Pegar la salida en Zolkit revela inmediatamente si las transiciones están completas, si hay estados inalcanzables y si la ruta feliz y las rutas de error están conectadas correctamente. El visor de diagramas de estado de Zolkit soporta las características de `stateDiagram-v2`, incluyendo estados iniciales y terminales (`[*]`), etiquetas de transición, estados compuestos (diagramas de estado anidados), estados concurrentes usando `--`, pseudoelecciones y notas. El visor renderiza tanto autómatas finitos simples como máquinas de estado jerárquicas complejas encontradas en aplicaciones del mundo real.

Diagramas Relacionados

← Visor de Diagramas Mermaid Visor de Diagramas de Flujo Mermaid Visor de Diagramas de Secuencia Mermaid Visor de Diagramas de Clases Mermaid

Visor y Exportador de Diagramas Mermaid Online Gratis

El Visor de Diagramas Mermaid de Zolkit te permite pegar cualquier código Mermaid y ver un diagrama renderizado al instante — sin instalación, sin registro, sin subidas a servidores. Todo se ejecuta en tu navegador, lo que lo convierte en la forma más rápida de verificar diagramas generados por IA desde Claude, ChatGPT o Gemini. Soporta todos los tipos principales de diagramas Mermaid: diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, diagramas de estado, mapas mentales, gráficos Git, gráficos circulares y líneas de tiempo.

Vista Previa Instantánea en Vivo

Los diagramas se renderizan automáticamente mientras escribes, con un retardo de 300 ms para que nunca se sienta lento.

100% Privado

Todo el renderizado ocurre en tu navegador usando mermaid.js. Tu código nunca se envía a ningún servidor.

Exportar SVG y PNG

Descarga tu diagrama como un SVG vectorial nítido o un PNG de alta resolución 2× listo para documentos y presentaciones.

Todos los Tipos de Diagramas Mermaid

Soporta diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, mapas mentales, gráficos Git y más.

Listo para Diagramas de IA

Construido para la era de la IA — previsualiza directamente diagramas generados por Claude, ChatGPT, Gemini o cualquier LLM.

Siempre Gratis

No se necesita cuenta, sin límites de uso, sin marcas de agua. El visor Mermaid de Zolkit es completamente gratuito para siempre.

Cómo Previsualizar un Diagrama Mermaid

1
Pega tu código Mermaid en el editor de la izquierda — puedes copiarlo desde un asistente de IA o escribirlo manualmente.
2
El diagrama se renderiza instantáneamente en el panel de vista previa de la derecha. Si hay un error de sintaxis, un mensaje explica el problema.
3
Haz clic en 'Exportar SVG' o 'Exportar PNG' para descargar tu diagrama como un archivo listo para documentación, presentaciones o compartir.