Diagramme de séquence
Mermaid peut rendre des diagrammes de séquence. Un diagramme de séquence est un type de diagramme d'interaction qui montre comment différents processus interagissent entre eux et l'ordre des opérations.
Copier
Intégrer
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Remarque sur les nœuds : en raison de la manière dont le langage Mermaid est écrit, le mot "end" casse tout le graphique. Si vous devez utiliser « end », vous devez l'encapsuler à l'aide de parenthèses (), de guillemets doubles "", d'accolades {} ou de crochets [], c'est-à-dire : (end), [end], {end}.
Syntaxe
Participant
Les participants sont affichés dans l'ordre où ils apparaissent dans le texte source du diagramme. Il arrive que vous souhaitiez afficher les participants dans un ordre différent de celui de leur première apparition dans les messages ; vous pouvez spécifier l'ordre d'apparition des participants de la manière suivante :
Copier
Intégrer
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Si vous souhaitez utiliser un symbole de rôle plutôt qu'un rectangle avec du texte, vous pouvez le faire à l'aide de l'instruction actor, comme indiqué ci-dessous.
Copier
Intégrer
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Vous pouvez définir un alias à l'aide de as après la déclaration d'un participant
Copier
Intégrer
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Création et destruction de participants
Les participants peuvent être créés et détruits par des messages. Il suffit donc d'ajouter une instruction de création ou de destruction avant le message.
Copier
Intégrer
participant B
A --> B: Hello
Lors de la création, l'instruction permet de distinguer un participant d'un alias. L'émetteur ou le destinataire d'un message peut être détruit, mais le destinataire peut uniquement être créé.
Copier
Intégrer
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
Groupe/cadre
Les participants peuvent être regroupés dans un cadre vertical. Vous pouvez définir la couleur à l'aide d'un symbole (si aucune couleur n'est définie, elle sera transparente).
Copier
Intégrer
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 le nom de votre groupe est coloré, vous pouvez forcer cette couleur à devenir transparente :
Copier
Intégrer
box transparent Aqua
... actors ...
end
Copier
Intégrer
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?
Message
Le message peut être affiché en trait plein ou en pointillés.
Les lignes peuvent être pleines ou en pointillés, et peuvent se terminer par différents types de flèches, de croix ou de flèches ouvertes.
Copier
Intégrer
[Actor][Arrow][Actor]:Message text
Dix types de flèches standard
| Type | Description |
|---|---|
| -> | Trait plein sans flèche |
| --> | Trait en pointillés sans flèche |
| ->> | Trait plein avec flèche |
| -->> | Trait en pointillés avec flèche |
| <<->> | Trait plein à flèche bidirectionnelle |
| <<-->> | Trait en pointillés à flèche bidirectionnelle |
| -x | Trait plein terminé par une croix |
| --x | Trait en pointillés terminé par une croix |
| -) | Trait plein terminé par une flèche creuse (asynchrone) |
| --) | Trait en pointillés terminé par une flèche creuse (asynchrone) |
Activation
Vous pouvez activer et désactiver un rôle ; la désactivation ou l'activation peut faire l'objet d'une déclaration dédiée :
Copier
Intégrer
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Il existe également une notation abrégée consistant à ajouter + ou - après la flèche du message.
Copier
Intégrer
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
L'activation d'un même rôle peut être cumulée :
Copier
Intégrer
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!
Commentaire
Vous pouvez ajouter des commentaires à un diagramme de séquence. Cela est possible à l'aide des symboles suivants : Note[right of] ou [left of] ou [over][participant] : contenu du commentaire
Copier
Intégrer
sequenceDiagram
participant John
Note right of John: Text in note
Vous pouvez également créer un commentaire couvrant deux participants :
Copier
Intégrer
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Caractère de retour à la ligne
Vous pouvez ajouter des retours à la ligne dans les commentaires et les messages :
Copier
Intégrer
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Un retour à la ligne dans le nom d'un rôle nécessite la définition d'un alias :
Copier
Intégrer
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
Boucle
Dans un diagramme de séquence, une boucle peut être exprimée à l'aide des symboles suivants.
Copier
Intégrer
loop Loop text
... statements ...
end
Voir l'exemple ci-dessous :
Copier
Intégrer
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternative
Dans un diagramme de séquence, un chemin alternatif peut être exprimé à l'aide de symboles.
Copier
Intégrer
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Copier
Intégrer
opt Describing text...
statements
end
Voir l'exemple ci-dessous :
Copier
Intégrer
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
Parallèle
Les actions se produisant en parallèle peuvent être représentées à l'aide des symboles suivants.
Copier
Intégrer
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Voir l'exemple ci-dessous :
Copier
Intégrer
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!
Les blocs parallèles peuvent également être imbriqués.
Copier
Intégrer
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
Section critique
Diverses situations peuvent être conditionnées afin de montrer les opérations qui doivent s'exécuter automatiquement.
Cela s'effectue à l'aide des symboles suivants :
Copier
Intégrer
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Voir l'exemple ci-dessous :
Copier
Intégrer
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
Il est également possible qu'il n'y ait aucune option.
Copier
Intégrer
critical Establish a connection to the DB
Service-->DB: connect
end
Ce bloc critique peut également être imbriqué, ce qui équivaut à l'instruction par vue plus haut.
Interruption
Vous pouvez indiquer l'arrêt d'une séquence dans le flux, ce qui sert généralement à modéliser des cas exceptionnels.
Cela s'effectue à l'aide des symboles suivants :
Copier
Intégrer
break [something happened]
... statements ...
end
Voir l'exemple ci-dessous :
Copier
Intégrer
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
Mise en surbrillance du fond
Vous pouvez définir des rectangles de fond colorés pour mettre en surbrillance le flux, ce qui s'effectue à l'aide des symboles suivants :
Copier
Intégrer
rect COLOR
... content ...
end
Les couleurs sont définies à l'aide des syntaxes rgb et rgba.
Copier
Intégrer
rect rgb(0, 255, 0)
... content ...
end
Copier
Intégrer
rect rgba(0, 0, 255, .1)
... content ...
end
Voir l'exemple ci-dessous :
Copier
Intégrer
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.
Commentaire
Vous pouvez saisir des commentaires dans un diagramme de séquence ; l'éditeur les ignorera. Un commentaire doit occuper une ligne à lui seul et commencer par un double signe de pourcentage %%. Tout texte allant du début du commentaire jusqu'au prochain retour à la ligne est considéré comme un commentaire, y compris toute syntaxe de diagramme.
Copier
Intégrer
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Encodage d'entité pour l'échappement des caractères
Vous pouvez échapper des caractères à l'aide de la syntaxe suivante.
Copier
Intégrer
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Le nombre donné est décimal ; ainsi (#) peut être codé sous la forme (#35;). L'utilisation des noms de caractères HTML est également prise en charge.
Comme le point-virgule peut remplacer le retour à la ligne pour définir un marqueur, lorsque vous incluez un point-virgule dans le texte d'un message, vous devez utiliser (#59;).
Numérotation
Vous pouvez attacher un numéro de séquence à chaque flèche d'un diagramme de séquence. Comme indiqué ci-dessous :
Copier
Intégrer
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 des participants
Les participants peuvent comporter un menu contextuel répertoriant des liens personnalisés vers des pages externes. Par exemple, si un rôle représente un service web, les liens utiles peuvent inclure un lien vers le tableau de bord de santé du service, un dépôt contenant le code de ce service, ou un lien vers la page wiki décrivant le service.
Peut être configuré en ajoutant une ou plusieurs lignes de lien, au format suivant :
Copier
Intégrer
link <actor>: <link-label> @ <link-url>
Copier
Intégrer
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!
Syntaxe avancée des menus
Il existe une syntaxe avancée reposant sur le format JSON. Si vous maîtrisez le format JSON, celle-ci peut également être utilisée.
Peut être configuré en ajoutant une ligne de lien au format suivant :
Copier
Intégrer
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Copier
Intégrer
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!
