Za darmo · Bez rejestracji · Obsługuje pliki .mmd

Edytor diagramów sekwencji Mermaid

Diagram sekwencji pokazuje, kto z kim rozmawia i w jakiej kolejności. Nadaje się wtedy, gdy interesująca jest wymiana komunikatów między kilkoma stronami — uwierzytelnianie, płatność, integracja między usługami. Jeśli uczestnik jest tylko jeden, a liczą się rozgałęzienia, schemat blokowy powie to samo z mniejszym szumem.

Otwórz to w edytorze →Przeczytaj przewodnik

Płatność kartą z silnym uwierzytelnieniem

Wartość tego diagramu leży w blokach `alt`: pokazują, że silne uwierzytelnienie nie zdarza się zawsze i że są dwa różne zakończenia. Zwróć też uwagę, że bramka rozmawia z bankiem, a sklep nic o tym nie wie. Dokładnie to diagram sekwencji uwidacznia, a schemat blokowy ukrywa.

sequenceDiagram
    autonumber
    participant K as Klient
    participant S as Sklep
    participant B as Bramka płatnicza
    participant W as Bank wydawcy

    K->>S: Potwierdź zamówienie
    S->>B: Poproś o autoryzację
    B->>W: Prześlij transakcję
    W-->>B: Wymagane uwierzytelnienie

    alt Bank żąda silnego uwierzytelnienia
        B-->>K: Przekieruj do banku
        K->>W: Wprowadź kod
        W-->>B: Uwierzytelnienie udane
    else Bank nie żąda
        W-->>B: Autoryzowano od razu
    end

    B-->>S: Autoryzacja przyznana
    S-->>K: Zamówienie potwierdzone
    S->>S: Zapisz sprzedaż

Otwórz to w edytorze

Reklama

Omówione przykłady

1. Dwóch uczestników i jeden komunikat

`->>` to strzałka z pełnym grotem, czyli wywołanie. `-->>` jest kropkowana i oznacza odpowiedź. Ta para wystarcza w większości diagramów.

sequenceDiagram
    Klient->>API: Utwórz zamówienie
    API-->>Klient: 201 Created

Otwórz w edytorze

2. Aliasy dla długich nazw

`participant X as Długa nazwa` daje krótki identyfikator do pisania i czytelną nazwę do czytania. Zadeklarowanie uczestników na początku ustala też ich kolejność na rysunku; bez deklaracji decyduje kolejność pierwszego wystąpienia.

sequenceDiagram
    participant P as Przeglądarka
    participant A as API zamówień
    participant M as Usługa magazynu

    P->>A: POST /zamowienia
    A->>M: Zarezerwuj sztuki
    M-->>A: Rezerwacja potwierdzona
    A-->>P: 201 Created

Otwórz w edytorze

3. Aktywacje i wywołania samego siebie

`activate` i `deactivate` rysują pasek pokazujący, że uczestnik pracuje. Przyrostki `+` i `-` przy strzałce robią to samo mniejszym kosztem pisania. Strzałka od uczestnika do niego samego oznacza pracę wewnętrzną.

sequenceDiagram
    participant A as API
    participant B as Baza danych

    Klient->>+A: GET /faktura/42
    A->>+B: SELECT faktura
    B-->>-A: Wiersz znaleziony
    A->>A: Policz VAT
    A-->>-Klient: 200 OK

Otwórz w edytorze

4. Alternatywy, opcje i pętle

`alt`/`else` to ścieżki wykluczające się, `opt` to blok, którego może nie być, a `loop` to powtórzenie. Wszystkie trzy zamyka się przez `end`, a zapomnienie o tym jest najczęstszym błędem tego typu.

sequenceDiagram
    participant K as Klient
    participant A as API
    participant M as Usługa pocztowa

    K->>A: Poproś o założenie konta
    alt Adres już zarejestrowany
        A-->>K: 409 Conflict
    else Adres wolny
        A-->>K: 201 Created
        A->>M: Wyślij weryfikację
        loop Do 3 prób
            M->>M: Ponów przy nieudanej wysyłce
        end
    end
    opt Klient zgadza się na newsletter
        A->>M: Dopisz do listy
    end

Otwórz w edytorze

5. Notatki i przetwarzanie równoległe

`par` pokazuje gałęzie dziejące się jednocześnie, czego schemat blokowy tylko się domyśla, ale nigdy nie stwierdza. Notatki to właściwe miejsce na szczegół, który nie mieści się w etykiecie komunikatu.

sequenceDiagram
    participant A as API zamówień
    participant F as Fakturowanie
    participant L as Logistyka

    Note over A: Zamówienie jest już opłacone

    par Powiadom fakturowanie
        A->>F: Wystaw fakturę
        F-->>A: Faktura 2026/0431
    and Powiadom logistykę
        A->>L: Przygotuj wysyłkę
        L-->>A: List przewozowy utworzony
    end

    Note over F,L: Każda idzie własnym tempem

Otwórz w edytorze

Ściąga ze składni diagramu sekwencji

Do zapamiętania są strzałki i należą wyłącznie do tego typu: `-->` ze schematu blokowego znaczy tutaj co innego, a tutejsze `->>` jest błędem w diagramie klas.

