Základní definice
Vývojový diagram se skládá z uzlů (geometrických tvarů) a spojovacích čar (šipek nebo čar). Kód Mermaid definuje způsob vytváření uzlů a spojovacích čar a podporuje několik typů šipek, vícesměrné šipky a libovolné odkazy na podgraf.
Varování Pokud v uzlu vývojového diagramu použijete slovo "end", napište první písmeno nebo celé slovo velkými písmeny (například: "End" nebo "END"); zadání "end" celé malými písmeny způsobí chybu vývojového diagramu.
Varování Pokud při spojování uzlů vývojového diagramu použijete jako první písmeno "o" nebo "x", přidejte před písmeno mezeru nebo písmeno napište velkým (například: "dev--- ops", "dev---Ops").
Jeden uzel (výchozí)
Kopírovat
Vložení
---
title: Node
---
flowchart LR
id
id je obsah zobrazený v rámečku.
Syntaxe pro vytvoření vývojového diagramu: kromě flowchart můžete použít také graph.
Uzel s textem
Rámečku lze také nastavit jiný text než id. Pokud tak učiníte vícekrát, systém použije text naposledy zadaný pro daný uzel. Dále platí, že pokud je pro uzel později definována spojovací čára, lze definici textu vynechat; při vykreslování rámečku se použije dříve definovaný text.
Kopírovat
Vložení
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Text Unicode
Text Unicode uzavřete do dvojitých uvozovek.
Kopírovat
Vložení
flowchart LR
id["This ❤ Unicode"]
Formát Markdown
Text Markdown uzavřete do dvojitých uvozovek a zpětných apostrofů
Kopírovat
Vložení
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Směr
Deklaruje směr vývojového diagramu
Označuje, že vývojový diagram je uspořádán shora dolů (TD nebo TB)
Kopírovat
Vložení
flowchart TD
Start --> Stop
Směry vývojového diagramu zahrnují:
- TB - shora dolů
- TD - shora dolů (stejné jako shora dolů)
- BT - zdola nahoru
- RL - zprava doleva
- LR - zleva doprava
Tvar uzlu
Zaoblený obdélník
Kopírovat
Vložení
flowchart LR
id1(This is the text in the box)
Tvar stadionu
Kopírovat
Vložení
flowchart LR
id1([This is the text in the box])
Podgraf
Kopírovat
Vložení
flowchart LR
id1[[This is the text in the box]]
Databáze
Kopírovat
Vložení
flowchart LR
id1[(Database)]
Kruh
Kopírovat
Vložení
flowchart LR
id1((This is the text in the circle))
Asymetrický tvar
Kopírovat
Vložení
flowchart LR
id1>This is the text in the box]
Kosočtverec
Kopírovat
Vložení
flowchart LR
id1{This is the text in the box}
Šestiúhelník
Kopírovat
Vložení
flowchart LR
id1{{This is the text in the box}}
Rovnoběžník
Kopírovat
Vložení
flowchart TD
id1[/This is the text in the box/]
Obrácený rovnoběžník
Kopírovat
Vložení
flowchart TD
id1[\This is the text in the box\]
Lichoběžník
Kopírovat
Vložení
flowchart TD
A[/ProcessOn\]
Převrácený lichoběžník
Kopírovat
Vložení
flowchart TD
B[\ProcessOn/]
Dvojitý kruh
Kopírovat
Vložení
flowchart TD
id1(((This is the text in the circle)))
Rozšíření tvarů uzlů vývojového diagramu Mermaid
Mermaid představil 30 nových tvarů pro zvýšení flexibility a přesnosti vytváření vývojových diagramů. Tyto nové tvary nabízejí více možností pro vizuální reprezentaci procesů, rozhodnutí, událostí, datových úložišť a dalších prvků ve vývojovém diagramu, čímž zvyšují srozumitelnost a sémantický význam.
Nová syntaxe pro definici tvarů
Mermaid nyní podporuje obecnou syntaxi pro definici typů tvarů, aby vyhověl rostoucímu počtu tvarů. Tato syntaxe vám umožňuje zadat konkrétní tvar uzlu pomocí jasného a flexibilního formátu.
Kopírovat
Vložení
A@{ shape: rect }
Tato syntaxe vytvoří uzel A jako obdélník. Vykresluje se stejně jako [A] nebo A.
Úplný seznam tvarů uzlů
Následuje úplný seznam nově zavedených tvarů uzlů a jejich odpovídajících významů, zkratek a aliasů:
| Sémantický název | Syntaxe grafu | Krátký název syntaxe | Alternativa syntaxe | Podrobný popis |
|---|---|---|---|---|
| Karta | Notched Rectangle | notch-rect | card, notched-rectangle | Představuje kartu |
| Třídění | Hourglass | hourglass | collate | Představuje operaci třídění |
| Komunikační spoj | Lightning Bolt | bolt | com-link, lightning-bolt | Komunikační spoj |
| Komentář | Curly Brace | brace | brace-l, comment | Přidat komentář |
| Komentář vpravo | Curly Brace | brace-r | Přidat komentář | |
| Komentář se složenými závorkami na obou stranách | Curly Braces | braces | Přidat komentář | |
| Vstup nebo výstup dat | Lean Right | lean-r | in-out, lean-right | Představuje vstup nebo výstup |
| Vstup nebo výstup dat | Lean Left | lean-l | lean-left, out-in | Představuje výstup nebo vstup |
| Databáze | Cylinder | cyl | cylinder, database, db | Úložiště databáze |
| Rozhodnutí | Diamond | diam | decision, diamond, question | Krok rozhodnutí |
| Zpoždění | Half-Rounded Rectangle | delay | half-rounded-rectangle | Představuje zpoždění |
| Přímé přístupové úložiště | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Přímé přístupové úložiště |
| Diskové úložiště | Lined Cylinder | lin-cyl | disk, lined-cylinder | Diskové úložiště |
| Zobrazení | Curved Trapezoid | curv-trap | curved-trapezoid, display | Představuje zobrazení informací na obrazovce, terminálu a podobných zařízeních |
| Dělené zpracování | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Tvar děleného zpracování |
| Dokument | Document | doc | document | Představuje dokument |
| Událost | Rounded Rectangle | rounded | event | Představuje událost |
| Extrakce | Triangle | tri | extract, triangle | Proces extrakce |
| Větev/sloučení | Filled Rectangle | fork | join | Větev nebo sloučení ve vývojovém diagramu |
| Interní úložiště | Window Pane | win-pane | internal-storage, window-pane | Interní úložiště |
| Spojovací bod | Filled Circle | f-circ | filled-circle, junction | Spojovací bod |
| Dokument s čarou | Lined Document | lin-doc | lined-document | Dokument s čarou |
| Proces s čarou/stínem | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Tvar procesu s čarou |
| Omezení smyčky | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Krok omezení smyčky |
| Ruční soubor | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operace s ručním souborem |
| Ruční vstup | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Krok ručního vstupu |
| Ruční operace | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Představuje ruční úlohu |
| Vícenásobný dokument | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Vícenásobný proces | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Nepravidelný tvar | Odd | odd | Nepravidelný tvar | |
| Papírová páska | Flag | flag | paper-tape | Papírová páska |
| Příprava podmínky | Hexagon | hex | hexagon, prepare | Krok přípravy nebo podmínky |
| Prioritní akce | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Prioritní akce |
| Zpracování | Rectangle | rect | proc, process, rectangle | Standardní tvar zpracování |
| Start | Circle | circle | circ | Počáteční bod |
| Start | Small Circle | sm-circ | small-circle, start | Malý kruhový počáteční bod |
| Stop | Double Circle | dbl-circ | double-circle | Představuje bod zastavení |
| Stop | Framed Circle | fr-circ | framed-circle, stop | Představuje bod zastavení |
| Uložená data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Uložená data |
| Podgraf | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Podproces, podprogram |
| Souhrn | Crossed Circle | cross-circ | crossed-circle, summary | Souhrn |
| Označený dokument | Tagged Document | tag-doc | tagged-document | Označený dokument |
| Standardizovaný proces | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Koncový bod | Stadium | stadium | pill, terminal | Koncový bod |
| Textový blok | Text Block | text | Textový blok |
Následuje příklad kódu vývojového diagramu využívajícího nově zavedené tvary:
Kopírovat
Vložení
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
Kopírovat
Vložení
flowchart TD
A@{ shape: rect, label: "This is a process" }
Událost
Kopírovat
Vložení
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Podproces
Kopírovat
Vložení
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Databáze (válec)
Kopírovat
Vložení
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (kruh)
Kopírovat
Vložení
flowchart TD
A@{ shape: circle, label: "Start" }
Nepravidelný tvar
Kopírovat
Vložení
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Rozhodnutí (kosočtverec)
Kopírovat
Vložení
flowchart TD
A@{ shape: diamond, label: "Decision" }
Příprava podmínky (šestiúhelník)
Kopírovat
Vložení
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Vstup/výstup dat (sklon doprava)
Kopírovat
Vložení
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Vstup/výstup dat (sklon doleva)
Kopírovat
Vložení
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Prioritní akce (lichoběžník)
Kopírovat
Vložení
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Ruční operace (převrácený lichoběžník)
Kopírovat
Vložení
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stop (dvojitý kruh)
Kopírovat
Vložení
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Textový blok
Kopírovat
Vložení
flowchart TD
A@{ shape: text, label: "This is a text block" }
Karta (obdélník s výřezem)
Kopírovat
Vložení
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Proces s čarou/stínem
Kopírovat
Vložení
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (malý kruh)
Kopírovat
Vložení
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stop (kruh s rámečkem)
Kopírovat
Vložení
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Větev/sloučení (dlouhý obdélník)
Kopírovat
Vložení
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Třídění (přesýpací hodiny)
Kopírovat
Vložení
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Komentář (složené závorky)
Kopírovat
Vložení
flowchart TD
A@{ shape: comment, label: "Comment" }
Komentář vpravo (pravá složená závorka)
Kopírovat
Vložení
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Komentář (závorky na obou stranách)
Kopírovat
Vložení
flowchart TD
A@{ shape: braces, label: "Comment" }
Komunikační spoj (blesk)
Kopírovat
Vložení
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopírovat
Vložení
flowchart TD
A@{ shape: doc, label: "Document" }
Zpoždění (poloviční zaoblený obdélník)
Kopírovat
Vložení
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopírovat
Vložení
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Diskové úložiště (válec s drážkou)
Kopírovat
Vložení
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Zobrazení (tvar zobrazení)
Kopírovat
Vložení
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Dělené zpracování (dělený obdélník)
Kopírovat
Vložení
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Extrakce (malý trojúhelník)
Kopírovat
Vložení
flowchart TD
A@{ shape: tri, label: "Extract" }
Interní úložiště (panel okna)
Kopírovat
Vložení
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Spojovací bod (plný kruh)
Kopírovat
Vložení
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument s čarou
Kopírovat
Vložení
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Omezení smyčky (pětiúhelník s výřezem)
Kopírovat
Vložení
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Ruční soubor (obrácený trojúhelník)
Kopírovat
Vložení
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Ruční vstup (pravoúhlý lichoběžník)
Kopírovat
Vložení
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Vícenásobný dokument (stohovaný dokument)
Kopírovat
Vložení
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Vícenásobný proces (stohovaný obdélník)
Kopírovat
Vložení
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Papírová páska (vlajka)
Kopírovat
Vložení
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Uložená data (obdélník ve tvaru motýlka)
Kopírovat
Vložení
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Souhrn (kruh s křížkem)
Kopírovat
Vložení
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Označený dokument
Kopírovat
Vložení
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Označený proces
Kopírovat
Vložení
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Speciální tvary ve vývojovém diagramu Mermaid
Mermaid také zavedl obrázky pro vylepšení vašeho vývojového diagramu, což vám umožňuje přímo zahrnout obrázky do vývojového diagramu a poskytnout tak více vizuálního kontextu a srozumitelnosti.
Tvar obrázku
K vložení obrázku do vývojového diagramu můžete použít image. Syntaxe pro definici obrázku je následující:
Kopírovat
Vložení
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parametr
- img:adresa URL obrázku, který se má zobrazit.
- label:textový popisek spojený s obrázkem, může to být libovolný řetězec. Pokud není definován, nezobrazí se žádný popisek.
- pos:poloha popisku. Pokud není definována, bude popisek ve výchozím nastavení na spodní straně obrázku.
- w:šířka obrázku. Pokud není definována, použije se ve výchozím nastavení přirozená šířka obrázku.
- h:výška obrázku. Pokud není definována, použije se ve výchozím nastavení přirozená výška obrázku.
- constraint:určuje, zda obrázek omezuje velikost uzlu. Toto nastavení také zajišťuje, že obrázek zachová původní poměr stran a upraví výšku podle šířky. Pokud není definováno, je výchozí hodnota off.
Obrázky poskytují vašemu vývojovému diagramu další flexibilitu a vizuální přitažlivost, což z něj činí informativnější a atraktivnější.
Spojení mezi uzly
Uzly lze spojovat spojovacími čarami a šipkami. Existují různé typy odkazů a k odkazům lze také připojit textový řetězec.
Odkaz se šipkou
Kopírovat
Vložení
flowchart LR
A-->B
Otevřený odkaz
Kopírovat
Vložení
flowchart LR
A --- B
Odkaz s textem
Kopírovat
Vložení
flowchart LR
A-- This is the text! ---B
nebo
Kopírovat
Vložení
flowchart LR
A --- | This is the text| B
Odkaz se šipkou a textem
Kopírovat
Vložení
flowchart LR
A-->|text|B
nebo
Kopírovat
Vložení
flowchart LR
A-- text -->B
Přerušovaný odkaz
Kopírovat
Vložení
flowchart LR
A-.->B;
Přerušovaný odkaz s textem
Kopírovat
Vložení
flowchart LR
A-. text .->B;
Tlustý odkaz
Kopírovat
Vložení
flowchart LR
A ==> B
Tlustý odkaz s textem
Kopírovat
Vložení
flowchart LR
A == |text| ==> B
Neviditelný odkaz
Kopírovat
Vložení
flowchart LR
A ~~~ B
Řetězení odkazů
Kopírovat
Vložení
flowchart LR
A -- text --> B -- text2 --> C
Na jednom řádku lze také deklarovat více odkazů uzlů, jak je znázorněno níže:
Kopírovat
Vložení
flowchart LR
a --> b & c--> d
Závislosti můžete také popsat jako v následujícím kódu:
Kopírovat
Vložení
flowchart LR
a --> b & c--> d & e--> f
Pokud stejný graf popíšete základní syntaxí, bude potřeba 8 řádků. Je třeba připomenout, že nadměrné používání tohoto přístupu může ztížit čitelnost vývojového diagramu ve formátu Markdown.
Kopírovat
Vložení
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Přidání ID spojovací čáře
Mermaid nyní podporuje přidání ID ke spojovací čáře, podobně jako připojení ID a metadat k uzlu. Tato funkce vytváří základ pro pokročilejší možnosti stylování, tříd a animací na spojovacích čarách.
Syntaxe:Chcete-li spojovací čáře přidat ID, uveďte ID před syntaxí spojovací čáry, za nímž následuje znak @. Například:
Kopírovat
Vložení
flowchart LR
A e1@--> B
V tomto příkladu je e1 ID spojovací čáry spojující A a B. Toto ID můžete použít v následných definicích nebo příkazech stylu, stejně jako u uzlu.
Zapnutí animace
Po přidání ID ke spojovací čáře můžete animaci spojovací čáry zapnout definováním jejích vlastností:
Kopírovat
Vložení
flowchart LR
A e1@==> B
e1@{ animate: true }
To říká Mermaid, že spojovací čára e1 je animovaná.
Výběr typu animace
V počáteční verzi jsou podporovány dvě rychlosti animace: fast a slow. Výběr konkrétního typu animace je snadný způsob, jak animaci povolit a zároveň nastavit její rychlost.
Kopírovat
Vložení
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animace pomocí příkazu classDef
Animaci spojovací čáry můžete také přidat tak, že jí přiřadíte třídu a poté v příkazu classDef definujete vlastnosti animace. Například:
Kopírovat
Vložení
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
V tomto kódu:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definuje třídu s názvem animate s vlastnostmi stylu a animace.
- class e1 animate aplikuje třídu animate na spojovací čáru e1.
Poznámka k escapování čárky: při nastavování vlastnosti stroke-dasharray nezapomeňte čárku escapovat na ,, protože čárka se v definicích stylů Mermaid používá jako oddělovač.
Nový typ šipky
Podpora nových typů šipek
- Spojovací čára s plným kruhem
- Spojovací čára s křížkovou značkou
Spojovací čára s plným kruhem
Kopírovat
Vložení
flowchart LR
A --o B
Spojovací čára s křížkovou značkou
Kopírovat
Vložení
flowchart LR
A --x B
Vícesměrná šipka
Lze použít vícesměrné šipky, například:
Kopírovat
Vložení
flowchart LR
A o--o B
B <--> C
C x--x D
Délka spojovací čáry
Každý uzel ve vývojovém diagramu je podle uzlů, ke kterým je připojen, přiřazen k úrovni ve vykresleném grafu, tj. k vertikální nebo horizontální úrovni (v závislosti na směru vývojového diagramu). Ve výchozím nastavení může odkaz překlenout libovolný počet úrovní, ale přidáním dalších pomlček do definice spoje můžete požadovat, aby byl určitý spoj delší než ostatní.
V tomto příkladu byly do spoje z uzlu B do uzlu E přidány dvě další pomlčky, takže překlenuje o dvě úrovně více než běžný odkaz:
Kopírovat
Vložení
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Pokud je popisek spoje napsán uprostřed spoje, musí být na pravé straně spoje přidány další pomlčky. Tento příklad je ekvivalentní předchozímu příkladu:
Kopírovat
Vložení
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
U tečkovaných čar nebo tlustých odkazů je znakem, který se má přidat, rovnítko nebo tečka, jak je uvedeno v následující tabulce:
| Délka | 1 | 2 | 3 |
|---|---|---|---|
| Běžný spoj | --- | ---- | ----- |
| Běžný spoj se šipkou | --> | ---> | ----> |
| Tlustý spoj | === | ==== | ===== |
| Tlustý spoj se šipkou | ==> | ===> | ====> |
| Tečkovaná čára | -.- | -..- | -...- |
| Tečkovaná čára se šipkou | -.- | -..-> | -...-> |
Speciální znaky
Text lze uzavřít do uvozovek, aby se vykreslily obtížnější znaky. Jak je uvedeno v následujícím příkladu:
Kopírovat
Vložení
flowchart LR
id1["This is the (text) in the box"]
Entitové kódování pro escapování znaků
Znaky lze escapovat pomocí syntaxe z příkladu.
Kopírovat
Vložení
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Uvedená čísla jsou desítková, takže # lze zakódovat jako #35. Podporováno je také použití názvů znaků HTML.
Podgraf
Kopírovat
Vložení
subgraph title
graph definition
end
Následuje příklad:
Kopírovat
Vložení
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Podgrafu můžete také nastavit id.
Kopírovat
Vložení
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Vývojový diagram
Při použití typu grafu vývojového diagramu můžete stejně jako v následujícím vývojovém diagramu nastavit spojovací čáry směřující do podgrafu a z něj.
Kopírovat
Vložení
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
Směr podgrafu
Při použití typu vývojového diagramu můžete pomocí příkazu směru nastavit směr vykreslování podgrafu, jak je znázorněno níže:
Kopírovat
Vložení
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
Omezení
Pokud je některý uzel podgrafu propojen s vnějškem, směr podgrafu bude ignorován. V opačném případě podgraf zdědí směr nadřazeného grafu:
Kopírovat
Vložení
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
Řetězec Markdown
Řetězec Markdown vylepšuje vývojové diagramy a myšlenkové mapy tím, že poskytuje flexibilnější typ řetězce, podporuje možnosti formátování textu, jako je tučné písmo a kurzíva, a umožňuje automatické zalamování textu v popisku.
Kopírovat
Vložení
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
- Chcete-li text zvýraznit tučně, použijte před a za textem dvě hvězdičky (**).
- Kurzíva se vytvoří umístěním jedné hvězdičky (*) před a za text.
- U tradičních řetězců musíte přidat značku <br>, aby se text v uzlu zalomil. Řetězec Markdown však automaticky zalomí text, když je příliš dlouhý, a nový řádek stačí spustit pouhým znakem pro nový řádek místo značky <br>.
Tato funkce se vztahuje na popisky uzlů, popisky spojovacích čar a popisky podgrafů
Automatické zalamování lze zakázat pomocí specifické syntaxe
Kopírovat
Vložení
---
config:
markdownAutoWrap: false
---
graph LR
Komentář
Do vývojového diagramu můžete vkládat komentáře, které editor ignoruje. Komentář musí zabírat samostatný řádek a musí začínat dvěma znaky procenta (%%). Veškerý text od začátku komentáře do následujícího řádku je považován za komentář, včetně jakékoli syntaxe vývojového diagramu.
Kopírovat
Vložení
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Styly a třídy
Styl odkazu
Styl odkazu lze nastavit. Můžete například chtít navrhnout odkaz, který se v procesu pohybuje zpět; protože odkazy na rozdíl od uzlů nemají ID, musí se styl, který má odkaz použít, určit jiným způsobem. Použijte pořadové číslo při definici odkazu nebo použijte výchozí hodnotu pro použití na všechny odkazy.
Kopírovat
Vložení
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Styl lze přidat více odkazům tak, že v jednom příkazu oddělíte čísla odkazů čárkami:
Kopírovat
Vložení
linkStyle 1,2,7 color:blue;
Nastavení stylu křivky spojovací čáry
Pokud výchozí metoda nevyhovuje vašim potřebám, můžete pro spojovací čáry mezi položkami nastavit styl křivky. Dostupné styly křivek zahrnují basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter a stepBefore.
V následujícím příkladu používá diagram zleva doprava styl křivky stepBefore.
Kopírovat
Vložení
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Nastavení stylu uzlu
Uzlům lze nastavit konkrétní styl, například tlustší ohraničení nebo jinou barvu pozadí.
Kopírovat
Vložení
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
Třída
Pohodlnější než definovat styl pokaždé je definovat třídu stylu a připojit tuto třídu k uzlům, které potřebují odlišný vzhled.
Definice třídy je následující:
Kopírovat
Vložení
classDef className fill:pink,stroke:#333,stroke-width:4px;
Kromě toho lze v jednom příkazu definovat styl pro více tříd:
Kopírovat
Vložení
classDef firstClassName,secondClassName font-size:12pt;
Připojení třídy k uzlu je následující:
Kopírovat
Vložení
class nodeId1 className;
V jednom příkazu lze také připojit třídu k seznamu uzlů:
Kopírovat
Vložení
class nodeId1,nodeId2 className;
Přidání třídy lze provést pomocí operátoru :::, který připojí název třídy k uzlu, jak je znázorněno níže:
Kopírovat
Vložení
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Tento tvar lze použít při deklaraci více odkazů mezi uzly:
Kopírovat
Vložení
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- V deklaraci grafu nyní příkazy nemusí končit středníkem. Po verzi 0.2.16 je zakončení příkazů grafu středníkem pouze volitelné. Proto je následující deklarace grafu stejně platná jako starší deklarace grafu.
- Mezi vrcholy a odkazy je povolena jedna mezera. Mezi vrcholem a jeho textem a mezi odkazem a jeho textem by však neměly být žádné mezery. Starší deklarace grafu jsou stále platné, takže tato nová funkce je volitelná a jejím cílem je zlepšit čitelnost.
Následuje nová deklarace spojovací čáry, která je stejně platná jako starší deklarace spojovací čáry.
Kopírovat
Vložení
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
