🔀 Mermaid

Schemat blokowy

Zmapuj dowolny proces, decyzję lub algorytm

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

Czym jest Schemat blokowy?

Schemat blokowy pokazuje kroki procesu i decyzje pomiędzy nimi. To najbardziej uniwersalny diagram: ścieżki onboardingu, algorytmy, łańcuchy akceptacji, instrukcje rozwiązywania problemów — jeśli coś ma kroki i wybory, schemat blokowy to pokaże.

Schematy blokowe pojawiają się wszędzie tam, gdzie proces trzeba uzgodnić, zanim powstanie: w dokumentach RFC, w runbookach, w materiałach onboardingowych, w skryptach wsparcia. Ich siłą są rozgałęzienia — każda ścieżka, jaką może pójść żądanie, łącznie z tymi, których nikt nie zaplanował. Ich słabością jest czas i odpowiedzialność: schemat blokowy mówi, co dzieje się dalej, nigdy zaś kto to robi ani jak długo to trwa. Dodaj subgraph na zespół albo zmień typ diagramu.

Żywy przykład

Kod Mermaid

flowchart TD
    A([Start]) --> B{Payment valid?}
    B -->|Yes| C[Reserve stock]
    B -->|No| D[Show error]
    C --> E{In stock?}
    E -->|Yes| F[Confirm order]
    E -->|No| G[Notify customer]
    F --> H([Done])
    D --> H
    G --> H

Żywy przykład

Kiedy go używać

Dokumentowanie procesów biznesowych i ścieżek akceptacji

Projektowanie algorytmów i logiki obsługi błędów przed kodowaniem

Objaśnianie procedur diagnostycznych i drzew decyzyjnych zespołom wsparcia

Częste błędy

Węzeł o nazwie end psuje parsowanie

Słowo end zamyka subgraph, więc węzeł używający go jako identyfikatora to błąd parsowania, a nie ostrzeżenie. Nadaj węzłowi inny identyfikator, a samo słowo umieść w etykiecie: done([End]).

Nawiasy w etykiecie bez cudzysłowu

A[Pay (card)] zawiedzie, bo Mermaid czyta wewnętrzny nawias jako kolejny ogranicznik kształtu. Ujmij całą etykietę w cudzysłów prosty — A["Pay (card)"] — co obejmuje też cudzysłowy, krzyżyki i średniki.

Krawędź z zewnątrz znosi kierunek subgraphu

Zapis direction LR w subgraphie przestaje obowiązywać, gdy tylko krawędź zaczyna się lub kończy na jednym z jego węzłów: ramka wraca do kierunku nadrzędnego. Wyceluj krawędź w identyfikator subgraphu, a wewnętrzny kierunek zostanie zachowany.

Podstawowa składnia

.mmd

flowchart TD
    A[Rectangle] --> B{Decision}
    B -->|Yes| C([Rounded])
    B -->|No| D[(Database)]

flowchart LR
Pierwsza linia ustala kierunek układu: TD lub TB z góry na dół, LR z lewej do prawej, BT i RL odwrotnie. Długie łańcuchy czyta się lepiej w LR.
B -->|Yes| C B -.->|timeout| D
Etykieta między pionowymi kreskami wyjaśnia, dlaczego wybrano daną gałąź. Strzałki kropkowane oznaczają ścieżki wyjątkowe, a grube strzałki zapisywane jako ==> — ścieżkę nominalną.
A["Pay (card)"] --> B{{Route}}
Nawiasy wybierają kształt: [] prostokąt, {} decyzja, () zaokrąglenie, {{}} sześciokąt, [()] baza danych. Etykietę z nawiasami lub inną interpunkcją Mermaida ujmij w cudzysłów.
subgraph payments [Payment service] direction LR P1 --> P2 end
Subgraph rysuje opisaną ramkę wokół powiązanych węzłów — jednej usługi, zespołu albo fazy. Własna linia direction pozwala tej ramce płynąć w bok, gdy strona płynie w dół.

Pytania o ten diagram

Kiedy użyć schematu blokowego zamiast diagramu sekwencji?

Użyj schematu blokowego dla logiki jednego procesu (kroki i decyzje). Użyj diagramu sekwencji, gdy kilku aktorów lub systemów wymienia komunikaty w czasie.

Czy AI może wygenerować schemat blokowy z opisu tekstowego?

Tak — opisz proces naturalnym językiem („użytkownik rejestruje się, weryfikuje e-mail, a potem…”), a Mermaid Studio wygeneruje kompletny schemat blokowy, gotowy do edycji.

Czy GitHub renderuje schematy blokowe Mermaid w pliku README?

Tak. Umieść kod w bloku ogrodzonym z oznaczeniem mermaid, a GitHub wyrenderuje go w plikach README, zgłoszeniach i pull requestach; GitLab i Notion działają tak samo. Do narzędzi bez natywnego wsparcia wyeksportuj SVG lub PNG.

Dlaczego Mermaid układa węzły w kolejności, której nie wybrałem?

Układ jest obliczany, nie zapisywany — w składni nie ma współrzędnych. Wpłyniesz na niego, zmieniając kierunek, grupując węzły w subgraphy, przestawiając deklaracje krawędzi albo dodając niewidoczne połączenie (A ~~~ B), które zepchnie jeden węzeł niżej.

Czym różni się graph od flowchart w Mermaid?

Oba nadal się parsują w v11. graph to pierwotne słowo kluczowe; flowchart korzysta z nowszego renderera i to pod niego pisana jest dokumentacja oraz nowe kształty. Do wszystkiego nowego używaj flowchart.

Jak pokolorować wybrane prostokąty na schemacie blokowym?

Na dwa sposoby: style A fill:#eef,stroke:#66f dla pojedynczego węzła albo classDef warn fill:#fee, a po nim class B,C warn, by ten sam styl wykorzystać w kilku miejscach. Oba są częścią źródła, więc kolory przetrwają eksport do PNG i SVG.

Schemat blokowy czy inny typ diagramu?

Schemat blokowy czy diagram stanów?

Zapytaj, czym są prostokąty. Jeśli to czynności — czasowniki, które ktoś wykonuje — właściwy jest schemat blokowy. Jeśli to sytuacje, w których tkwi ten sam obiekt, czekając na zdarzenie, użyj diagramu stanów. Cykl życia zamówienia to stany; proces akceptacji wokół niego to schemat blokowy.

Schemat blokowy czy mapa myśli?

Mapa myśli to ścisłe drzewo: jeden korzeń, jeden rodzic na węzeł, żadnych etykiet na gałęziach, żadnych cykli. W chwili gdy dwie gałęzie muszą się zejść albo strzałka potrzebuje warunku, mapa myśli przestaje wystarczać i potrzebujesz schematu blokowego.

Poznaj pozostałe typy diagramów

💬 Diagram sekwencji 🧩 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 Schemat blokowy już teraz

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

Otwórz Mermaid Studio