Comment écrire un diagramme de séquence mermaid
Un diagramme de séquence montre qui parle à qui, et dans quel ordre. En mermaid, il prend à peu près le même temps à écrire qu'à décrire à voix haute, ce qui explique pourquoi c'est le type de diagramme qui survit le plus longtemps dans une base de code. Tout ce qui suit est prêt à coller dans l'éditeur.
Le minimum
Déclarez le type de diagramme, puis écrivez une ligne par message. Les participants sont créés à leur première mention, dans l'ordre où ils apparaissent.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedDéclarez les participants explicitement avec participant User quand vous voulez un ordre gauche-droite précis plutôt que l'ordre de première mention.
Types de flèches
| Syntaxe | Signification |
|---|---|
A->>B: text | Requête — ligne pleine, pointe pleine |
A-->>B: text | Réponse — ligne pointillée, pointe pleine |
A->B: text | Ligne pleine, pointe ouverte |
A-)B: text | Message asynchrone — pointe ouverte, aucune réponse attendue |
A-xB: text | Message qui échoue ou est perdu |
La convention à retenir : ligne pleine pour l'appel, pointillée pour le retour. Un lecteur peut alors distinguer une requête d'une réponse sans lire un seul libellé.
Participants et alias
sequenceDiagram
participant U as Browser
participant A as API gateway
participant S as Order service
U->>A: GET /orders
A->>S: list(userId)
S-->>A: orders
A-->>U: 200 OKUtilisez actor U as Browser au lieu de participant pour dessiner un bonhomme allumette — utile pour l'humain au bord gauche d'un flux d'authentification.
Barres d'activation
Les barres d'activation montrent combien de temps un participant est occupé. Marquez-les explicitement avec activate/deactivate, ou ajoutez + et - aux flèches, ce qui est plus court et plus difficile à déséquilibrer.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptBoucles, conditions et travail parallèle
sequenceDiagram
User->>API: POST /import
loop every row
API->>DB: upsert row
end
alt all rows valid
API-->>User: 200 OK
else some failed
API-->>User: 422 with errors
end
par notify
API->>Email: send summary
and audit
API->>Log: write entry
endloop <label>…end— répétition.alt <label>…else <label>…end— branches mutuellement exclusives.opt <label>…end— une branche qui peut simplement ne pas se produire.par <label>…and <label>…end— des choses qui se produisent en même temps.critical/break— une section qui ne doit pas être interrompue, et une sortie anticipée.
Notes
sequenceDiagram
User->>API: POST /login
Note right of API: Rate limited<br>5 per minute
API-->>User: token
Note over User,API: Token is valid for 30 daysNote over A,B s'étend sur deux participants et c'est le bon endroit pour une contrainte qui appartient à l'interaction plutôt qu'à l'un ou l'autre côté.
Un exemple complet
sequenceDiagram
actor U as User
participant A as App
participant P as Provider
U->>+A: Click "Sign in"
A-->>-U: Redirect to provider
U->>+P: Authorise
P-->>-U: Redirect back with code
U->>+A: GET /callback?code=…
A->>+P: Exchange code for token
P-->>-A: access token
Note right of A: Session cookie set here
A-->>-U: Signed inModifiez ce diagramme
Collez-le dans l'onglet code et modifiez une ligne — l'aperçu se redessine au fil de la frappe.
Questions fréquentes
Comment numéroter les messages ?
Placez autonumber sur la ligne juste après sequenceDiagram. Chaque message reçoit alors un numéro séquentiel, ce qui rend le diagramme bien plus facile à commenter en revue.
Un participant peut-il s'envoyer un message à lui-même ?
Oui — écrivez le même nom des deux côtés : API->>API: retry. Mermaid dessine la boucle qui revient sur la même ligne de vie.
Comment montrer qu'un participant est détruit ?
Utilisez destroy <name> avant le message qui le termine, ou create participant <name> pour le faire apparaître en cours de diagramme plutôt qu'en haut.
Puis-je modifier un diagramme de séquence sur le canevas visuel ?
Le canevas visuel modifie les flowcharts. Les diagrammes de séquence s'écrivent dans l'onglet code, où ils s'affichent en direct dans l'aperçu — ce qui est généralement plus rapide de toute façon, puisqu'un diagramme de séquence est essentiellement une liste de lignes.