Diagramas de estado
Representa transiciones de estado en sistemas o aplicaciones. Excelentes para modelar estados de ciclo de vida y flujos de trabajo.
¿Qué es Diagramas de estado?
Los diagramas de estado, también conocidos como diagramas de máquina de estados, visualizan los diferentes estados en que un objeto o sistema puede estar y cómo transiciona entre estados en respuesta a eventos. Son esenciales para modelar comportamiento de ciclo de vida, flujos de trabajo y lógica condicional compleja. Cada estado representa una condición estable, mientras que las transiciones muestran disparadores que causan cambios de estado.
Editar y previsualizar
Construye un Diagramas de estado con sintaxis Mermaid y observa los cambios instantáneamente.
Example
State diagram example
A Mermaid state diagram for a diagram moving from draft to preview, edit, and export.
Mermaid code
stateDiagram-v2
[*] --> Draft
Draft --> Preview: render
Preview --> Editing: update code
Preview --> Exported: download PNG
Editing --> Preview: render again
Exported --> [*]Casos de uso comunes
Gestión de estado de aplicaciones
Modela estados de UI, flujos de validación de formularios y modos de aplicación. Esencial para diseñar máquinas de estado en frameworks frontend como React o Vue.
Modelado de flujos de trabajo
Diseña flujos de aprobación, estados de procesamiento de pedidos y gestión de ciclo de vida de tickets. Mapea transiciones de estado y condiciones de guarda para procesos empresariales.
Diseño de protocolos
Visualiza estados de protocolos de red, ciclos de vida de conexiones y máquinas de estado de comunicación. Crucial para programación de sistemas embebidos y dispositivos IoT.
Desarrollo de videojuegos
Modela estados de personajes, modos de juego y progresión de niveles. Diseña máquinas de estado finitas para comportamiento de IA y mecánicas de juego.
Características principales
Tipos de estados
Soporte para estados simples, estados compuestos y estados especiales como inicial, final y pseudoestados de elección.
Guardas de transición
Define transiciones condicionales con condiciones de guarda y acciones que se ejecutan durante cambios de estado.
Estados anidados
Crea máquinas de estado jerárquicas con estados padre e hijo para modelar comportamiento complejo.
Estados concurrentes
Modela máquinas de estado paralelas y regiones ortogonales para sistemas con comportamiento concurrente.
Mejores prácticas
Empieza simple
Comienza con estados de alto nivel y refina gradualmente. Usa estados compuestos para ocultar complejidad hasta que sea necesaria.
Nombra estados como condiciones
Usa adjetivos o participios pasados (ej. 'Activo', 'Suspendido', 'Completado') en lugar de verbos.
Documenta las transiciones
Etiqueta todas las transiciones con eventos, condiciones de guarda y acciones. Cada flecha debe contar una historia clara.
Evita la explosión de estados
Si tienes demasiados estados, busca patrones para combinarlos o usa variables de estado en su lugar.
Explora otros tipos de diagramas
Diagramas de flujo
Visualiza procesos, flujos de trabajo y algoritmos con nodos y flechas direccionales. Perfectos para procesos empresariales y árboles de decisión.
Diagramas de secuencia
Documenta interacciones entre diferentes actores o sistemas a lo largo del tiempo. Ideales para documentación de API y diseño de sistemas.
Diagramas de clases
Modela sistemas orientados a objetos con clases, atributos y relaciones. Esenciales para planificación de arquitectura de software.
Diagramas de Gantt
Planifica y rastrea cronogramas de proyectos con tareas y dependencias. Perfectos para gestión de proyectos y programación.
Diagramas ER
Diseña esquemas de bases de datos con entidades y relaciones. Ideales para modelado y documentación de bases de datos.
Viaje del usuario
Mapea experiencias e interacciones del usuario a través de puntos de contacto. Excelentes para diseño UX y mapeo del recorrido del cliente.
Grafos Git
Visualiza estrategias de ramificación Git e historiales de commits. Útiles para explicar flujos de trabajo de control de versiones.
Mapas mentales
Organiza ideas, genera lluvias de ideas y crea estructuras visuales jerárquicas. Perfectos para planificación y mapeo de conocimiento.
Gráficos circulares
Muestra distribuciones de datos proporcionales con gráficos circulares. Ideales para mostrar porcentajes y desglose de cuotas de mercado.
Líneas de tiempo
Visualiza eventos cronológicos e hitos a lo largo de un eje temporal. Excelentes para historiales de proyectos y hojas de ruta.
Tableros Kanban
Organiza tareas en columnas que representan etapas del flujo de trabajo. Perfectos para gestión ágil de proyectos y seguimiento de tareas.
Gráficos de cuadrantes
Ubica elementos en una cuadrícula de dos ejes para comparar y priorizar. Ideales para priorización de funciones y análisis estratégico.
Diagramas Sankey
Visualiza cantidades de flujo entre nodos con flechas proporcionales. Perfectos para flujos de energía, asignación de presupuesto y embudos de conversión.
Gráficos XY
Crea gráficos de barras y líneas con ejes personalizables. Ideales para visualización de datos y análisis de tendencias.
Diagramas de bloques
Construye diseños estructurados con bloques organizados en columnas y filas. Excelentes para arquitectura de sistemas y resúmenes de componentes.
Diagramas de arquitectura
Diseña arquitectura de nube y sistemas con iconos de servicios y conexiones. Perfectos para documentación de infraestructura.
Diagramas de paquetes
Visualiza estructuras de paquetes de protocolos de red con diseños de campos a nivel de bits. Esenciales para documentación de protocolos de red.