Składnia	Znaczenie
sequenceDiagram	Otwiera diagram. Rozróżnia wielkość liter: `sequencediagram` nie zadziała.
participant A	Deklaruje uczestnika i ustala jego pozycję.
participant A as Nazwa	Krótki identyfikator z czytelną nazwą.
actor A	Jak participant, ale rysuje ludzika.
A->>B: tekst	Komunikat z pełnym grotem — wywołanie.
A-->>B: tekst	Linia kropkowana — odpowiedź.
A-)B: tekst	Otwarty grot — komunikat asynchroniczny.
A->>A: tekst	Uczestnik wywołuje samego siebie.
activate A / deactivate A	Zaznacza okres, w którym A pracuje.
A->>+B: / B-->>-A:	To samo w skróconej formie, bezpośrednio na strzałce.
alt warunek ... else ... end	Ścieżki wykluczające się.
opt warunek ... end	Blok, którego może nie być.
loop tekst ... end	Powtórzenie.
par ... and ... end	Gałęzie równoległe.
Note over A,B: tekst	Notatka nad jednym lub kilkoma uczestnikami. Jest też `Note left of` i `Note right of`.
autonumber	Automatycznie numeruje komunikaty.

Reklama

Sześć błędów, które psują diagram sekwencji

Odtworzone na Mermaidzie 11.12.2. Zdecydowanie najczęstszy jest pierwszy, a jego komunikat należy do tych, które najgorzej wskazują miejsce problemu.

Co widzisz

Parse error wskazujący ostatni wiersz diagramu

Dlaczego

Blok otwarty i nigdy niezamknięty. `alt`, `opt`, `loop` i `par` wymagają swojego `end`. Mermaid zgłasza błąd w miejscu, w którym kończy mu się wejście, więc numer wiersza wskazuje koniec pliku, a nie niezamknięty blok. Przy dwóch zagnieżdżonych blokach robi się to naprawdę trudne do wypatrzenia.

Rozwiązanie

Policz otwarte bloki i napisane `end`. Gdy błąd wskazuje ostatni wiersz, to prawie zawsze to.

Błędnie

sequenceDiagram
    Klient->>API: Żądanie
    alt Wszystko w porządku
        API-->>Klient: 200 OK

Poprawnie

sequenceDiagram
    Klient->>API: Żądanie
    alt Wszystko w porządku
        API-->>Klient: 200 OK
    end

Co widzisz

No diagram type detected matching given configuration

Dlaczego

Zła wielkość liter w słowie kluczowym. `sequenceDiagram` działa; `sequencediagram` i `SequenceDiagram` nie. Mermaid rozróżnia wielkość liter we wszystkich słowach kluczowych.

Rozwiązanie

Wielkie D, reszta małymi literami.

Błędnie

sequencediagram
    Klient->>API: Cześć

Poprawnie

sequenceDiagram
    Klient->>API: Cześć

Co widzisz

Rysuje się, ale komunikat wychodzi bez tekstu

Dlaczego

Brakuje tekstu po dwukropku. Zmierzone: Mermaid tego nie odrzuca — rysuje komunikat z pustą etykietą, a strzałka zostaje bez wyjaśnienia. To, co naprawdę się przewraca, to pominięcie samego dwukropka: `Klient->>API` daje `Expecting 'TXT', got 'NEWLINE'`. Dwukropek jest więc obowiązkowy, a tekst nie — dokładnie odwrotnie, niż można przypuszczać.

Rozwiązanie

Napisz coś po dwukropku, choćby jeden wyraz. Strzałka bez etykiety prawie nigdy nie jest tym, o co ci chodziło.

Błędnie

sequenceDiagram
    Klient->>API:
    API-->>Klient: 200

Poprawnie

sequenceDiagram
    Klient->>API: Utwórz zamówienie
    API-->>Klient: 200

Co widzisz

Parse error po `alt` z długim warunkiem

Dlaczego

Złamanie wiersza wewnątrz warunku bloku. Warunek `alt`, `opt` albo `loop` musi zmieścić się w jednym wierszu; po przełamaniu druga połowa interpretowana jest jako komunikat i nie pasuje nigdzie.

Rozwiązanie

Trzymaj warunek w jednym wierszu. Jeśli jest za długi, skróć go, a szczegół przenieś do notatki.

Błędnie

sequenceDiagram
    alt Klient ma wystarczające
    saldo na koncie
        A-->>B: OK
    end

Poprawnie

sequenceDiagram
    alt Klient ma wystarczające saldo
        A-->>B: OK
    end
    Note over A,B: Saldo sprawdzane wobec limitu dziennego

Co widzisz

Rysuje się, ale pojawia się uczestnik, którego nie deklarowałeś

Dlaczego

Literówka w nazwie uczestnika. Mermaid tworzy uczestnika przy pierwszym napotkaniu, więc `Bramka` i `Brmaka` to dwie osobne kolumny i nic o tym nie ostrzega. Po polsku najczęstszym źródłem są ogonki: `Wysyłka` napisana raz jako `Wysylka` daje dodatkową kolumnę.

