Com escriure un diagrama de seqüència mermaid
Un diagrama de seqüència mostra qui parla amb qui, i en quin ordre. En mermaid triga més o menys el mateix a escriure's que a descriure's en veu alta, per això és el tipus de diagrama que sobreviu més temps en un codi base. Tot el que hi ha a sota està a punt per copiar i enganxar a l'editor.
El mínim
Declara el tipus de diagrama i després escriu una línia per missatge. Els participants es creen a la primera menció, en l'ordre en què apareixen.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedDeclara els participants explícitament amb participant User quan vulguis un ordre concret d'esquerra a dreta en lloc de l'ordre de primera menció.
Tipus de fletxa
| Sintaxi | Significat |
|---|---|
A->>B: text | Petició — línia contínua, punta de fletxa plena |
A-->>B: text | Resposta — línia discontínua, punta de fletxa plena |
A->B: text | Línia contínua, punta de fletxa oberta |
A-)B: text | Missatge asíncron — punta de fletxa oberta, no s'espera resposta |
A-xB: text | Missatge que falla o es descarta |
La convenció que val la pena mantenir: contínua per a la crida, discontínua per a la resposta. Un lector pot llavors distingir una petició d'una resposta sense llegir ni una sola etiqueta.
Participants i àlies
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 OKFes servir actor U as Browser en lloc de participant per dibuixar un ninot de pal — val la pena per a la persona a l'extrem esquerre d'un flux d'autenticació.
Barres d'activació
Les barres d'activació mostren durant quant de temps un participant està ocupat. Marca-les explícitament amb activate/deactivate, o afegeix + i - a les fletxes, que és més curt i més difícil de descompensar.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptBucles, condicionals i treball en paral·lel
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— repetició.alt <label>…else <label>…end— branques mútuament excloents.opt <label>…end— una branca que potser simplement no passa.par <label>…and <label>…end— coses que passen al mateix temps.critical/break— una secció que no s'ha d'interrompre, i una sortida anticipada.
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 abasta dos participants i és el lloc adequat per a una restricció que pertany a la interacció més que a un dels dos costats.
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 inEdita aquest diagrama
Enganxa'l a la pestanya de codi i canvia una línia — la previsualització es redibuixa mentre escrius.
Preguntes freqüents
Com numero els missatges?
Posa autonumber a la línia just després de sequenceDiagram. Cada missatge rep llavors un número seqüencial, cosa que fa molt més fàcil parlar d'un diagrama en comentaris de revisió.
Un participant pot enviar-se un missatge a si mateix?
Sí — escriu el mateix nom als dos costats: API->>API: retry. Mermaid dibuixa el bucle de tornada a la mateixa línia de vida.
Com mostro que un participant es destrueix?
Fes servir destroy <name> abans del missatge que l'acaba, o create participant <name> perquè aparegui a mig diagrama en lloc de a dalt de tot.
Puc editar un diagrama de seqüència al llenç visual?
El llenç visual edita flowcharts. Els diagrames de seqüència s'escriuen a la pestanya de codi, on es renderitzen en directe a la previsualització — cosa que normalment és més ràpida de totes maneres, ja que un diagrama de seqüència és essencialment una llista de línies.