💬 Mermaid

Diagram sekwencji

Pokaż, jak systemy i ludzie ze sobą rozmawiają

Otwórz ten przykład w edytorze Wygeneruj własny z AI

Czym jest Diagram sekwencji?

Diagram sekwencji pokazuje komunikaty wymieniane między uczestnikami w czasie: wywołania API, przepływy uwierzytelniania, komunikację mikroserwisów. To standardowy sposób dokumentowania interakcji w architekturze oprogramowania.

Diagramy sekwencji zarabiają na swoje miejsce w przeglądach projektowych i raportach z incydentów, gdzie pytanie brzmi zawsze tak samo: kto kogo wywołał, w jakiej kolejności i co wróciło. Nic nie pokazuje szybciej błędu w kolejności ani brakującego timeoutu. Nie pokazują natomiast stanu — linia życia mówi, że uczestnik jest zajęty, nigdy zaś w którym ze swoich stanów wewnętrznych się znajduje ani co pamięta między dwoma przebiegami.

Żywy przykład

Kod Mermaid

sequenceDiagram
    autonumber
    participant U as User
    participant A as API
    participant D as Database
    U->>A: POST /login
    A->>D: SELECT user
    D-->>A: user row
    A-->>U: 200 + JWT token
    U->>A: GET /profile (Bearer)
    A-->>U: 200 profile

Żywy przykład

Kiedy go używać

Dokumentowanie przepływów API, uwierzytelniania i protokołów płatności

Projektowanie interakcji między mikroserwisami przed implementacją

Debugowanie incydentów produkcyjnych poprzez mapowanie rzeczywistego łańcucha wywołań

Częste błędy

Aktywacje pozostawione bez zamknięcia

Każdy + potrzebuje odpowiadającego mu -, a każde activate — swojego deactivate. Niezbilansowana para albo rysuje pasek ciągnący się do dołu diagramu, albo kończy się błędem „Trying to inactivate an inactive participant”.

Kolejność uczestników to kolejność deklaracji

Mermaid ustawia uczestników od lewej w kolejności pierwszego napotkania, więc ten wspomniany tylko w gałęzi błędu ląduje skrajnie po prawej. Zadeklaruj wszystkie linie participant na początku, w kolejności, w jakiej mają zostać narysowani.

Pojedyncza strzałka to nie wywołanie

A->B rysuje linię ciągłą bez grotu, co wygląda, jakby nic się nie wydarzyło. Wywołania synchroniczne to ->>, odpowiedzi -->>, a komunikaty bez oczekiwania na odpowiedź -). Sprawdzaj grot, nie tylko myślniki.

Podstawowa składnia

.mmd

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Sync request
    B-->>A: Async response

sequenceDiagram autonumber
autonumber poprzedza każdy komunikat numerem, dzięki czemu recenzent może w komentarzu odwołać się do „kroku 4” zamiast opisywać, o którą strzałkę mu chodzi.
U->>+API: POST /orders API-->>-U: 201 Created
Znak + na strzałce otwiera pasek aktywacji u odbiorcy, a znak - go zamyka, pokazując dokładnie, jak długo każdy uczestnik jest zajęty obsługą wywołania.
note over API,DB: single transaction
Notatki niosą szczegóły, których strzałki nie udźwigną: granice transakcji, politykę ponowień, timeouty. Zapisy note left of i note right of przypinają notatkę do jednego uczestnika.
box Payment domain participant PSP end
Box rysuje opisaną ramkę wokół uczestników należących do tego samego systemu lub zespołu. Nazwa koloru przed etykietą nadaje ramce odcień.

Pytania o ten diagram

Co oznaczają typy strzałek w diagramie sekwencji Mermaid?

Strzałki ciągłe (->>) to wywołania synchroniczne, strzałki przerywane (-->>) to odpowiedzi lub komunikaty asynchroniczne. Aktywacje pokazują, kiedy uczestnik jest zajęty przetwarzaniem.

Czy mogę pokazać pętle i warunki?

Tak — Mermaid obsługuje bloki loop, alt (if/else), opt (opcjonalny) i par (równoległy), pozwalając wyrazić logikę rzeczywistych protokołów.

Czy mogę wstawić diagram sekwencji do opisu pull requesta na GitHubie?

Tak — wklej kod w bloku ogrodzonym z oznaczeniem mermaid, a GitHub wyrenderuje go w pull requestach, zgłoszeniach i komentarzach. W przeciwieństwie do zrzutu ekranu taki diagram przy kolejnej zmianie pokaże różnicę jako tekst.

Czy diagram sekwencji Mermaid pokazuje czas trwania albo opóźnienia?

Nie. Oś pionowa oddaje wyłącznie kolejność — nie ma skali czasu, więc dwie strzałki oddalone o milisekundę wyglądają tak samo jak oddalone o godzinę. Wpisz liczbę w notatce albo użyj wykresu Gantta, gdy liczy się czas trwania.

Jak pokazać uczestnika, który istnieje tylko przez część przebiegu?

Zadeklaruj go tam, gdzie się pojawia, zapisem create participant Worker, i zakończ przez destroy Worker. Linia życia zaczyna się wtedy przy komunikacie tworzącym, a kończy krzyżykiem — tak rysuje się zadanie, sesję albo proces tymczasowy.

Jak wyróżnić grupę komunikatów?

Otocz je blokiem rect rgb(240,240,255) … end, aby podbarwić tło — przydaje się do oznaczenia bloku ponowień albo transakcji. Bloki rect da się zagnieżdżać, więc ponowienie wewnątrz transakcji nadal jest czytelne. Bloki loop, alt i opt rysują własną, opisaną ramkę.

Diagram sekwencji czy inny typ diagramu?

Diagram sekwencji czy schemat blokowy?

Policz systemy. Jeden proces wewnątrz jednego komponentu to schemat blokowy; dwóch lub więcej uczestników wymieniających komunikaty to diagram sekwencji. Jeśli przyłapiesz się na pisaniu „Usługa B odbiera…” w prostokącie schematu, zmień typ — linie życia zrobią to za Ciebie.

Diagram sekwencji czy diagram stanów?

Oba opisują zachowanie w czasie. Diagram sekwencji śledzi jeden przebieg przez system i pokazuje ruch między uczestnikami; diagram stanów obejmuje wszystkie przebiegi jednego uczestnika i pokazuje, co on pamięta. Pierwszym się debuguje, drugim specyfikuje.

Poznaj pozostałe typy diagramów

🔀 Schemat blokowy 🧩 Diagram klas 🗄️ Diagram związków encji 🔄 Diagram stanów 📅 Wykres Gantta 🥧 Wykres kołowy 🧠 Mapa myśli 🌿 Graf Git 🕰️ Oś czasu 🚶 Podróż użytkownika 🎯 Wykres ćwiartkowy

Stwórz swój Diagram sekwencji już teraz

Opisz go naturalnym językiem — AI napisze kod Mermaid za Ciebie.

Otwórz Mermaid Studio