Rozwiązanie

Deklaruj uczestników przez `participant` na początku. Nie zapobiegnie to literówce, ale uwidoczni, które nazwy są prawidłowe, i nadmiarowa kolumna rzuci się w oczy.

Błędnie

sequenceDiagram
    Klient->>Wysyłka: Nadaj paczkę
    Wysylka-->>Klient: Paczka nadana

Poprawnie

sequenceDiagram
    participant K as Klient
    participant W as Wysyłka
    K->>W: Nadaj paczkę
    W-->>K: Paczka nadana

Co widzisz

Rysuje się, ale kolejność kolumn nie jest ta, o którą ci chodziło

Dlaczego

Nie zadeklarowałeś uczestników. Bez deklaracji kolejność ustala pierwsze wystąpienie każdej nazwy, więc komunikat dopisany na początku diagramu potrafi przestawić wszystkie kolumny i pokrzyżować strzałki. Diagram pozostaje poprawny, ale czyta się znacznie gorzej.

Rozwiązanie

Zadeklaruj wszystkich uczestników w nagłówku, w kolejności, w jakiej chcesz ich widzieć.

Błędnie

sequenceDiagram
    Bank-->>Bramka: Autoryzowano
    Klient->>Sklep: Potwierdź zamówienie
    Sklep->>Bramka: Autoryzuj

Poprawnie

sequenceDiagram
    participant Klient
    participant Sklep
    participant Bramka
    participant Bank
    Klient->>Sklep: Potwierdź zamówienie
    Sklep->>Bramka: Autoryzuj
    Bramka->>Bank: Prześlij transakcję
    Bank-->>Bramka: Autoryzowano

Uwagi o renderowaniu

Zmierzone na Mermaidzie 11.12.2, którego używa ta strona. Diagram sekwencji zachowuje się inaczej niż pozostałe w dwóch konkretnych sprawach.

Szerokość dyktują uczestnicy, a nie komunikaty

Zmierzone: dwóch uczestników daje viewBox szerokości 450 pikseli, a sześciu 1250, czyli około 200 pikseli na każdą dołożoną kolumnę, niezależnie od treści komunikatów. Komunikaty dokładają wyłącznie wysokość, około 46 pikseli każdy. Z jednym zastrzeżeniem: jeśli etykieta komunikatu jest szersza niż minimalna szerokość kolumny, to jednak poszerza diagram — ta sama para uczestników urosła z 450 do 603 pikseli wyłącznie przez wydłużenie tekstu jednego komunikatu. Po polsku etykiety są z natury długie, więc dzieje się to wcześniej niż po angielsku.

Jedyny typ z ujemnym początkiem viewBoksu

Diagramy sekwencji wychodzą z viewBoksem zaczynającym się od `-50 -10`, a nie od `0 0`. To nie usterka: Mermaid rezerwuje ten margines na ramki uczestników. Ma to znaczenie tylko wtedy, gdy przetwarzasz SVG własnymi narzędziami, bo każde wyliczenie zakładające zerowy początek utnie pierwszą kolumnę.

Tutaj eksport do PNG jest dokładny

Inaczej niż schemat blokowy oraz diagramy klas, stanów i ER, diagram sekwencji rysuje etykiety czystym tekstem SVG, a nie wewnątrz `<foreignObject>`. Dzięki temu daje się rasteryzować bezpośrednio: wyeksportowany PNG odpowiada ekranowi bez pośredniego przerysowania i bez przesunięć w składzie.

Zadeklarowany i nieużyty uczestnik i tak zostaje narysowany

`participant`, który nie wysyła ani nie odbiera żadnego komunikatu, pojawia się na diagramie z pustą kolumną. Czasem robi się tak celowo, by pokazać kogoś, kto istnieje, ale w tym przepływie nie bierze udziału. Częściej jednak jest to pozostałość po usunięciu ostatniego komunikatu uczestnika i zapomnieniu o usunięciu jego deklaracji.

Motyw zmienia kolory, nigdy geometrię

Ten sam diagram w motywie jasnym i ciemnym daje identyczny viewBox, więc kolumny nie przesuwają się, a bloki nie zmieniają rozmiaru przy zmianie motywu.

Kiedy lepszy będzie inny diagram

Jeśli uczestnik jest tylko jeden, nie ma sekwencji do pokazania. Diagram z jedną kolumną i strzałkami do samego siebie to niewygodnie zapisany schemat blokowy.

Jeśli chcesz opisać stany, przez które przechodzi jakaś rzecz, a nie rozmowę kilku stron, użyj diagramu stanów. Sygnał jest wyraźny: gdy raz po raz piszesz ten sam komunikat z innym warunkiem, masz przed sobą automat stanów.

A jeśli wymiana ma więcej niż kilkanaście komunikatów, podziel ją. Diagram sekwencji z sześćdziesięcioma komunikatami jest technicznie poprawny i ludzko bezużyteczny; niemal zawsze czyta się lepiej jako trzy diagramy, po jednym na fazę, powiązane notatką.

Inne typy diagramów

Autor Dominik Malsch · Ostatnia aktualizacja: 8 września 2026

Otwórz edytor →