Mermaid Diagram Editor

Generador de Diagramas de Secuencia Mermaid

Crea diagramas de secuencia con sintaxis Mermaid. Participantes, mensajes, barras de activación, bucles y bloques alternativos. Vista previa en vivo.

100% del lado del cliente. Tus datos nunca salen de tu navegador.

Plantillas:

Cargando editor...

La vista previa del diagrama aparecerá aquí...

Sintaxis de Diagrama de Secuencia Mermaid

Los diagramas de secuencia muestran como los componentes interactuan a lo largo del tiempo. Cada línea vertical es un participante (servicio, usuario, sistema) y las flechas horizontales son los mensajes que pasan entre ellos. Es el método estándar para documentar flujos de API, handshakes de autenticación e interacciones en sistemas distribuidos.

Participantes

Declara participantes para controlar su orden de izquierda a derecha:

sequenceDiagram
    participant Navegador
    participant API
    participant BaseDeDatos

Sin declaraciones participant explicitas, Mermaid los crea en el orden en que aparecen por primera vez. Usa actor en lugar de participant para usuarios humanos.

Tipos de Mensaje

SintaxisSignificado
A->>B: textoLlamada sincrona (línea recta, flecha llena)
A-->>B: textoAsync/retorno (línea punteada, flecha llena)
A-xB: textoMensaje perdido (recta, cruz)
A--xB: textoPerdido async (punteada, cruz)

Barras de Activación

Muestra que un participante está procesando activamente:

sequenceDiagram
    Cliente->>+API: Solicitud
    API->>+BD: Consulta
    BD-->>-API: Resultado
    API-->>-Cliente: Respuesta

+ después de ->> activa al destino. - lo desactiva.

Flujo de Control

Condicionales

alt Exitoso
    API-->>Cliente: 200 OK
else No encontrado
    API-->>Cliente: 404
end

Bucles

loop Cada 30 segundos
    Cliente->>API: Ping
    API-->>Cliente: ACK
end

Opcional

opt Si hay cache
    API->>Cache: Obtener resultado
    Cache-->>API: Datos en cache
end

Notas

Note left of API: Válida JWT
Note right of BD: Replica de lectura
Note over Cliente,API: Solo HTTPS

Numeración

Agrega autonumber después de sequenceDiagram para numerar automáticamente cada mensaje.

Patrones Practicos

Autenticación REST API

El estado inicial de este ejemplo muestra un flujo de inicio de sesión completo seguido de una solicitud autenticada. Este patrón aparece en casi todas las aplicaciones web.

Para documentación del modelo de datos, el Diagrama ER Mermaid muestra las relaciones entre tablas. Para flujos de proceso sin orden temporal, usa el Diagrama de Flujo Mermaid.