Podstawowa definicja
Schemat blokowy składa się z węzłów (kształtów geometrycznych) i linii połączeń (strzałek lub linii). Kod Mermaid definiuje sposób budowania węzłów i linii połączeń, a także obsługuje wiele typów strzałek, strzałki wielokierunkowe oraz dowolne łącza z podgrafami.
Ostrzeżenie Jeśli używasz słowa "end" w węźle schematu blokowego, zapisz pierwszą literę lub całe słowo wielkimi literami (np. "End" lub "END"); wpisanie "end" małymi literami spowoduje błąd w schemacie blokowym.
Ostrzeżenie Jeśli podczas łączenia węzłów schematu blokowego używasz litery "o" lub "x" jako pierwszej litery, dodaj spację przed literą lub zapisz literę wielką literą (np. "dev--- ops", "dev---Ops").
Jeden węzeł (domyślnie)
Kopiuj
Osadź
---
title: Node
---
flowchart LR
id
id to zawartość wyświetlana w ramce.
W składni tworzenia schematu blokowego, oprócz flowchart, można również użyć graph.
Węzeł z tekstem
Możesz także ustawić dla ramki tekst inny niż id. Jeśli zrobisz to wielokrotnie, system użyje ostatnio określonego tekstu dla tego węzła. Ponadto, jeśli później zdefiniujesz linię połączenia dla węzła, możesz pominąć definicję tekstu; podczas renderowania ramki użyty zostanie wcześniej zdefiniowany tekst.
Kopiuj
Osadź
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Tekst Unicode
Otocz tekst Unicode podwójnymi cudzysłowami.
Kopiuj
Osadź
flowchart LR
id["This ❤ Unicode"]
Format Markdown
Otocz tekst Markdown podwójnymi cudzysłowami i odwrotnymi apostrofami
Kopiuj
Osadź
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Kierunek
Deklaruje kierunek schematu blokowego
Oznacza, że schemat blokowy jest ułożony od góry do dołu (TD lub TB)
Kopiuj
Osadź
flowchart TD
Start --> Stop
Kierunki schematu blokowego obejmują:
- TB - od góry do dołu
- TD - od góry do dołu (tak samo jak od góry do dołu)
- BT - od dołu do góry
- RL - od prawej do lewej
- LR - od lewej do prawej
Kształt węzła
Prostokąt z zaokrąglonymi narożnikami
Kopiuj
Osadź
flowchart LR
id1(This is the text in the box)
Kształt stadionu
Kopiuj
Osadź
flowchart LR
id1([This is the text in the box])
Podgraf
Kopiuj
Osadź
flowchart LR
id1[[This is the text in the box]]
Baza danych
Kopiuj
Osadź
flowchart LR
id1[(Database)]
Okrąg
Kopiuj
Osadź
flowchart LR
id1((This is the text in the circle))
Kształt asymetryczny
Kopiuj
Osadź
flowchart LR
id1>This is the text in the box]
Romb
Kopiuj
Osadź
flowchart LR
id1{This is the text in the box}
Sześciokąt
Kopiuj
Osadź
flowchart LR
id1{{This is the text in the box}}
Równoległobok
Kopiuj
Osadź
flowchart TD
id1[/This is the text in the box/]
Odwrócony równoległobok
Kopiuj
Osadź
flowchart TD
id1[\This is the text in the box\]
Trapez
Kopiuj
Osadź
flowchart TD
A[/ProcessOn\]
Odwrócony trapez
Kopiuj
Osadź
flowchart TD
B[\ProcessOn/]
Podwójny okrąg
Kopiuj
Osadź
flowchart TD
id1(((This is the text in the circle)))
Rozszerzenie kształtów węzłów schematu blokowego Mermaid
Mermaid wprowadza 30 nowych kształtów, aby zwiększyć elastyczność i precyzję tworzenia schematów blokowych. Te nowe kształty oferują więcej opcji do intuicyjnego przedstawiania procesów, decyzji, zdarzeń, przechowywania danych oraz innych elementów w schemacie blokowym, co poprawia czytelność i znaczenie semantyczne.
Nowa składnia definiowania kształtów
Mermaid obsługuje teraz ogólną składnię do definiowania typów kształtów, aby sprostać rosnącej liczbie kształtów. Ta składnia pozwala określić konkretny kształt węzła w przejrzystym i elastycznym formacie.
Kopiuj
Osadź
A@{ shape: rect }
Ta składnia tworzy węzeł A jako prostokąt. Jest renderowany w taki sam sposób jak [A] lub A.
Pełna lista kształtów węzłów
Poniżej znajduje się pełna lista nowo wprowadzonych kształtów węzłów wraz z ich odpowiednim znaczeniem, skrótem i aliasem:
| Nazwa semantyczna | Składnia graficzna | Skrót składni | Alternatywa składni | Szczegółowy opis |
|---|---|---|---|---|
| Karta | Notched Rectangle | notch-rect | card, notched-rectangle | Przedstawia kartę |
| Sortowanie | Hourglass | hourglass | collate | Przedstawia operację sortowania |
| Łącze komunikacyjne | Lightning Bolt | bolt | com-link, lightning-bolt | Łącze komunikacyjne |
| Komentarz | Curly Brace | brace | brace-l, comment | Dodaj komentarz |
| Komentarz po prawej stronie | Curly Brace | brace-r | Dodaj komentarz | |
| Komentarz z nawiasami klamrowymi po obu stronach | Curly Braces | braces | Dodaj komentarz | |
| Wejście lub wyjście danych | Lean Right | lean-r | in-out, lean-right | Przedstawia wejście lub wyjście |
| Wejście lub wyjście danych | Lean Left | lean-l | lean-left, out-in | Oznacza wyjście lub wejście |
| Baza danych | Cylinder | cyl | cylinder, database, db | Przechowywanie w bazie danych |
| Decyzja | Diamond | diam | decision, diamond, question | Krok decyzyjny |
| Opóźnienie | Half-Rounded Rectangle | delay | half-rounded-rectangle | Przedstawia opóźnienie |
| Pamięć o dostępie bezpośrednim | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Pamięć o dostępie bezpośrednim |
| Pamięć dyskowa | Lined Cylinder | lin-cyl | disk, lined-cylinder | Pamięć dyskowa |
| Wyświetlanie | Curved Trapezoid | curv-trap | curved-trapezoid, display | Przedstawia wyświetlanie informacji na ekranie, terminalu i innych urządzeniach |
| Przetwarzanie dzielone | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Kształt przetwarzania dzielonego |
| Dokument | Document | doc | document | Przedstawia dokument |
| Zdarzenie | Rounded Rectangle | rounded | event | Przedstawia zdarzenie |
| Ekstrakcja | Triangle | tri | extract, triangle | Proces ekstrakcji |
| Rozgałęzienie/scalanie | Filled Rectangle | fork | join | Rozgałęzienie lub scalanie w schemacie blokowym |
| Pamięć wewnętrzna | Window Pane | win-pane | internal-storage, window-pane | Pamięć wewnętrzna |
| Punkt połączenia | Filled Circle | f-circ | filled-circle, junction | Punkt połączenia |
| Dokument z linią | Lined Document | lin-doc | lined-document | Dokument z linią |
| Proces liniowy/cieniowany | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Kształt procesu z linią |
| Ograniczenie pętli | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Krok ograniczenia pętli |
| Plik ręczny | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Ręczna operacja na pliku |
| Wejście ręczne | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Krok wprowadzania ręcznego |
| Operacja ręczna | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Przedstawia zadanie wykonywane ręcznie |
| Wiele dokumentów | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Wiele procesów | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Kształt nieregularny | Odd | odd | Kształt nieregularny | |
| Taśma papierowa | Flag | flag | paper-tape | Taśma papierowa |
| Warunek przygotowania | Hexagon | hex | hexagon, prepare | Krok przygotowania lub warunku |
| Działanie priorytetowe | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Działanie priorytetowe |
| Przetwarzanie | Rectangle | rect | proc, process, rectangle | Standardowy kształt przetwarzania |
| Start | Circle | circle | circ | Punkt początkowy |
| Start | Small Circle | sm-circ | small-circle, start | Punkt początkowy jako małe kółko |
| Stop | Double Circle | dbl-circ | double-circle | Przedstawia punkt zatrzymania |
| Stop | Framed Circle | fr-circ | framed-circle, stop | Przedstawia punkt zatrzymania |
| Przechowywanie danych | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Przechowywanie danych |
| Podgraf | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Podproces, podprogram |
| Podsumowanie | Crossed Circle | cross-circ | crossed-circle, summary | Podsumowanie |
| Dokument z etykietą | Tagged Document | tag-doc | tagged-document | Dokument z etykietą |
| Proces standardowy | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Punkt końcowy | Stadium | stadium | pill, terminal | Punkt końcowy |
| Blok tekstu | Text Block | text | Blok tekstu |
Poniżej znajduje się przykład kodu schematu blokowego wykorzystującego nowo wprowadzone kształty:
Kopiuj
Osadź
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Proces
Kopiuj
Osadź
flowchart TD
A@{ shape: rect, label: "This is a process" }
Zdarzenie
Kopiuj
Osadź
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Podproces
Kopiuj
Osadź
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Baza danych (cylinder)
Kopiuj
Osadź
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (okrąg)
Kopiuj
Osadź
flowchart TD
A@{ shape: circle, label: "Start" }
Figura nieregularna
Kopiuj
Osadź
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Decyzja (romb)
Kopiuj
Osadź
flowchart TD
A@{ shape: diamond, label: "Decision" }
Warunek przygotowania (sześciokąt)
Kopiuj
Osadź
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Wejście/wyjście danych (nachylone w prawo)
Kopiuj
Osadź
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Wejście/wyjście danych (nachylone w lewo)
Kopiuj
Osadź
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Działanie priorytetowe (trapez)
Kopiuj
Osadź
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Operacja ręczna (odwrócony trapez)
Kopiuj
Osadź
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stop (podwójny okrąg)
Kopiuj
Osadź
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Blok tekstu
Kopiuj
Osadź
flowchart TD
A@{ shape: text, label: "This is a text block" }
Karta (prostokąt z wycięciem)
Kopiuj
Osadź
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Proces z linią/cieniem
Kopiuj
Osadź
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (małe kółko)
Kopiuj
Osadź
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stop (okrąg z ramką)
Kopiuj
Osadź
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Rozgałęzienie/scalanie (długi prostokąt)
Kopiuj
Osadź
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sortowanie (klepsydra)
Kopiuj
Osadź
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Komentarz (nawiasy klamrowe)
Kopiuj
Osadź
flowchart TD
A@{ shape: comment, label: "Comment" }
Komentarz po prawej (nawias klamrowy po prawej)
Kopiuj
Osadź
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Komentarz (nawiasy po obu stronach)
Kopiuj
Osadź
flowchart TD
A@{ shape: braces, label: "Comment" }
Łącze komunikacyjne (błyskawica)
Kopiuj
Osadź
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopiuj
Osadź
flowchart TD
A@{ shape: doc, label: "Document" }
Opóźnienie (prostokąt z połowicznie zaokrąglonymi narożnikami)
Kopiuj
Osadź
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopiuj
Osadź
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Pamięć dyskowa (cylinder z rowkami)
Kopiuj
Osadź
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Wyświetlanie (kształt wyświetlania)
Kopiuj
Osadź
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Przetwarzanie dzielone (prostokąt podzielony)
Kopiuj
Osadź
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Ekstrakcja (mały trójkąt)
Kopiuj
Osadź
flowchart TD
A@{ shape: tri, label: "Extract" }
Pamięć wewnętrzna (panel okna)
Kopiuj
Osadź
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Punkt połączenia (wypełniony okrąg)
Kopiuj
Osadź
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument z linią
Kopiuj
Osadź
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Ograniczenie pętli (pięciokąt z wycięciem)
Kopiuj
Osadź
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Plik ręczny (odwrócony trójkąt)
Kopiuj
Osadź
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Wejście ręczne (trapez prostokątny)
Kopiuj
Osadź
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Wiele dokumentów (dokumenty ułożone w stos)
Kopiuj
Osadź
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Wiele procesów (prostokąty ułożone w stos)
Kopiuj
Osadź
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Taśma papierowa (flaga)
Kopiuj
Osadź
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Przechowywanie danych (prostokąt w kształcie kokardy)
Kopiuj
Osadź
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Podsumowanie (okrąg z krzyżykiem)
Kopiuj
Osadź
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Dokument z etykietą
Kopiuj
Osadź
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Oznaczony proces
Kopiuj
Osadź
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Specjalne kształty w schemacie blokowym Mermaid
Mermaid wprowadza również obrazy, aby wzbogacić Twój schemat blokowy, pozwalając na bezpośrednie umieszczanie obrazów w schemacie blokowym, co zapewnia więcej kontekstu wizualnego i czytelności.
Kształt obrazu
Możesz użyć image, aby wstawić obraz do schematu blokowego; składnia definiowania obrazu jest następująca:
Kopiuj
Osadź
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parametr
- img: adres URL obrazu do wyświetlenia.
- label: etykieta tekstowa powiązana z obrazem, może być dowolnym ciągiem znaków. Jeśli nie zostanie zdefiniowana, żadna etykieta nie będzie wyświetlana.
- pos: pozycja etykiety. Jeśli nie zostanie zdefiniowana, etykieta domyślnie znajdzie się na dole obrazu.
- w: szerokość obrazu. Jeśli nie zostanie zdefiniowana, domyślnie przyjmowana jest naturalna szerokość obrazu.
- h: wysokość obrazu. Jeśli nie zostanie zdefiniowana, domyślnie przyjmowana jest naturalna wysokość obrazu.
- constraint: określa, czy obraz ogranicza rozmiar węzła. To ustawienie zapewnia również zachowanie oryginalnego współczynnika proporcji obrazu i dostosowanie wysokości na podstawie szerokości. Jeśli nie zostanie zdefiniowane, domyślnie przyjmowana jest wartość off.
Obrazy zapewniają dodatkową elastyczność i atrakcyjność wizualną Twojego schematu blokowego, czyniąc go bardziej informacyjnym i przyciągającym uwagę.
Połączenia między węzłami
Węzły można łączyć za pomocą linii połączeń i strzałek. Istnieją różne typy łączy, a do łącza można również dołączyć ciąg znaków.
Łącze ze strzałką
Kopiuj
Osadź
flowchart LR
A-->B
Otwarte łącze
Kopiuj
Osadź
flowchart LR
A --- B
Łącze z tekstem
Kopiuj
Osadź
flowchart LR
A-- This is the text! ---B
lub
Kopiuj
Osadź
flowchart LR
A --- | This is the text| B
Łącze ze strzałką i tekstem
Kopiuj
Osadź
flowchart LR
A-->|text|B
lub
Kopiuj
Osadź
flowchart LR
A-- text -->B
Łącze kreskowane
Kopiuj
Osadź
flowchart LR
A-.->B;
Kreskowane łącze z tekstem
Kopiuj
Osadź
flowchart LR
A-. text .->B;
Grube łącze
Kopiuj
Osadź
flowchart LR
A ==> B
Grube łącze z tekstem
Kopiuj
Osadź
flowchart LR
A == |text| ==> B
Niewidoczne łącze
Kopiuj
Osadź
flowchart LR
A ~~~ B
Łańcuchowe łączenie łączy
Kopiuj
Osadź
flowchart LR
A -- text --> B -- text2 --> C
Możesz także zadeklarować wiele łączy węzłów w tej samej linii, jak pokazano poniżej:
Kopiuj
Osadź
flowchart LR
a --> b & c--> d
Możesz także opisać zależność, jak w poniższym kodzie:
Kopiuj
Osadź
flowchart LR
a --> b & c--> d & e--> f
Jeśli opiszesz ten sam graf za pomocą podstawowej składni, będziesz potrzebować 8 linii. Należy pamiętać, że nadmierne korzystanie z tej metody może utrudnić czytanie schematu blokowego w formacie Markdown.
Kopiuj
Osadź
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Dodawanie ID do linii połączenia
Mermaid obsługuje teraz dodawanie ID do linii połączeń, podobnie jak dołączanie ID i metadanych do węzłów. Ta funkcja stanowi podstawę dla bardziej zaawansowanego stylizowania, klas i animacji linii połączeń.
Składnia:Aby dodać ID do linii połączenia, poprzedź składnię linii połączenia ID, po którym następuje bezpośrednio znak @. Na przykład:
Kopiuj
Osadź
flowchart LR
A e1@--> B
W tym przykładzie e1 to ID linii połączenia łączącej A i B. Możesz użyć tego ID w późniejszych definicjach lub instrukcjach stylu, tak samo jak w przypadku węzła.
Włącz animację
Po dodaniu ID do linii połączenia możesz włączyć animację linii połączenia, definiując jej właściwości:
Kopiuj
Osadź
flowchart LR
A e1@==> B
e1@{ animate: true }
To informuje Mermaid, że linia połączenia e1 jest animowana.
Wybierz typ animacji
W początkowej wersji obsługiwane są dwie prędkości animacji: fast i slow. Wybranie konkretnego typu animacji to prosty sposób na włączenie animacji i jednoczesne ustawienie jej prędkości.
Kopiuj
Osadź
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animacja za pomocą instrukcji classDef
Możesz także animować linię połączenia, przypisując jej klasę, a następnie definiując właściwości animacji w instrukcji classDef. Na przykład:
Kopiuj
Osadź
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
W tym kodzie:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definiuje klasę o nazwie animate z właściwościami stylu i animacji.
- class e1 animate stosuje klasę animate do linii połączenia e1.
Uwaga dotycząca ucieczki przecinka: podczas ustawiania właściwości stroke-dasharray pamiętaj o ucieczce przecinka jako ,, ponieważ przecinek jest używany jako separator w definicjach stylu Mermaid.
Nowe typy strzałek
Obsługa nowych typów strzałek
- Linia połączenia z wypełnionym okręgiem
- Linia połączenia ze znacznikiem krzyżyka
Linia połączenia z wypełnionym okręgiem
Kopiuj
Osadź
flowchart LR
A --o B
Linia połączenia ze znacznikiem krzyżyka
Kopiuj
Osadź
flowchart LR
A --x B
Strzałki wielokierunkowe
Możesz użyć strzałek wielokierunkowych, na przykład:
Kopiuj
Osadź
flowchart LR
A o--o B
B <--> C
C x--x D
Długość linii połączenia
Każdemu węzłowi w schemacie blokowym przypisywany jest poziom w wyrenderowanym grafie na podstawie węzłów, z którymi jest połączony, tj. poziom pionowy lub poziomy (w zależności od kierunku schematu blokowego). Domyślnie łącza mogą obejmować dowolną liczbę poziomów, ale możesz wymagać, aby dane łącze było dłuższe niż inne, dodając dodatkowe myślniki do definicji połączenia.
W tym przykładzie dodano dwa dodatkowe myślniki do połączenia z węzła B do węzła E, dzięki czemu obejmuje ono o dwa poziomy więcej niż zwykłe łącze:
Kopiuj
Osadź
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Gdy etykieta połączenia jest zapisana pośrodku połączenia, po prawej stronie połączenia należy dodać dodatkowe myślniki. Ten przykład jest równoważny poprzedniemu przykładowi:
Kopiuj
Osadź
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
W przypadku linii kropkowanych lub grubych łączy dodawane znaki to znak równości lub kropka, jak pokazano w poniższej tabeli:
| Długość | 1 | 2 | 3 |
|---|---|---|---|
| Zwykłe połączenie | --- | ---- | ----- |
| Zwykłe połączenie ze strzałką | --> | ---> | ----> |
| Grube połączenie | === | ==== | ===== |
| Grube połączenie ze strzałką | ==> | ===> | ====> |
| Linia kropkowana | -.- | -..- | -...- |
| Linia kropkowana ze strzałką | -.- | -..-> | -...-> |
Znaki specjalne
Możesz umieścić tekst w cudzysłowach, aby wyrenderować bardziej problematyczne znaki. Jak pokazano w poniższym przykładzie:
Kopiuj
Osadź
flowchart LR
id1["This is the (text) in the box"]
Kodowanie encji do ucieczki znaków
Możesz użyć składni z przykładu, aby uciec znaki.
Kopiuj
Osadź
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Podane liczby są dziesiętne, więc # można zakodować jako #35. Obsługiwane jest również używanie nazw znaków HTML.
Podgraf
Kopiuj
Osadź
subgraph title
graph definition
end
Oto przykład:
Kopiuj
Osadź
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Możesz także ustawić id dla podgrafu.
Kopiuj
Osadź
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Diagram przepływu
Używając diagramów typu schemat blokowy, możesz także ustawić linie połączeń prowadzące do i z podgrafu, jak w poniższym schemacie blokowym.
Kopiuj
Osadź
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Kierunek podgrafu
Używając typu schematu blokowego, możesz użyć instrukcji kierunku, aby ustawić kierunek renderowania podgrafu, jak pokazano poniżej:
Kopiuj
Osadź
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Ograniczenia
Jeśli jakikolwiek węzeł podgrafu jest połączony z zewnątrz, kierunek podgrafu zostanie zignorowany. W przeciwnym razie podgraf odziedziczy kierunek grafu nadrzędnego:
Kopiuj
Osadź
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Ciąg znaków Markdown
Ciągi znaków Markdown wzbogacają schematy blokowe i mapy myśli, oferując bardziej elastyczny typ ciągu znaków, obsługę opcji formatowania tekstu, takich jak pogrubienie i kursywa, oraz możliwość automatycznego zawijania tekstu w obrębie etykiety.
Kopiuj
Osadź
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Aby pogrubić tekst, użyj dwóch gwiazdek (**) przed i po tekście.
- Kursywa używa pojedynczej gwiazdki (*) umieszczonej przed i po tekście.
- W przypadku tradycyjnych ciągów znaków musisz dodać znacznik <br>, aby tekst zawijał się w węźle. Jednak ciągi znaków Markdown automatycznie zawijają się, gdy tekst jest zbyt długi, i wystarczy użyć znaku nowej linii zamiast znacznika <br>, aby rozpocząć nową linię.
Ta funkcja dotyczy etykiet węzłów, etykiet linii połączeń i etykiet podgrafów
Możesz wyłączyć automatyczne zawijanie, używając określonej składni
Kopiuj
Osadź
---
config:
markdownAutoWrap: false
---
graph LR
Komentarz
W schemacie blokowym można wprowadzać komentarze, które edytor zignoruje. Komentarz musi zajmować osobną linię i zaczynać się od podwójnego znaku procentu (%%). Każdy tekst od początku komentarza do następnej linii będzie traktowany jako komentarz, w tym dowolna składnia schematu.
Kopiuj
Osadź
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Styl i klasa
Styl łącza
Możesz ustawić styl łącza. Na przykład możesz chcieć zaprojektować łącze przesuwające się wstecz w procesie; ponieważ łącza nie mają ID, tak jak węzły, styl łącza należy określić w inny sposób. Użyj numeru porządkowego z definicji łącza lub wartości domyślnej stosowanej do wszystkich łączy.
Kopiuj
Osadź
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Możesz także dodać styl do wielu łączy, oddzielając numery łączy przecinkami w pojedynczej instrukcji:
Kopiuj
Osadź
linkStyle 1,2,7 color:blue;
Ustawianie stylu krzywej linii połączenia
Jeśli domyślna metoda nie spełnia Twoich potrzeb, możesz ustawić styl krzywej dla linii połączeń między elementami. Dostępne style krzywych obejmują basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter i stepBefore.
W poniższym przykładzie diagram od lewej do prawej używa stylu krzywej stepBefore.
Kopiuj
Osadź
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Ustawianie stylu węzła
Możesz ustawić określony styl dla węzła, na przykład grubszą ramkę lub inny kolor tła.
Kopiuj
Osadź
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Klasa
Wygodniejszym niż każdorazowe definiowanie stylu jest zdefiniowanie klasy stylu i dołączenie jej do węzłów wymagających innego wyglądu.
Definicja klasy wygląda następująco:
Kopiuj
Osadź
classDef className fill:pink,stroke:#333,stroke-width:4px;
Ponadto możesz zdefiniować styl dla wielu klas w jednej instrukcji:
Kopiuj
Osadź
classDef firstClassName,secondClassName font-size:12pt;
Dołączenie klasy do węzła wygląda następująco:
Kopiuj
Osadź
class nodeId1 className;
Możesz także dołączyć klasę do listy węzłów w jednej instrukcji:
Kopiuj
Osadź
class nodeId1,nodeId2 className;
Aby dodać klasę, możesz użyć operatora :::, aby dołączyć nazwę klasy do węzła, jak pokazano poniżej:
Kopiuj
Osadź
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Tej formy można użyć przy deklarowaniu wielu łączy między węzłami:
Kopiuj
Osadź
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- W deklaracji grafu instrukcje mogą teraz również nie kończyć się średnikiem. Po wersji 0.2.16 kończenie instrukcji grafu średnikiem jest tylko opcjonalne. Dlatego poniższa deklaracja grafu jest równie ważna jak stara deklaracja grafu.
- Między wierzchołkiem a łączem dozwolona jest jedna spacja. Jednak między wierzchołkiem a jego tekstem oraz między łączem a jego tekstem nie powinno być żadnych spacji. Stara deklaracja grafu nadal obowiązuje, więc ta nowa funkcja jest opcjonalna i ma na celu poprawę czytelności.
Poniżej znajduje się nowa deklaracja linii połączenia, równie ważna jak stara deklaracja linii połączenia.
Kopiuj
Osadź
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
