Mermaid 11.15.0

Guía rápida de diagramas de secuencia en Mermaid

Los diagramas de secuencia muestran mensajes entre participantes. Usa un diagrama de flujo para decisiones o uno de clases para estructuras estáticas.

Crear con el Generador de diagramas de secuencia →

Inicio rápido

Declara los alias antes de los mensajes para fijar el orden de las líneas de vida.

Mermaid

Abrir en el editor →

sequenceDiagram
  actor R as Lector
  participant S as Servicio de búsqueda
  R->>+S: Buscar guía
  S-->>-R: Devolver resultados

Cargando…

Referencia de sintaxis

Referencia de sintaxis
Sintaxis	Significado
sequenceDiagram / participant / actor / as	Declara líneas de vida y alias; actor usa un símbolo de persona.
participant A@{ "type": "boundary" }	Tipos: boundary, control, entity, database, collections y queue; participant y actor cubren los casos básicos.
->	Línea continua sin punta
-->	Línea discontinua sin punta
->>	Flecha continua
-->>	Flecha discontinua
<<->>	Flecha bidireccional continua
<<-->>	Flecha bidireccional discontinua
-x	Línea continua con cruz
--x	Línea discontinua con cruz
-)	Flecha abierta continua, asíncrona
--)	Flecha abierta discontinua, asíncrona
-\|\	Variante de media flecha; el ejemplo muestra orientación y trazo.
--\|\	Variante de media flecha; el ejemplo muestra orientación y trazo.
-\|/	Variante de media flecha; el ejemplo muestra orientación y trazo.
--\|/	Variante de media flecha; el ejemplo muestra orientación y trazo.
/\|-	Variante de media flecha; el ejemplo muestra orientación y trazo.
/\|--	Variante de media flecha; el ejemplo muestra orientación y trazo.
\\-	Variante de media flecha; el ejemplo muestra orientación y trazo.
\\--	Variante de media flecha; el ejemplo muestra orientación y trazo.
-\\	Variante de media flecha; el ejemplo muestra orientación y trazo.
--\\	Variante de media flecha; el ejemplo muestra orientación y trazo.
-//	Variante de media flecha; el ejemplo muestra orientación y trazo.
--//	Variante de media flecha; el ejemplo muestra orientación y trazo.
//-	Variante de media flecha; el ejemplo muestra orientación y trazo.
//--	Variante de media flecha; el ejemplo muestra orientación y trazo.
A->>()B / A()->>B / A()->>()B	Conecta un mensaje al centro de la línea de vida emisora o receptora.
activate / deactivate / ->>+ / -->>-	Inicia y termina activaciones; las activaciones anidadas deben quedar equilibradas.
create participant / create actor / destroy	Crea antes del primer mensaje entrante y destruye antes del mensaje final.
Note left of / right of / over A,B	Sitúa notas junto a una línea o sobre varias; <br/> introduce saltos.
loop / alt / else / opt / par / and / critical / option / break / rect / end	Cierra cada bloque con end; else, and y option pertenecen a sus respectivos bloques. rect recibe un color.
autonumber / autonumber 10 5	Numera mensajes; puedes indicar inicio e incremento.
box Color Label / end	Agrupa declaraciones de participantes en una caja de color o transparente.
link A: Label @ URL / links A: {"Label":"URL"}	Añade un enlace o un menú JSON al participante.
%% / accTitle: / accDescr:	Comentarios y descripciones accesibles.

Participantes y alias

Los ids son cortos y los alias contienen el texto visible. La configuración JSON cambia el símbolo; declara todas las líneas de vida antes de enviar mensajes.

Mermaid

Abrir en el editor →

sequenceDiagram
  actor R as Lector
  participant B@{ "type": "boundary" }
  participant C@{ "type": "control" }
  participant E@{ "type": "entity" }
  participant D@{ "type": "database" }
  participant L@{ "type": "collections" }
  participant Q@{ "type": "queue" }
  R->>B: Solicitud
  B->>C: Validar
  C->>E: Leer
  E->>D: Consulta
  D-->>L: Resultados
  L-)Q: Notificar

Cargando…

Tipos de flecha

Elige una flecha según la convención de tu documentación. Las abiertas suelen indicar envío asíncrono; una cruz dibujada no destruye la línea de vida sin destroy.

Mermaid

Abrir en el editor →

