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

Edytor schematów blokowych Mermaid

Schemat blokowy pokazuje, jak przebiega proces: jakie są kroki, gdzie się rozgałęzia i gdzie gałęzie znów się schodzą. Nadaje się wtedy, gdy sednem jest kolejność decyzji — wdrożenie, droga żądania, ścieżka akceptacji. Jeśli sednem jest to, kto z kim i kiedy się komunikuje, lepszy będzie diagram sekwencji.

Otwórz to w edytorze →Przeczytaj przewodnik

Proces wdrożenia z dwiema ścieżkami niepowodzenia

Większość schematów na tej stronie zaczyna się od tego kształtu: prosta ścieżka sukcesu, od której odchodzą romby decyzyjne. Zwróć uwagę na cudzysłowy w przedostatnim węźle. Nawiasy wewnątrz etykiety trzeba wziąć w cudzysłów i pominięcie tego jest najczęstszym błędem ze wszystkich.

flowchart TD
    Push[Push do main] --> Lint[Analiza statyczna i typy]
    Lint --> Testy{Testy przeszły?}
    Testy -->|Nie| Powiadom[Powiadom autora commita]
    Testy -->|Tak| Build[Zbuduj obraz]
    Build --> Skan{Skan bez podatności?}
    Skan -->|Nie| Blokada["Wstrzymaj wydanie (przegląd ręczny)"]
    Skan -->|Tak| Wdrozenie[Wdróż na produkcję]
    Wdrozenie --> Dym[Testy dymne]
    Dym --> Koniec[Wydanie zakończone]

Otwórz to w edytorze

Reklama

Omówione przykłady

1. Najprostszy schemat

Dwa węzły i strzałka. `TD` prowadzi z góry na dół, `LR` z lewej do prawej. Diagram szerszy niż wyższy prawie zawsze czyta się lepiej w `LR`.

flowchart TD
    Odbiór[Odbierz żądanie] --> Odpowiedź[Wyślij odpowiedź]

Otwórz w edytorze

2. Rozgałęzienie z etykietami

Nawiasy klamrowe rysują romb. To, co stoi między pionowymi kreskami, opisuje krawędź, a nie węzeł. To rozróżnienie wróci niżej, w części o błędach.

flowchart TD
    Start[Odbierz żądanie] --> Auth{Token jest ważny?}
    Auth -->|Tak| Obsłuż[Uruchom handler]
    Auth -->|Nie| Odmów[Zwróć 401]
    Obsłuż --> Gotowe[Zwróć 200]

Otwórz w edytorze

3. Niech kształt coś znaczy

Kształty to najtańszy sposób na dołożenie informacji do schematu. Zaokrąglone końce oznaczają początek i koniec, romb decyzję, a walec magazyn danych.

flowchart LR
    Start([Uruchom zadanie]) --> Czytaj[(Czytaj z Postgresa)]
    Czytaj --> Są{Są nowe wiersze?}
    Są -->|Nie| Koniec([Zakończ bez zmian])
    Są -->|Tak| Przekształć[/Przekształć dane/]
    Przekształć --> Zapisz[(Zapisz do S3)]
    Zapisz --> Koniec

Otwórz w edytorze

4. Podgrafy do grupowania po właścicielu

Podgraf zamyka powiązane węzły w ramce. Najwięcej daje wtedy, gdy grupujesz nie po etapach, lecz po właścicielu: gdy widać, który zespół albo która usługa za co odpowiada, ujawniają się miejsca przekazania.

flowchart TD
    subgraph klient [Przeglądarka]
        UI[Wyślij formularz]
    end
    subgraph api [Usługa zamówień]
        Waliduj[Zwaliduj dane]
        Zapisz[Zapisz zamówienie]
    end
    subgraph async [Zadania w tle]
        Mail[Wyślij potwierdzenie]
        Faktura[Wystaw fakturę]
    end
    UI --> Waliduj
    Waliduj --> Zapisz
    Zapisz --> Mail
    Zapisz --> Faktura

Otwórz w edytorze

5. Pętla ponowień z limitem

Schematy blokowe dobrze radzą sobie z cyklami. Pętla ponowień to miejsce, gdzie naprawdę się sprawdzają, bo z rysunku od razu widać, czy pętla ma realne wyjście.

flowchart TD
    Wyślij[Wyślij webhook] --> Odp{Przyszło 2xx?}
    Odp -->|Tak| Sukces[Oznacz jako dostarczone]
    Odp -->|Nie| Próby{Mniej niż 5 prób?}
    Próby -->|Tak| Czekaj[Odczekaj wykładniczo]
    Czekaj --> Wyślij
    Próby -->|Nie| Kolejka[Do kolejki nieudanych]

Otwórz w edytorze

Ściąga ze składni schematu blokowego

Wszystko poniżej dotyczy wyłącznie schematu blokowego. Zwłaszcza strzałki: nie da się ich przenieść do innych typów. `->>` z diagramu sekwencji jest tutaj błędem składni.

