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
| Sintaxis | Significado |
|---|---|
A->>B: texto | Llamada sincrona (línea recta, flecha llena) |
A-->>B: texto | Async/retorno (línea punteada, flecha llena) |
A-xB: texto | Mensaje perdido (recta, cruz) |
A--xB: texto | Perdido 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.