sequenceDiagram
  participant A as Emisor
  participant B as Receptor
  A->B: Mensaje
  A-->B: Mensaje
  A->>B: Mensaje
  A-->>B: Mensaje
  A<<->>B: Mensaje
  A<<-->>B: Mensaje
  A-xB: Mensaje
  A--xB: Mensaje
  A-)B: Mensaje
  A--)B: Mensaje
  A-|\B: Mensaje
  A--|\B: Mensaje
  A-|/B: Mensaje
  A--|/B: Mensaje
  A/|-B: Mensaje
  A/|--B: Mensaje
  A\\-B: Mensaje
  A\\--B: Mensaje
  A-\\B: Mensaje
  A--\\B: Mensaje
  A-//B: Mensaje
  A--//B: Mensaje
  A//-B: Mensaje
  A//--B: Mensaje
  A()->>()B: Conexión central

Cargando…

Creación y activación

create va inmediatamente antes del mensaje de creación y destroy antes del mensaje final. Equilibra cada activación.

Mermaid

Abrir en el editor →

sequenceDiagram
  participant C as Controlador
  create participant W as Trabajador
  C->>+W: Iniciar trabajo
  Note right of W: Proceso temporal
  W-->>-C: Trabajo terminado
  destroy W
  C-xW: Detener proceso

Cargando…

Bloques de control

Cierra los bloques con end. else separa alternativas, and ramas paralelas y option recuperaciones de critical. break representa una salida excepcional.

Mermaid

Abrir en el editor →

sequenceDiagram
  participant C as Cliente
  participant S as Servicio
  loop Reintento
    C->>S: Solicitud
    alt Aceptado
      S-->>C: Resultado
    else Rechazado
      S-->>C: Error
    end
  end
  opt Caché disponible
    S-->>C: Resultado en caché
  end
  par Registro
    S->>S: Registrar
  and Métricas
    S->>S: Contar
  end
  critical Confirmación
    S->>S: Guardar
  option Fallo
    S-->>C: Revertir
  end
  break Tiempo agotado
    S-->>C: Detener
  end
  rect rgb(230,240,255)
    Note over C,S: Límite de revisión
  end

Cargando…

Cajas, números y menús

box agrupa declaraciones, no mensajes. link y links crean menús si el anfitrión permite la interacción.

Mermaid

Abrir en el editor →

sequenceDiagram
  autonumber 10 5
  box transparent Documentación
    participant R as Lector
    participant G as Guía
  end
  link G: Referencia @ https://themarkdowner.com
  links R: {"Inicio":"https://themarkdowner.com"}
  R->>G: Abrir
  Note over R,G: Contexto compartido

Cargando…

Opciones de presentación

mirrorActors repite participantes al pie; wrap ajusta mensajes y actorMargin separa líneas de vida. Estas opciones no cambian el orden de los mensajes.

Mermaid

Abrir en el editor →

---
config:
  sequence:
    mirrorActors: false
    wrap: true
    actorMargin: 60
---
sequenceDiagram
  participant R as Lector
  participant G as Guía
  R->>G: Leer referencia

Cargando…

Errores frecuentes

Dejar un bloque abierto

Añade un end por cada bloque anidado.

Sintaxis incorrecta: ejemplo corregido abajo

sequenceDiagram
  loop Reintento
    A->>B: Solicitud

Mermaid

Abrir en el editor →

sequenceDiagram
  loop Reintento
    A->>B: Solicitud
  end

Cargando…

Usar end como texto sin protección

end es una palabra especial; usa comillas o corchetes si causa ambigüedad y evita ids reservados.

Limitaciones

La disposición controla la posición horizontal; no puedes arrastrar libremente las líneas de vida.
Los mensajes siguen el código, sin una escala temporal numérica.
Los menús dependen del anfitrión.

Preguntas frecuentes

¿Qué diferencia hay entre actor y participant?

actor dibuja una persona y participant normalmente una caja; ambos intercambian mensajes y participant admite otros símbolos.

¿Cómo dibujo una respuesta?

Usa -->> para una respuesta discontinua; añade un signo menos si también termina una activación.

¿Cómo represento trabajo simultáneo?

Usa par con ramas separadas por and y termina con end.

Guía rápida de diagramas de secuencia en Mermaid

Inicio rápido

Referencia de sintaxis

Participantes y alias

Tipos de flecha

Creación y activación

Bloques de control

Cajas, números y menús

Opciones de presentación

Errores frecuentes

Dejar un bloque abierto

Usar end como texto sin protección

Limitaciones

Guías rápidas relacionadas

Preguntas frecuentes