Składnia	Znaczenie
flowchart TD	Z góry na dół. `TB` znaczy to samo. Zwykły kierunek czytania procesu.
flowchart LR	Z lewej do prawej. Jest też `RL`. Do przepływów szerokich i płytkich.
A[Tekst]	Prostokąt — zwykły krok.
A(Tekst)	Prostokąt o zaokrąglonych rogach.
A([Tekst])	Kształt stadionu — umownie początek albo koniec.
A[(Tekst)]	Walec — magazyn danych.
A{Tekst}	Romb — decyzja.
A[/Tekst/]	Równoległobok — wejście albo wyjście.
A --> B	Strzałka.
A --- B	Linia bez grotu.
A -.-> B	Strzałka kropkowana — umownie asynchronicznie albo opcjonalnie.
A ==> B	Gruba strzałka — umownie ścieżka główna.
A -->\|tekst\| B	Krawędź z etykietą. Z nawiasami potrzebne są cudzysłowy.
A["Tekst (z nawiasami)"]	Etykieta w cudzysłowie — potrzebna dla nawiasów, cudzysłowów i wszystkiego, co czyta się jako składnia kształtu.
subgraph nazwa [Tytuł] ... end	Grupuje węzły w ramce. Zamyka się przez `end`.
%% komentarz	Wiersz komentarza. Nie jest rysowany.

Reklama

Sześć błędów, które naprawdę psują schemat blokowy

Wszystkie odtworzone na silniku, którego używa ta strona (Mermaid 11.12.2). Wklej wersję błędną do edytora, a dostaniesz dokładnie opisany komunikat; poprawiona się rysuje. Najkrótsza droga do odczytania błędu Mermaida to spojrzeć na jego koniec: po `got` stoi token, na którym parser się potknął.

Co widzisz

Parse error, kończy się na: got 'PS'

Dlaczego

Wewnątrz etykiety w nawiasach kwadratowych jest otwierający nawias okrągły. Nawiasy okrągłe to składnia kształtu — `A(tekst)` oznacza węzeł zaokrąglony — więc goły nawias w kwadratowych czyta się jako początek kształtu.

Rozwiązanie

Weź całą etykietę w cudzysłów. Wewnątrz cudzysłowów wszystko jest tekstem.

Błędnie

flowchart TD
    A[Ponów (maksymalnie 5 razy)] --> B[Gotowe]

Poprawnie

flowchart TD
    A["Ponów (maksymalnie 5 razy)"] --> B[Gotowe]

Co widzisz

Parse error, kończy się na: got 'STR'

Dlaczego

W środku etykiety stoi cudzysłów prosty. Parser bierze go za początek napisu, a potem trafia na zamykający nawias kwadratowy tam, gdzie oczekiwał domykającego cudzysłowu.

Rozwiązanie

Weź całą etykietę w cudzysłów prosty, a w środku użyj cudzysłowów polskich albo zapisz znak jako `#quot;`.

Błędnie

flowchart TD
    A[Status to "oczekujące"] --> B[Gotowe]

Poprawnie

flowchart TD
    A["Status to „oczekujące”"] --> B[Gotowe]

Co widzisz

Parse error w wierszu, w którym nazwałeś węzeł

Dlaczego

Identyfikator węzła zawiera spację. Po polsku trudno tego uniknąć, bo naturalne nazwy są wielowyrazowe: «usługa uwierzytelniania», «baza użytkowników». Identyfikator to token przed strzałką, a spacja go ucina, zostawiając wyraz, którego nie ma gdzie umieścić.

Rozwiązanie

Identyfikator w jednym wyrazie, czytelny tekst w etykiecie. Polskie znaki diakrytyczne działają w identyfikatorze bez problemu — sprawdzone na `Zamówienie`, `Wysyłka` i `Zakończone`. Psuje wyłącznie spacja.

Błędnie

flowchart TD
    usługa uwierzytelniania --> baza użytkowników

Poprawnie

flowchart TD
    auth[Usługa uwierzytelniania] --> db[(Baza użytkowników)]

Co widzisz

Parse error, kończy się na: got 'end'

Dlaczego

Użyłeś `end` jako identyfikatora węzła. Małymi literami `end` zamyka podgraf, więc parser widzi koniec bloku tam, gdzie spodziewał się węzła. Zdarza się częściej, niż się wydaje: idąc za angielskimi przykładami, ostatni węzeł nazywa się `end`, nawet gdy reszta schematu jest po polsku.

Rozwiązanie

Napisz wielką literą albo daj węzłowi inny identyfikator, a słowo przenieś do etykiety. `Koniec` nie sprawia żadnych kłopotów.

Błędnie

flowchart TD
    Start[Zacznij] --> end

Poprawnie

flowchart TD
    Start[Zacznij] --> Koniec[Zakończone]

Co widzisz

Parse error w etykiecie krawędzi między kreskami

Dlaczego

Wewnątrz etykiety krawędzi są nawiasy. To, co stoi między `|…|`, ma to samo ograniczenie co etykieta węzła: tam też nawiasy są składnią, a nie tekstem.

