Nombra las líneas de vida con claridad
Usa alias estables para el código y etiquetas legibles para las personas y servicios.
Modela llamadas API, interacciones de servicios y flujos de autenticación visualmente mientras generas código Mermaid limpio.
Interacciones de sistemas editables
Alterna entre la edición y el resultado en vivo.
Vista previa en vivo de Mermaid
Preparando diagrama…
Vista previa con desplazamiento. Usa las teclas de flecha para desplazarte, Shift con flecha para avanzar más rápido y Home para volver al inicio.
Generando tu primera vista previa…
La vista previa se actualiza al editar.
Preparando editor…
Documenta la comunicación entre sistemas
Un diagrama de secuencia hace visible el orden de los mensajes, responsabilidades y caminos alternativos.
Usa alias estables para el código y etiquetas legibles para las personas y servicios.
Usa bloques loop, alt, opt y par cuando el flujo de control sea relevante para el lector.
El código generado se mantiene compacto para ser revisado junto a la implementación.
Patrón de sintaxis
Declara cada participante una vez, usa flechas para los mensajes y agrupa comportamientos condicionales en bloques. Abrir la referencia de sintaxis de diagramas de secuencia
sequenceDiagram
actor User
participant API
User->>API: Submit request
alt Valid input
API-->>User: 200 OK
else Invalid input
API-->>User: 400 Bad Request
end Este generador de diagramas de secuencia gratuito convierte interacciones ordenadas en diagramas Mermaid en tiempo real.
Un diagrama de secuencia ilustra cómo interactúan procesos, servicios o actores a lo largo del tiempo en un orden secuencial.
Sí. Usa flechas continuas con punta rellena (->>) para llamadas síncronas y flechas punteadas (-->>) para respuestas.
Sí. El constructor visual admite bloques loop, alt, opt y par.