Diagramma di sequenza
Mermaid può renderizzare un diagramma di sequenza. Il diagramma di sequenza è un tipo di diagramma di interazione che mostra come i vari processi operano tra loro e l'ordine delle operazioni.
Copia
Incorpora
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Nota sui nodi: a causa del modo in cui è scritto il linguaggio Mermaid, la parola "end" rompe l'intero grafico. Se devi usare "end", devi racchiuderla tra parentesi tonde (), virgolette doppie "", parentesi graffe {} o parentesi quadre [], cioè: (end), [end], {end}.
Sintassi
Partecipante
I partecipanti sono mostrati nell'ordine in cui compaiono nel testo sorgente del diagramma. A volte potresti voler mostrare i partecipanti in un ordine diverso da quello con cui compaiono nel primo messaggio; puoi specificare l'ordine di apparizione dei partecipanti con i seguenti metodi:
Copia
Incorpora
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Se vuoi usare il simbolo dell'attore invece di un rettangolo con testo, puoi farlo usando l'istruzione actor, come mostrato di seguito.
Copia
Incorpora
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Puoi definire un alias usando as dopo la dichiarazione del partecipante
Copia
Incorpora
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Creazione e distruzione dei partecipanti
I partecipanti possono essere creati e distrutti tramite messaggi. Pertanto, aggiungi un'istruzione di creazione o distruzione prima del messaggio.
Copia
Incorpora
participant B
A --> B: Hello
L'istruzione di creazione supporta la distinzione tra partecipanti e alias. Il mittente o il destinatario di un messaggio può essere distrutto, ma il destinatario può solo essere creato.
Copia
Incorpora
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
Raggruppamento/Riquadro
I partecipanti possono essere raggruppati in riquadri verticali. Puoi definire il colore usando dei simboli (se non è definito, sarà trasparente).
Copia
Incorpora
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 il nome del tuo gruppo è colorato, puoi forzarne la trasparenza:
Copia
Incorpora
box transparent Aqua
... actors ...
end
Copia
Incorpora
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?
Messaggio
I messaggi possono essere visualizzati con una linea continua o tratteggiata.
Le linee possono essere continue o tratteggiate e supportano la terminazione con vari tipi di frecce, croci o punte aperte.
Copia
Incorpora
[Actor][Arrow][Actor]:Message text
Dieci tipi di freccia standard
| Tipo | Descrizione |
|---|---|
| -> | Linea continua senza freccia |
| --> | Linea tratteggiata senza freccia |
| ->> | Linea continua con freccia |
| -->> | Linea tratteggiata con freccia |
| <<->> | Linea continua con freccia bidirezionale |
| <<-->> | Linea tratteggiata con freccia bidirezionale |
| -x | Linea continua con croce all'estremità |
| --x | Linea tratteggiata con croce all'estremità |
| -) | Linea continua con freccia vuota all'estremità (asincrona) |
| --) | Linea tratteggiata con freccia vuota all'estremità (asincrona) |
Attivazione
È possibile attivare e disattivare un attore; la disattivazione o l'attivazione può essere una dichiarazione dedicata:
Copia
Incorpora
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Esiste anche una notazione abbreviata, ovvero aggiungere + o - dopo la freccia del messaggio.
Copia
Incorpora
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
L'attivazione dello stesso attore può essere sovrapposta:
Copia
Incorpora
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!
Commento
Puoi aggiungere commenti a un diagramma di sequenza. Puoi farlo con i seguenti simboli: Note[right of] o [left of] o [over][partecipante]: contenuto del commento
Copia
Incorpora
sequenceDiagram
participant John
Note right of John: Text in note
Puoi anche creare commenti che coprono due partecipanti:
Copia
Incorpora
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Carattere di nuova riga
Puoi aggiungere caratteri di nuova riga nei commenti e nei messaggi:
Copia
Incorpora
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
I caratteri di nuova riga nei nomi degli attori richiedono la definizione di un alias:
Copia
Incorpora
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
Ciclo
In un diagramma di sequenza puoi esprimere un ciclo tramite i seguenti simboli.
Copia
Incorpora
loop Loop text
... statements ...
end
Vedi l'esempio seguente:
Copia
Incorpora
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternativa
In un diagramma di sequenza puoi esprimere percorsi alternativi tramite simboli.
Copia
Incorpora
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Copia
Incorpora
opt Describing text...
statements
end
Vedi l'esempio seguente:
Copia
Incorpora
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
Parallelo
Le azioni che avvengono in parallelo possono essere rappresentate con i seguenti simboli.
Copia
Incorpora
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Vedi l'esempio seguente:
Copia
Incorpora
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!
È anche possibile annidare blocchi paralleli.
Copia
Incorpora
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
Sezione critica
Puoi mostrare le azioni che devono essere eseguite automaticamente condizionando le varie situazioni.
Questo si fa con i seguenti simboli:
Copia
Incorpora
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Vedi l'esempio seguente:
Copia
Incorpora
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
È anche possibile che non ci sia alcuna opzione.
Copia
Incorpora
critical Establish a connection to the DB
Service-->DB: connect
end
Questo blocco critico può essere annidato e corrisponde all'istruzione par vista in precedenza.
Interruzione
Puoi indicare l'arresto di una sequenza nel flusso, di solito usato per modellare situazioni eccezionali.
Questo si fa con i seguenti simboli:
Copia
Incorpora
break [something happened]
... statements ...
end
Vedi l'esempio seguente:
Copia
Incorpora
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
Evidenziazione dello sfondo
Puoi impostare un rettangolo di sfondo colorato per evidenziare il flusso, usando i seguenti simboli:
Copia
Incorpora
rect COLOR
... content ...
end
I colori sono definiti usando la sintassi rgb e rgba.
Copia
Incorpora
rect rgb(0, 255, 0)
... content ...
end
Copia
Incorpora
rect rgba(0, 0, 255, .1)
... content ...
end
Vedi l'esempio seguente:
Copia
Incorpora
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.
Commento
Puoi inserire commenti in un diagramma di sequenza; l'editor li ignorerà. I commenti devono occupare una riga propria e devono iniziare con il doppio segno di percentuale %%. Qualsiasi testo dal commento fino al successivo carattere di nuova riga sarà considerato un commento, inclusa qualsiasi sintassi del diagramma.
Copia
Incorpora
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Codifica di entità per l'escape dei caratteri
Puoi eseguire l'escape dei caratteri con la seguente sintassi.
Copia
Incorpora
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
I numeri forniti sono decimali, quindi (#) può essere codificato come (#35;); è supportato anche l'uso dei nomi di carattere HTML.
Poiché il punto e virgola può sostituire il carattere di nuova riga nella definizione dei marcatori, quando il testo di un messaggio contiene un punto e virgola devi usare (#59;).
Numerazione
Puoi allegare un numero di sequenza a ciascuna freccia in un diagramma di sequenza. Come mostrato di seguito:
Copia
Incorpora
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 dei partecipanti
I partecipanti possono contenere menu a comparsa con link personalizzati verso pagine esterne. Ad esempio, se un attore rappresenta un servizio web, i link utili potrebbero includere un link alla dashboard di salute del servizio, un repository contenente il codice del servizio oppure un link a una pagina wiki che descrive il servizio.
Puoi configurarli aggiungendo una o più righe di link, nel formato seguente:
Copia
Incorpora
link <actor>: <link-label> @ <link-url>
Copia
Incorpora
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!
Sintassi avanzata del menu
Esiste una sintassi avanzata basata sul formato JSON. Se hai una buona padronanza del formato JSON, puoi usare anche questa.
Puoi configurarlo aggiungendo una riga di link nel seguente formato:
Copia
Incorpora
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Copia
Incorpora
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!