Rozwiązanie

Etykietę krawędzi również weź w cudzysłów.

Błędnie

flowchart TD
    A -->|tak (zawsze)| B

Poprawnie

flowchart TD
    A -->|"tak (zawsze)"| B

Co widzisz

Lexical error on line 1. Unrecognized text.

Dlaczego

Kierunek jest nieprawidłowy. Schemat blokowy przyjmuje wyłącznie TB, TD, BT, LR i RL; cokolwiek innego przewraca się na analizie leksykalnej, zanim przeczyta choćby jeden węzeł. Dlatego błąd wskazuje wiersz 1, a nie miejsce literówki.

Rozwiązanie

Użyj jednego z pięciu. TD i LR pokrywają prawie wszystko.

Błędnie

flowchart GORADOL
    A --> B

Poprawnie

flowchart TD
    A --> B

Uwagi o renderowaniu

Nic z tego nie zostało przepisane z dokumentacji — wszystko zmierzone na Mermaidzie 11.12.2, którego używa ta strona. To zachowania, które zaczynają mieć znaczenie, gdy schemat przestaje być zabawką.

Polskie znaki diakrytyczne działają wszędzie, także w identyfikatorach

Sprawdzone: `Zamówienie`, `Wysyłka`, `Zakończone` i `Płatność` działają nie tylko jako etykiety, ale i jako identyfikatory węzłów — w schemacie blokowym, diagramie stanów, diagramie klas i ER. Nie trzeba pisać identyfikatorów bez ogonków, żeby diagram się narysował. Jedyne, co naprawdę psuje identyfikator, to spacja. Warto to wiedzieć, bo odruch pozbywania się polskich znaków «na wszelki wypadek» pojawia się często i tutaj jest niepotrzebny.

Etykiety łamią się tylko na spacjach

Zmierzone: etykieta węzła rozszerza się do pułapu 276 pikseli viewBoksu, a potem łamie się na kolejne wiersze i rośnie w górę, około 24 piksele na wiersz. Po polsku ma to znaczenie, bo nasze etykiety są dłuższe od angielskich. Zaskakujący szczegół jest taki, że złamanie następuje wyłącznie na spacjach: pojedynczy wyraz nie łamie się nigdy i rozciąga węzeł powyżej tego pułapu, deformując cały diagram.

Wysokość rośnie o około 105 pikseli na węzeł, a szerokość prawie stoi

W schemacie z góry na dół trzy węzły dają viewBox mniej więcej 126×278. Przy czterdziestu jest to 135×4126: szerokość urosła o 9 pikseli, a wysokość piętnastokrotnie. Długi schemat to wąski pasek, który nie mieści się na żadnym ekranie. Do tego służy przycisk centrowania w podglądzie. Gdy schemat rozciąga się nadmiernie, przejście na `flowchart LR` często zmniejsza proporcje niemal o połowę.

Etykiety to HTML i dlatego eksport do PNG był zepsuty

Etykiety schematu blokowego rysowane są jako prawdziwy HTML wewnątrz `<foreignObject>` w SVG. Dlatego działają w nich `<br>` i odrobina Markdowna. I dlatego też przeglądarka odmawia przeniesienia takiego SVG na canvas: eksport do PNG na tej stronie przez długi czas po cichu oddawał plik SVG. Teraz przed eksportem diagram jest przerysowywany etykietami z czystego tekstu SVG i PNG wychodzi poprawnie. Ceną jest nieznacznie inny skład tekstu niż na ekranie.

Motyw zmienia kolory, nigdy geometrię

Ten sam schemat wyrenderowany w motywie jasnym i ciemnym daje identyczny viewBox. Zmiana motywu niczego nie przekłada ani nie wypycha etykiety poza ramkę. Co wygląda dziwnie w ciemnym, wygląda tak samo dziwnie w jasnym.

Kiedy lepszy będzie inny diagram

Jeśli sednem jest to, kto co komu wysyła, a kolejność w czasie waży więcej niż rozgałęzienia, diagram sekwencji czyta się lepiej i czyta się lepiej także wtedy, gdy urośnie. Schemat blokowy z sześcioma uczestnikami wpisanymi jako nazwy węzłów to diagram sekwencji, który jeszcze się do tego nie przyznał.

Jeśli opisujesz nie procedurę, lecz stany, przez które przechodzi jakaś rzecz, użyj diagramu stanów. Rozpoznanie jest proste: gdy etykiety węzłów to stany — «zamówienie oczekuje», «zamówienie wysłane» — masz automat stanów; gdy to czynności — «zwaliduj dane», «wyślij e-mail» — masz schemat blokowy.

A powyżej mniej więcej czterdziestu węzłów, szczerze mówiąc, nie uratuje już żaden diagram. Albo podziel go na kilka rysunków ze wspólnym wejściem, albo przyjmij, że to, co próbujesz wyjaśnić, jest zbyt złożone na jeden obrazek. To też jest użyteczna informacja.

Inne typy diagramów

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

Otwórz edytor →