Kako napisati mermaid dijagram slijeda
Dijagram slijeda prikazuje tko s kim razgovara, kojim redoslijedom. U mermaidu je za pisanje potrebno otprilike jednako vremena koliko i za usmeni opis, zbog čega je to vrsta dijagrama koja najduže preživi u kodnoj bazi. Sve ispod spremno je za kopiranje i lijepljenje u editor.
Minimum
Deklarirajte vrstu dijagrama, zatim napišite jedan redak po poruci. Sudionici se stvaraju pri prvom spomenu, redoslijedom kojim se pojavljuju.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedDeklarirajte sudionike izričito s participant User kad želite određeni redoslijed slijeva nadesno umjesto redoslijeda prvog spomena.
Vrste strelica
| Sintaksa | Značenje |
|---|---|
A->>B: text | Zahtjev — puna linija, ispunjeni vrh strelice |
A-->>B: text | Odgovor — isprekidana linija, ispunjeni vrh strelice |
A->B: text | Puna linija, otvoreni vrh strelice |
A-)B: text | Asinkrona poruka — otvoreni vrh strelice, odgovor se ne očekuje |
A-xB: text | Poruka koja ne uspije ili se izgubi |
Konvencija koju vrijedi zadržati: puna linija za poziv, isprekidana za povratak. Čitatelj tada može razlikovati zahtjev od odgovora bez čitanja ijedne oznake.
Sudionici i aliasi
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 OKKoristite actor U as Browser umjesto participant da nacrtate figuru štapića — vrijedi za osobu na lijevom rubu tijeka autentikacije.
Trake aktivacije
Trake aktivacije prikazuju koliko dugo je sudionik zauzet. Označite ih izričito s activate/deactivate, ili dodajte + i - strelicama, što je kraće i teže je izgubiti ravnotežu.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptPetlje, uvjeti i paralelni rad
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— ponavljanje.alt <label>…else <label>…end— međusobno isključive grane.opt <label>…end— grana koja se možda jednostavno neće dogoditi.par <label>…and <label>…end— stvari koje se događaju istovremeno.critical/break— dio koji se ne smije prekinuti, i rani izlaz.
Bilješke
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 obuhvaća dva sudionika i pravo je mjesto za ograničenje koje pripada interakciji, a ne jednoj ili drugoj strani.
Potpuni primjer
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 inUredite ovaj dijagram
Zalijepite ga u karticu koda i promijenite redak — pregled se ponovno crta dok tipkate.
Često postavljana pitanja
Kako numerirati poruke?
Stavite autonumber u redak odmah nakon sequenceDiagram. Svaka poruka tada dobiva redni broj, što uvelike olakšava razgovor o dijagramu u komentarima recenzije.
Može li sudionik poslati poruku samom sebi?
Da — napišite isto ime na obje strane: API->>API: retry. Mermaid crta petlju natrag na istu lifeline.
Kako prikazati da je sudionik uništen?
Koristite destroy <name> prije poruke koja ga završava, ili create participant <name> da se pojavi usred dijagrama umjesto na vrhu.
Mogu li urediti dijagram slijeda na vizualnom platnu?
Vizualno platno uređuje flowcharte. Dijagrami slijeda pišu se na kartici koda, gdje se prikazuju uživo u pregledu — što je obično ionako brže, budući da je dijagram slijeda u biti popis redaka.