Jak napisać diagram przepływu Mermaid:kierunek, węzły i strzałki.

Kierunek

Pierwsza linia nazywa typ diagramu i kierunek. Działają zarówno flowchart, jak i starsze graph.

• TD lub TB: z góry na dół
• BT: z dołu do góry
• LR: od lewej do prawej
• RL: od prawej do lewej

Wybierz LR dla krótkiego procesu, który mieści się w szerokości strony, a TD dla dłuższego.

Kształty węzłów

Węzeł to id, po którym opcjonalnie następuje jego tekst w nawiasach. Nawiasy wybierają kształt:

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

Węzeł bez nawiasów pokazuje tylko swoje id. Do węzła możesz później odwołać się samym id, więc kształt i tekst zapisujesz raz.

Połączenia i etykiety

Połączenia łączą dwa węzły. Kształt strzałki pokazuje rodzaj połączenia:

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• --> strzałka, --- linia bez grotu
• -.-> strzałka kropkowana, ==> gruba
• -->|etykieta| lub -- etykieta --> umieszcza tekst na połączeniu
• A --> B & C łączy jeden węzeł z kilkoma, a A --> B --> C łączy je w łańcuch

Dodaj myślniki, by wydłużyć połączenie, na przykład ---->, gdy węzeł potrzebuje więcej miejsca.

Podgrafy

Podgraf grupuje węzły w opisanym polu. Zaczyna się od subgraph i kończy na end:

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

Słowo w nawiasach to tytuł, a słowo przed nim to id, do którego możesz się odwołać. Podgraf może mieć w środku własną linię direction LR, choć kierunek jest ignorowany, jeśli węzeł wewnątrz łączy się z czymś na zewnątrz.

Pełny przykład

Łącząc wszystko, oto mały proces wydania z decyzją, pętlą wstecz i zgrupowanym krokiem:

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

Czytaj od góry: kształt stadionu oznacza początek, romby to pytania, strzałki z etykietami to odpowiedzi, a pole wokół dwóch węzłów to przegląd. Nazwanie każdej decyzji pytaniem, a każdej strzałki jej odpowiedzią sprawia, że diagram przepływu jest czytelny bez wyjaśnień.

Komentarze i style

Linia zaczynająca się od %% jest komentarzem i nie jest rysowana. Aby pokolorować węzły, zdefiniuj klasę i zastosuj ją:

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

Stylizuj oszczędnie. Większość diagramów przepływu czyta się lepiej z mniejszą liczbą kolorów, a style mogą wyglądać inaczej w jasnym i ciemnym motywie.

Częste błędy

• Słowo end małymi literami jako tekst węzła psuje diagram. Napisz End lub ujmij tekst w cudzysłów.
• Id węzła zaczynające się od o lub x zaraz po połączeniu, np. A---oB, jest czytane jako połączenie z kółkiem lub krzyżykiem. Dodaj spację lub użyj wielkiej litery.
• Znaki specjalne w etykiecie. Nawiasy i dwukropki wymagają podwójnego cudzysłowu: A["Zapisz (wersja robocza)"].
• Brak pierwszej linii. Bez flowchart TD nic się nie narysuje.
• Zbyt wiele węzłów. Diagram przepływu z trzydziestoma polami jest trudny do czytania. Podziel go lub użyj podgrafów.

Gdy diagram zawodzi, Mermaid pokazuje komunikat o błędzie, a tekst zostaje w twoim pliku do poprawienia.

Rysowanie

GitHub rysuje bloki Mermaid w plikach Markdown, tak samo jak DotMD: offline, w jasnym lub ciemnym motywie zgodnym ze stroną. W edytorze Insert → Diagram wstawia do dokumentu działający diagram przepływu, a podgląd przerysowuje się podczas pisania. Ten sam przewodnik obejmuje diagramy sekwencji, klas, stanów, ER i Gantta. Składnię ogrodzeń opisuje artykuł o blokach kodu w Markdown.

Pytania o diagramy przepływu Mermaid

Więcej pytań