Diagrama de sequência
O Mermaid pode renderizar diagramas de sequência. Um diagrama de sequência é um diagrama de interação que mostra como vários processos operam entre si e a ordem das operações.
Copiar
Incorporar
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Observação sobre os nós: devido à forma como a linguagem Mermaid é escrita, a palavra "end" quebra todo o gráfico. Se for necessário usar "end", é preciso envolvê-la com parênteses (), aspas duplas "", chaves {} ou colchetes [], ou seja: (end), [end], {end}.
Sintaxe
Participante
Os participantes são exibidos na ordem em que aparecem no texto-fonte do diagrama. Às vezes, você pode querer exibir os participantes em uma ordem diferente da primeira mensagem; isso pode ser feito especificando a ordem de entrada dos participantes da seguinte maneira:
Copiar
Incorporar
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Se você quiser usar o símbolo de ator em vez de um retângulo com texto, pode fazer isso usando a instrução de ator, como mostrado abaixo.
Copiar
Incorporar
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Você pode usar as após a declaração do participante para definir um alias
Copiar
Incorporar
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Criação e destruição de participantes
Os participantes podem ser criados e destruídos por meio de mensagens. Assim, adicione a instrução de criação ou destruição antes da mensagem.
Copiar
Incorporar
participant B
A --> B: Hello
A instrução de criação permite distinguir entre participantes e aliases. O remetente ou o destinatário de uma mensagem pode ser destruído, mas o destinatário só pode ser criado.
Copiar
Incorporar
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
Agrupamento/caixa
Os participantes podem ser agrupados em caixas verticais. Você pode usar símbolos para definir cores (se não definidas, a cor será transparente).
Copiar
Incorporar
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
Se o nome do seu grupo for colorido, você pode forçar essa cor a ser transparente:
Copiar
Incorporar
box transparent Aqua
... actors ...
end
Copiar
Incorporar
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?
Mensagem
As mensagens podem ser exibidas com linha sólida ou tracejada.
As linhas podem ser sólidas ou tracejadas e podem terminar com vários tipos de seta, cruz ou seta aberta.
Copiar
Incorporar
[Actor][Arrow][Actor]:Message text
Dez tipos de seta padrão
| Tipo | Descrição |
|---|---|
| -> | Linha sólida sem seta |
| --> | Linha tracejada sem seta |
| ->> | Linha sólida com seta |
| -->> | Linha tracejada com seta |
| <<->> | Linha sólida com seta bidirecional |
| <<-->> | Linha tracejada com seta bidirecional |
| -x | Linha sólida com cruz na extremidade |
| --x | Linha tracejada com cruz na extremidade |
| -) | Linha sólida com seta vazada no final (assíncrona) |
| --) | Linha tracejada com seta vazada no final (assíncrona) |
Ativação
É possível ativar e desativar um papel; a desativação ou ativação pode ser uma declaração dedicada:
Copiar
Incorporar
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Há também uma notação abreviada, que é adicionar + ou - após a seta da mensagem.
Copiar
Incorporar
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
As ativações do mesmo papel podem ser acumuladas:
Copiar
Incorporar
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!
Comentário
É possível adicionar comentários a um diagrama de sequência. Isso pode ser feito com os seguintes símbolos: Note[right of] ou [left of] ou [over][participante]: conteúdo do comentário
Copiar
Incorporar
sequenceDiagram
participant John
Note right of John: Text in note
Também é possível criar um comentário que abrange dois participantes:
Copiar
Incorporar
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Quebra de linha
É possível adicionar quebras de linha em comentários e mensagens:
Copiar
Incorporar
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Quebras de linha nos nomes de papéis exigem a definição de um alias:
Copiar
Incorporar
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
Loop
Em um diagrama de sequência, um loop pode ser expresso com os seguintes símbolos.
Copiar
Incorporar
loop Loop text
... statements ...
end
Consulte o exemplo abaixo:
Copiar
Incorporar
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternativa
Em um diagrama de sequência, caminhos alternativos podem ser expressos com símbolos.
Copiar
Incorporar
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Copiar
Incorporar
opt Describing text...
statements
end
Consulte o exemplo abaixo:
Copiar
Incorporar
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
Ações que ocorrem em paralelo podem ser representadas com os seguintes símbolos.
Copiar
Incorporar
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Consulte o exemplo abaixo:
Copiar
Incorporar
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!
Também é possível aninhar blocos paralelos.
Copiar
Incorporar
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ão crítica
É possível demonstrar operações que devem ser executadas automaticamente condicionando-as a várias situações.
Isso é feito com os seguintes símbolos:
Copiar
Incorporar
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Consulte o exemplo abaixo:
Copiar
Incorporar
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
Também é possível não ter nenhuma opção.
Copiar
Incorporar
critical Establish a connection to the DB
Service-->DB: connect
end
Este bloco crítico também pode ser aninhado, equivalendo à instrução par vista acima.
Interrupção
É possível indicar a parada de uma sequência no fluxo, geralmente usado para modelar situações de exceção.
Isso é feito com os seguintes símbolos:
Copiar
Incorporar
break [something happened]
... statements ...
end
Consulte o exemplo abaixo:
Copiar
Incorporar
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
Destaque de fundo
É possível definir retângulos de fundo coloridos para destacar o fluxo, o que é feito com os seguintes símbolos:
Copiar
Incorporar
rect COLOR
... content ...
end
As cores são definidas usando a sintaxe rgb e rgba.
Copiar
Incorporar
rect rgb(0, 255, 0)
... content ...
end
Copiar
Incorporar
rect rgba(0, 0, 255, .1)
... content ...
end
Consulte o exemplo abaixo:
Copiar
Incorporar
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.
Comentário
É possível inserir comentários em um diagrama de sequência; o editor irá ignorá-los. Os comentários precisam ocupar uma linha própria e devem começar com dois sinais de porcentagem %%. Do início do comentário até a próxima quebra de linha, qualquer texto será considerado comentário, incluindo qualquer sintaxe de diagrama.
Copiar
Incorporar
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Codificação de entidades para escapar caracteres
Você pode escapar caracteres usando a seguinte sintaxe.
Copiar
Incorporar
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Os números fornecidos são decimais, então (#) pode ser codificado como (#35;). Também há suporte ao uso de nomes de caracteres HTML.
Como o ponto e vírgula pode substituir a quebra de linha para definir marcações, ao incluir ponto e vírgula no texto de uma mensagem você precisa usar (#59;).
Numeração
É possível anexar um número de sequência a cada seta em um diagrama de sequência. Como mostrado abaixo:
Copiar
Incorporar
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!
Menu do participante
Os participantes podem conter menus pop-up, que listam links personalizados para páginas externas. Por exemplo, se um papel representa um serviço de rede, links úteis podem incluir um link para o painel de integridade do serviço, o repositório que contém o código do serviço ou um link para a página wiki que descreve o serviço.
Isso pode ser configurado adicionando uma ou mais linhas de link, no seguinte formato:
Copiar
Incorporar
link <actor>: <link-label> @ <link-url>
Copiar
Incorporar
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!
Sintaxe de menu avançada
Existe uma sintaxe avançada que depende do formato JSON. Se você tiver domínio do formato JSON, também poderá usá-la.
Isso pode ser configurado adicionando uma linha de link no seguinte formato:
Copiar
Incorporar
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Copiar
Incorporar
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!
