Passer au contenu principal

Mermaid 11.15.0

Aide-mémoire des diagrammes de séquence Mermaid

Les séquences montrent les messages échangés entre participants. Utilisez un organigramme pour les décisions ou un diagramme de classes pour la structure statique.

Créer avec l’outil Générateur de diagrammes de séquence →

Démarrage rapide

Déclarez les alias avant les messages pour fixer l’ordre des lignes de vie.

Mermaid
Ouvrir dans l’éditeur → 
sequenceDiagram
  actor R as Lecteur
  participant S as Service de recherche
  R->>+S: Chercher le guide
  S-->>-R: Renvoyer les résultats

Chargement…

Référence de syntaxe

Référence de syntaxe
SyntaxeSignification
sequenceDiagram / participant / actor / asDéclare les lignes de vie et alias ; actor dessine une personne.
participant A@{ "type": "boundary" }Types : boundary, control, entity, database, collections et queue ; participant et actor couvrent les formes courantes.
->Trait continu sans pointe
-->Trait pointillé sans pointe
->>Flèche continue
-->>Flèche pointillée
<<->>Flèche bidirectionnelle continue
<<-->>Flèche bidirectionnelle pointillée
-xTrait continu terminé par une croix
--xTrait pointillé terminé par une croix
-)Flèche ouverte continue, asynchrone
--)Flèche ouverte pointillée, asynchrone
-|\Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
--|\Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
-|/Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
--|/Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
/|-Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
/|--Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
\\-Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
\\--Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
-\\Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
--\\Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
-//Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
--//Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
//-Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
//--Variante de demi-flèche ; l’exemple montre l’orientation et le trait.
A->>()B / A()->>B / A()->>()BRelie un message au centre de la ligne de vie d’envoi ou de réception.
activate / deactivate / ->>+ / -->>-Démarre et termine les activations ; équilibrez les activations imbriquées.
create participant / create actor / destroyCrée avant le premier message reçu et détruit avant le message final.
Note left of / right of / over A,BPlace les notes à côté ou au-dessus des lignes ; <br/> ajoute un saut.
loop / alt / else / opt / par / and / critical / option / break / rect / endChaque bloc se ferme avec end ; else, and et option dépendent de leur bloc. rect reçoit une couleur.
autonumber / autonumber 10 5Numérote les messages avec départ et incrément facultatifs.
box Color Label / endGroupe les déclarations dans une boîte colorée ou transparente.
link A: Label @ URL / links A: {"Label":"URL"}Ajoute un lien ou menu JSON à un participant.
%% / accTitle: / accDescr:Commentaires et descriptions accessibles.

Participants et alias

Les ids courts identifient les participants ; les alias portent le texte visible. JSON change le symbole. Déclarez les lignes avant les messages.

Mermaid
Ouvrir dans l’éditeur → 
sequenceDiagram
  actor R as Lecteur
  participant B@{ "type": "boundary" }
  participant C@{ "type": "control" }
  participant E@{ "type": "entity" }
  participant D@{ "type": "database" }
  participant L@{ "type": "collections" }
  participant Q@{ "type": "queue" }
  R->>B: Demande
  B->>C: Valider
  C->>E: Lire
  E->>D: Requête
  D-->>L: Résultats
  L-)Q: Notifier

Chargement…

Types de flèche

Choisissez la flèche selon vos conventions. Les flèches ouvertes indiquent souvent un envoi asynchrone ; une croix ne termine pas la ligne sans destroy.

Mermaid
Ouvrir dans l’éditeur → 
sequenceDiagram
  participant A as Émetteur
  participant B as Destinataire
  A->B: Message
  A-->B: Message
  A->>B: Message
  A-->>B: Message
  A<<->>B: Message
  A<<-->>B: Message
  A-xB: Message
  A--xB: Message
  A-)B: Message
  A--)B: Message
  A-|\B: Message
  A--|\B: Message
  A-|/B: Message
  A--|/B: Message
  A/|-B: Message
  A/|--B: Message
  A\\-B: Message
  A\\--B: Message
  A-\\B: Message
  A--\\B: Message
  A-//B: Message
  A--//B: Message
  A//-B: Message
  A//--B: Message
  A()->>()B: Connexion centrale

Chargement…

Création et activation

create précède immédiatement le message de création, destroy le message final. Équilibrez chaque activation.

Mermaid
Ouvrir dans l’éditeur → 
sequenceDiagram
  participant C as Contrôleur
  create participant W as Processus de travail
  C->>+W: Démarrer le travail
  Note right of W: Processus temporaire
  W-->>-C: Travail terminé
  destroy W
  C-xW: Arrêter le processus

Chargement…

Blocs de contrôle

Fermez les blocs avec end. else sépare les alternatives, and les branches parallèles, option les reprises de critical. break indique une sortie exceptionnelle.

Mermaid
Ouvrir dans l’éditeur → 
sequenceDiagram
  participant C as Client
  participant S as Service
  loop Nouvelle tentative
    C->>S: Demande
    alt Accepté
      S-->>C: Résultat
    else Refusé
      S-->>C: Erreur
    end
  end
  opt Résultat en cache
    S-->>C: Résultat mémorisé
  end
  par Journalisation
    S->>S: Enregistrer
  and Mesures
    S->>S: Compter
  end
  critical Validation
    S->>S: Sauvegarder
  option Échec
    S-->>C: Annuler
  end
  break Délai dépassé
    S-->>C: Arrêter
  end
  rect rgb(230,240,255)
    Note over C,S: Limite de révision
  end

Chargement…

Options de présentation

mirrorActors répète les participants en bas ; wrap ajuste les messages et actorMargin espace les lignes de vie. L’ordre des messages reste inchangé.

Mermaid
Ouvrir dans l’éditeur → 
---
config:
  sequence:
    mirrorActors: false
    wrap: true
    actorMargin: 60
---
sequenceDiagram
  participant R as Lecteur
  participant G as Guide
  R->>G: Lire la référence

Chargement…

Erreurs fréquentes

Laisser un bloc ouvert

Ajoutez end pour chaque bloc imbriqué.

Syntaxe incorrecte : correction ci-dessous

sequenceDiagram
  loop Nouvelle tentative
    A->>B: Demande

Employer end comme texte non protégé

end est spécial ; utilisez guillemets ou crochets en cas d’ambiguïté et évitez les ids réservés.

Limites

  • La disposition contrôle la position horizontale ; les lignes de vie ne se déplacent pas librement.
  • Les messages suivent le code, sans échelle temporelle numérique.
  • Les menus dépendent de l’hôte.

Foire aux questions

Quelle différence entre actor et participant ?
actor dessine une personne ; participant dessine normalement une boîte et accepte d’autres symboles. Tous deux échangent des messages.
Comment dessiner une réponse ?
Utilisez -->> pour une réponse pointillée ; ajoutez un moins pour terminer aussi une activation.
Comment montrer un travail simultané ?
Utilisez par avec des branches séparées par and, puis end.