Creador de diagramas de secuencia con Mermaid
Escribe diagramas de secuencia en código Mermaid y míralos dibujarse mientras tecleas. Empieza con el ejemplo de abajo y luego exporta PNG o SVG, comparte un enlace o incrusta el diagrama.
Updated · Code editor with live preview
Ejemplo de diagrama de secuencia
Rendering preview…
sequenceDiagram
actor Usuario
participant App
participant API
Usuario->>App: Pulsa "Iniciar sesión"
App->>API: POST /auth/login
API-->>App: Token
App-->>Usuario: Muestra el panel¿Qué es un diagrama de secuencia?
Un diagrama de secuencia muestra cómo interactúan personas o sistemas a lo largo del tiempo. Cada participante es una línea de vida vertical y cada mensaje es una flecha entre líneas de vida, que se lee de arriba abajo. En Mermaid, un diagrama de secuencia empieza con la palabra clave sequenceDiagram.
Cuándo usar un diagrama de secuencia
- Documentar llamadas a API y flujos de petición y respuesta
- Explicar flujos de inicio de sesión, pago u OAuth
- Diseñar cómo se comunican los microservicios entre sí
- Revisar casos límite como tiempos de espera y reintentos
Cómo crear un diagrama de secuencia en Mermaid
- Paso 1
Abre el editor
Abre TryMermaid con el ejemplo de esta página, o empieza un diagrama nuevo con sequenceDiagram en la primera línea.
- Paso 2
Declara los participantes
Enumera las personas y los sistemas implicados con participant API o actor Usuario. Aparecen de izquierda a derecha en el orden en que los declaras.
- Paso 3
Añade los mensajes
Escribe un mensaje por línea, como Usuario->>App: Iniciar sesión. Usa -->> para las respuestas, que se dibujan como flechas punteadas.
- Paso 4
Añade lógica y exporta
Envuelve los pasos opcionales o repetidos en bloques opt, alt o loop, revisa la vista previa y exporta PNG o SVG o comparte un enlace.
Sintaxis de diagrama de secuencia: chuleta
| Elemento | Sintaxis | Qué hace |
|---|---|---|
| Participante | participant API | Un sistema, se dibuja como caja |
| Actor | actor Usuario | Una persona, se dibuja como monigote |
| Mensaje | A->>B: Texto | Línea sólida con punta de flecha |
| Respuesta | A-->>B: Texto | Línea punteada con punta de flecha |
| Mensaje asíncrono | A-)B: Texto | Línea sólida con flecha abierta |
| Mensaje fallido | A-xB: Texto | Línea que acaba en una cruz |
| Nota | Note right of A: Texto | Nota junto a una línea de vida |
| Bucle | loop Cada minuto … end | Mensajes repetidos |
| Alternativas | alt Éxito … else Fallo … end | Caminos si/si no |
| Numeración | autonumber | Numera todos los mensajes |
Preguntas frecuentes sobre diagrama de secuencia
¿Puedo editar diagramas de secuencia en el lienzo visual?
Todavía no. El lienzo de arrastrar y soltar admite por ahora diagramas de flujo y de clases. Los diagramas de secuencia se editan en código con una vista previa que se actualiza mientras escribes, y se exportan a PNG y SVG como cualquier otro diagrama.
¿Cómo numero los mensajes de un diagrama de secuencia?
Añade autonumber en su propia línea justo después de sequenceDiagram. Mermaid pondrá entonces un número creciente en cada flecha de mensaje, lo que facilita comentar flujos largos.
¿Cómo muestro una condición o un camino alternativo?
Usa un bloque alt: escribe alt seguido de la primera condición, los mensajes de ese caso, else seguido de la otra condición y sus mensajes, y termina con end. Usa opt para un bloque opcional único y loop para pasos repetidos.