Diagrama de secuencia
Mermaid puede renderizar diagramas de secuencia. El diagrama de secuencia es un tipo de diagrama de interacción que muestra cómo los distintos procesos operan entre sí y el orden de las operaciones.
Copiar
Insertar
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Nota sobre los nodos: debido a cómo está escrito el lenguaje Mermaid, la palabra "end" rompe todo el gráfico. Si necesitas usar "end", debes encerrar la palabra "end" entre paréntesis (), comillas dobles "", llaves {} o corchetes [], es decir: (end), [end], {end}.
Sintaxis
Participante
Los participantes se muestran en el orden en que aparecen en el texto fuente del gráfico. A veces puede que quieras mostrar los participantes en un orden distinto al de su aparición en el primer mensaje; puedes especificar el orden de aparición de los participantes de las siguientes formas:
Copiar
Insertar
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Si quieres usar el símbolo de actor en lugar de un rectángulo con texto, puedes hacerlo con la sentencia de actor, como se muestra a continuación.
Copiar
Insertar
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Puedes definir un alias con as después de la declaración del participante
Copiar
Insertar
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Creación y destrucción de participantes
Los participantes pueden crearse y destruirse mediante mensajes. Para ello, añade la instrucción de creación o destrucción delante del mensaje.
Copiar
Insertar
participant B
A --> B: Hello
La instrucción de creación admite distinguir entre participantes y alias. El emisor o el receptor del mensaje pueden destruirse, pero el receptor solo puede crearse.
Copiar
Insertar
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
Agrupación/caja
Los participantes pueden agruparse en cajas verticales. Puedes usar un símbolo para definir el color (si no se define, será transparente).
Copiar
Insertar
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
Si el nombre de tu grupo es de color, puedes forzar ese color a transparente:
Copiar
Insertar
box transparent Aqua
... actors ...
end
Copiar
Insertar
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
Mensaje
El mensaje puede mostrarse con línea continua o con línea discontinua.
La línea puede ser continua o discontinua, y puede terminar con varios tipos de flechas, cruces o flechas abiertas.
Copiar
Insertar
[Actor][Arrow][Actor]:Message text
Diez tipos de flecha estándar
| Tipo | Descripción |
|---|---|
| -> | Línea continua sin flecha |
| --> | Línea discontinua sin flecha |
| ->> | Línea continua con flecha |
| -->> | Línea discontinua con flecha |
| <<->> | Línea continua con flecha bidireccional |
| <<-->> | Línea discontinua con flecha bidireccional |
| -x | Línea continua con cruz en el extremo |
| --x | Línea discontinua con cruz en el extremo |
| -) | Línea continua con flecha hueca al final (asíncrona) |
| --) | Línea discontinua con flecha hueca al final (asíncrona) |
Activación
Se puede activar y desactivar un actor; la desactivación o activación puede ser una declaración dedicada:
Copiar
Insertar
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
También hay una notación abreviada: añadir + o - después de la flecha del mensaje.
Copiar
Insertar
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Las activaciones del mismo actor pueden superponerse:
Copiar
Insertar
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
Comentario
Puedes añadir comentarios a un diagrama de secuencia. Se puede hacer con los siguientes símbolos: Note[right of] o [left of] o [over][participante]: contenido del comentario
Copiar
Insertar
sequenceDiagram
participant John
Note right of John: Text in note
También puedes crear un comentario que abarque dos participantes:
Copiar
Insertar
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Salto de línea
Puedes añadir saltos de línea en comentarios y mensajes:
Copiar
Insertar
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Los saltos de línea en el nombre del actor requieren definir un alias:
Copiar
Insertar
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
Bucle
En un diagrama de secuencia, un bucle se puede expresar con los siguientes símbolos.
Copiar
Insertar
loop Loop text
... statements ...
end
Consulta el siguiente ejemplo:
Copiar
Insertar
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternativa
En un diagrama de secuencia, una ruta alternativa se puede expresar con símbolos.
Copiar
Insertar
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Copiar
Insertar
opt Describing text...
statements
end
Consulta el siguiente ejemplo:
Copiar
Insertar
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Paralelo
Las acciones que ocurren en paralelo se pueden representar con los siguientes símbolos.
Copiar
Insertar
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Consulta el siguiente ejemplo:
Copiar
Insertar
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
También puedes anidar bloques paralelos.
Copiar
Insertar
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
Región crítica
Puedes mostrar las operaciones que deben ejecutarse automáticamente condicionando las distintas situaciones.
Esto se hace con los siguientes símbolos:
Copiar
Insertar
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Consulta el siguiente ejemplo:
Copiar
Insertar
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
También es posible que no haya ninguna opción.
Copiar
Insertar
critical Establish a connection to the DB
Service-->DB: connect
end
Este bloque crítico también puede anidarse, de forma equivalente a la sentencia par vista arriba.
Interrupción
Puedes indicar la parada de una secuencia en el flujo; normalmente se usa para modelar situaciones excepcionales.
Esto se hace con los siguientes símbolos:
Copiar
Insertar
break [something happened]
... statements ...
end
Consulta el siguiente ejemplo:
Copiar
Insertar
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
Resaltado de fondo
Puedes establecer un rectángulo de fondo de color para resaltar el flujo, y se hace con los siguientes símbolos:
Copiar
Insertar
rect COLOR
... content ...
end
El color se define con la sintaxis rgb y rgba.
Copiar
Insertar
rect rgb(0, 255, 0)
... content ...
end
Copiar
Insertar
rect rgba(0, 0, 255, .1)
... content ...
end
Consulta el siguiente ejemplo:
Copiar
Insertar
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
Comentario
Puedes introducir comentarios en el diagrama de secuencia; el editor los ignorará. El comentario debe ocupar una línea propia y empezar con doble signo de porcentaje %%. Todo el texto desde el inicio del comentario hasta el siguiente salto de línea se considerará comentario, incluida cualquier sintaxis del gráfico.
Copiar
Insertar
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Codificación de entidades para escapar caracteres
Puedes escapar caracteres con la siguiente sintaxis.
Copiar
Insertar
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
El número indicado es decimal, por lo que (#) se puede codificar como (#35;); también se admite el uso de nombres de caracteres HTML.
Como el punto y coma puede sustituir al salto de línea para definir marcas, cuando el texto del mensaje contenga un punto y coma necesitas usar (#59;).
Numeración
Puedes adjuntar un número de secuencia a cada flecha del diagrama de secuencia. Como se muestra a continuación:
Copiar
Insertar
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Menú de participantes
Los participantes pueden incluir un menú emergente con enlaces personalizados a páginas externas. Por ejemplo, si un actor representa un servicio de red, los enlaces útiles podrían incluir un enlace al panel de estado del servicio, el repositorio que contiene el código del servicio o un enlace a la página wiki que describe el servicio.
Se puede configurar añadiendo una o varias líneas de enlace, con el siguiente formato:
Copiar
Insertar
link <actor>: <link-label> @ <link-url>
Copiar
Insertar
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Sintaxis avanzada de menú
Existe una sintaxis avanzada que se basa en el formato JSON. Si dominas el formato JSON, también puedes usarla.
Se puede configurar añadiendo una línea de enlace con el siguiente formato:
Copiar
Insertar
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Copiar
Insertar
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
