Osnovna sintaksa
Diagram poteka je sestavljen iz vozlišč (geometrijskih oblik) in povezovalnih črt (puščic ali črt). Koda Mermaid določa, kako se gradijo vozlišča in povezovalne črte, ter podpira več vrst puščic, večsmerne puščice in poljubne povezave s podgrafi.
Opozorilo Če v vozlišču diagrama poteka uporabite besedo "end", prvo črko ali celotno besedo zapišite z velikimi črkami (na primer: "End" ali "END"); vnos "end" z vsemi malimi črkami povzroči napako v diagramu poteka.
Opozorilo Če pri povezovanju vozlišč diagrama poteka uporabite črko "o" ali "x" kot prvo črko, pred črko dodajte presledek ali črko zapišite z veliko začetnico (na primer: "dev--- ops", "dev---Ops").
Eno vozlišče (privzeto)
Kopiraj
Vdelava
---
title: Node
---
flowchart LR
id
id je tisto, kar je prikazano v polju.
Pri sintaksi za ustvarjanje diagrama poteka lahko poleg flowchart uporabite tudi graph.
Vozlišče z besedilom
Polju lahko nastavite tudi besedilo, ki se razlikuje od id. Če to storite večkrat, sistem uporabi zadnje določeno besedilo vozlišča. Poleg tega, če pozneje za vozlišče definirate povezovalno črto, lahko definicijo besedila izpustite; pri upodabljanju polja bo uporabljeno prej definirano besedilo.
Kopiraj
Vdelava
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Besedilo Unicode
Besedilo Unicode ovijte z dvojnimi narekovaji.
Kopiraj
Vdelava
flowchart LR
id["This ❤ Unicode"]
Oblika Markdown
Besedilo Markdown ovijte z dvojnimi narekovaji in povratnimi narekovaji
Kopiraj
Vdelava
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Smer
Določa smer diagrama poteka
Pomeni, da je diagram poteka razporejen od zgoraj navzdol (TD ali TB)
Kopiraj
Vdelava
flowchart TD
Start --> Stop
Smeri diagrama poteka vključujejo:
- TB - od zgoraj navzdol
- TD - od zgoraj navzdol (enako kot od zgoraj navzdol)
- BT - od spodaj navzgor
- RL - od desne proti levi
- LR - od leve proti desni
Oblika vozlišča
Zaobljen pravokotnik
Kopiraj
Vdelava
flowchart LR
id1(This is the text in the box)
Oblika stadiona
Kopiraj
Vdelava
flowchart LR
id1([This is the text in the box])
Podproces
Kopiraj
Vdelava
flowchart LR
id1[[This is the text in the box]]
Zbirka podatkov
Kopiraj
Vdelava
flowchart LR
id1[(Database)]
Krog
Kopiraj
Vdelava
flowchart LR
id1((This is the text in the circle))
Asimetrična oblika
Kopiraj
Vdelava
flowchart LR
id1>This is the text in the box]
Romb
Kopiraj
Vdelava
flowchart LR
id1{This is the text in the box}
Šestkotnik
Kopiraj
Vdelava
flowchart LR
id1{{This is the text in the box}}
Paralelogram
Kopiraj
Vdelava
flowchart TD
id1[/This is the text in the box/]
Obrnjen paralelogram
Kopiraj
Vdelava
flowchart TD
id1[\This is the text in the box\]
Trapez
Kopiraj
Vdelava
flowchart TD
A[/ProcessOn\]
Obrnjen trapez
Kopiraj
Vdelava
flowchart TD
B[\ProcessOn/]
Dvojni krog
Kopiraj
Vdelava
flowchart TD
id1(((This is the text in the circle)))
Razširitev oblik vozlišč diagrama poteka Mermaid
Mermaid je predstavil 30 novih oblik, ki povečajo prilagodljivost in natančnost ustvarjanja diagramov poteka. Te nove oblike ponujajo več možnosti za nazorno predstavitev procesov, odločitev, dogodkov, shranjevanja podatkov in drugih elementov v diagramu poteka, s čimer izboljšajo jasnost in semantični pomen.
Nova sintaksa za definiranje oblik
Mermaid zdaj podpira splošno sintakso za definiranje vrst oblik, da bi se prilagodil vse večjemu številu oblik. Ta sintaksa vam omogoča, da vozlišču določite določeno obliko z jasno in prilagodljivo obliko zapisa.
Kopiraj
Vdelava
A@{ shape: rect }
Ta sintaksa ustvari vozlišče A kot pravokotnik. Upodablja se enako kot [A] ali A.
Popoln seznam oblik vozlišč
Sledi popoln seznam novo predstavljenih oblik vozlišč z njihovimi ustreznimi pomeni, kraticami in vzdevki:
| Semantično ime | Sintaksa grafa | Kratica sintakse | Alternativa sintakse | Podroben opis |
|---|---|---|---|---|
| Kartica | Notched Rectangle | notch-rect | card, notched-rectangle | Predstavlja kartico |
| Razvrščanje | Hourglass | hourglass | collate | Predstavlja operacijo razvrščanja |
| Komunikacijska povezava | Lightning Bolt | bolt | com-link, lightning-bolt | Komunikacijska povezava |
| Komentar | Curly Brace | brace | brace-l, comment | Dodaj komentar |
| Komentar na desni | Curly Brace | brace-r | Dodaj komentar | |
| Komentar z zavitima oklepajema na obeh straneh | Curly Braces | braces | Dodaj komentar | |
| Vnos ali izhod podatkov | Lean Right | lean-r | in-out, lean-right | Predstavlja vnos ali izhod |
| Vnos ali izhod podatkov | Lean Left | lean-l | lean-left, out-in | Predstavlja izhod ali vnos |
| Zbirka podatkov | Cylinder | cyl | cylinder, database, db | Shramba zbirke podatkov |
| Odločitev | Diamond | diam | decision, diamond, question | Korak odločitve |
| Zakasnitev | Half-Rounded Rectangle | delay | half-rounded-rectangle | Predstavlja zakasnitev |
| Neposredna dostopna shramba | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Neposredna dostopna shramba |
| Diskovna shramba | Lined Cylinder | lin-cyl | disk, lined-cylinder | Diskovna shramba |
| Zaslon | Curved Trapezoid | curv-trap | curved-trapezoid, display | Predstavlja prikaz informacij na zaslonu, terminalu in podobnih napravah |
| Deljena obdelava | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Oblika deljene obdelave |
| Dokument | Document | doc | document | Predstavlja dokument |
| Dogodek | Rounded Rectangle | rounded | event | Predstavlja dogodek |
| Izvleček | Triangle | tri | extract, triangle | Postopek izvlečka |
| Razcep/združitev | Filled Rectangle | fork | join | Razcep ali združitev v diagramu poteka |
| Notranja shramba | Window Pane | win-pane | internal-storage, window-pane | Notranja shramba |
| Točka povezave | Filled Circle | f-circ | filled-circle, junction | Točka povezave |
| Dokument s črto | Lined Document | lin-doc | lined-document | Dokument s črto |
| Postopek s črto/senco | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Oblika procesa s črto |
| Omejitev zanke | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Korak omejitve zanke |
| Ročna datoteka | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operacija ročne datoteke |
| Ročni vnos | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Korak ročnega vnosa |
| Ročna operacija | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Predstavlja ročno opravilo |
| Več dokumentov | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Več procesov | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Nepravilna oblika | Odd | odd | Nepravilna oblika | |
| Papirni trak | Flag | flag | paper-tape | Papirni trak |
| Priprava pogoja | Hexagon | hex | hexagon, prepare | Korak priprave ali pogoja |
| Prednostno dejanje | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Prednostno dejanje |
| Obdelava | Rectangle | rect | proc, process, rectangle | Standardna oblika obdelave |
| Začetek | Circle | circle | circ | Začetna točka |
| Začetek | Small Circle | sm-circ | small-circle, start | Majhen krogec kot začetek |
| Ustavi | Double Circle | dbl-circ | double-circle | Predstavlja točko ustavitve |
| Ustavi | Framed Circle | fr-circ | framed-circle, stop | Predstavlja točko ustavitve |
| Shranjevanje podatkov | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Shranjevanje podatkov |
| Podproces | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Podproces, podprogram |
| Povzetek | Crossed Circle | cross-circ | crossed-circle, summary | Povzetek |
| Označen dokument | Tagged Document | tag-doc | tagged-document | Označen dokument |
| Standardiziran proces | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Končna točka | Stadium | stadium | pill, terminal | Končna točka |
| Besedilni blok | Text Block | text | Besedilni blok |
Sledi primer kode diagrama poteka z novo predstavljenimi oblikami:
Kopiraj
Vdelava
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
Kopiraj
Vdelava
flowchart TD
A@{ shape: rect, label: "This is a process" }
Dogodek
Kopiraj
Vdelava
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Podproces
Kopiraj
Vdelava
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Zbirka podatkov (cilinder)
Kopiraj
Vdelava
flowchart TD
A@{ shape: cyl, label: "Database" }
Začetek (krog)
Kopiraj
Vdelava
flowchart TD
A@{ shape: circle, label: "Start" }
Nepravilna oblika
Kopiraj
Vdelava
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Odločitev (romb)
Kopiraj
Vdelava
flowchart TD
A@{ shape: diamond, label: "Decision" }
Priprava pogoja (šestkotnik)
Kopiraj
Vdelava
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Vnos/izhod podatkov (nagnjeno v desno)
Kopiraj
Vdelava
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Vnos/izhod podatkov (nagnjeno v levo)
Kopiraj
Vdelava
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Prednostno dejanje (trapez)
Kopiraj
Vdelava
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Ročna operacija (obrnjen trapez)
Kopiraj
Vdelava
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Ustavi (dvojni krog)
Kopiraj
Vdelava
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Besedilni blok
Kopiraj
Vdelava
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kartica (pravokotnik z zarezo)
Kopiraj
Vdelava
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Proces s črto/senco
Kopiraj
Vdelava
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Začetek (majhen krog)
Kopiraj
Vdelava
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Ustavi (krog v okvirju)
Kopiraj
Vdelava
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Razcep/združitev (dolg pravokotnik)
Kopiraj
Vdelava
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Razvrščanje (peščena ura)
Kopiraj
Vdelava
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Komentar (zavita oklepaja)
Kopiraj
Vdelava
flowchart TD
A@{ shape: comment, label: "Comment" }
Komentar na desni (zavit oklepaj na desni)
Kopiraj
Vdelava
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Komentar (oklepaja na obeh straneh)
Kopiraj
Vdelava
flowchart TD
A@{ shape: braces, label: "Comment" }
Komunikacijska povezava (strela)
Kopiraj
Vdelava
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopiraj
Vdelava
flowchart TD
A@{ shape: doc, label: "Document" }
Zakasnitev (polzaobljen pravokotnik)
Kopiraj
Vdelava
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopiraj
Vdelava
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Diskovna shramba (valj z utori)
Kopiraj
Vdelava
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Zaslon (oblika zaslona)
Kopiraj
Vdelava
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Deljena obdelava (deljen pravokotnik)
Kopiraj
Vdelava
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Izvleček (majhen trikotnik)
Kopiraj
Vdelava
flowchart TD
A@{ shape: tri, label: "Extract" }
Notranja shramba (okenska plošča)
Kopiraj
Vdelava
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Točka povezave (poln krog)
Kopiraj
Vdelava
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument s črto
Kopiraj
Vdelava
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Omejitev zanke (peterokotnik z zarezo)
Kopiraj
Vdelava
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Ročna datoteka (obrnjen trikotnik)
Kopiraj
Vdelava
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Ročni vnos (pravokotni trapez)
Kopiraj
Vdelava
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Več dokumentov (zloženi dokumenti)
Kopiraj
Vdelava
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Več procesov (zloženi pravokotniki)
Kopiraj
Vdelava
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Papirni trak (zastava)
Kopiraj
Vdelava
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Shranjevanje podatkov (pravokotnik metuljček)
Kopiraj
Vdelava
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Povzetek (krog s križem)
Kopiraj
Vdelava
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Označen dokument
Kopiraj
Vdelava
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Označen proces
Kopiraj
Vdelava
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Posebne oblike v diagramu poteka Mermaid
Mermaid je predstavil tudi slike za izboljšanje vašega diagrama poteka, saj vam omogoča, da slike vključite neposredno v diagram poteka, kar zagotavlja več vizualnega konteksta in jasnosti.
Oblika slike
Za vstavljanje slike v diagram poteka lahko uporabite image; sintaksa za definiranje slike je naslednja:
Kopiraj
Vdelava
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parameter
- img: naslov URL slike, ki naj se prikaže.
- label: besedilna oznaka, povezana s sliko; lahko je poljuben niz. Če ni definirana, se oznaka ne prikaže.
- pos: položaj oznake. Če ni definiran, je oznaka privzeto na dnu slike.
- w: širina slike. Če ni definirana, je privzeto naravna širina slike.
- h: višina slike. Če ni definirana, je privzeto naravna višina slike.
- constraint: določa, ali slika omejuje velikost vozlišča. Ta nastavitev tudi zagotavlja, da slika ohrani prvotno razmerje stranic in višino prilagodi glede na širino. Če ni definirana, je privzeto off.
Slike zagotavljajo dodatno prilagodljivost in vizualno privlačnost vašega diagrama poteka, zaradi česar je bolj informativen in privlačen.
Povezave med vozlišči
Vozlišča je mogoče povezati s povezovalnimi črtami in puščicami. Obstajajo različne vrste povezav, na povezave pa lahko priložite tudi besedilne nize.
Povezava s puščico
Kopiraj
Vdelava
flowchart LR
A-->B
Odprta povezava
Kopiraj
Vdelava
flowchart LR
A --- B
Povezava z besedilom
Kopiraj
Vdelava
flowchart LR
A-- This is the text! ---B
ali
Kopiraj
Vdelava
flowchart LR
A --- | This is the text| B
Povezava s puščico in besedilom
Kopiraj
Vdelava
flowchart LR
A-->|text|B
ali
Kopiraj
Vdelava
flowchart LR
A-- text -->B
Črtkana povezava
Kopiraj
Vdelava
flowchart LR
A-.->B;
Črtkana povezava z besedilom
Kopiraj
Vdelava
flowchart LR
A-. text .->B;
Debela povezava
Kopiraj
Vdelava
flowchart LR
A ==> B
Debela povezava z besedilom
Kopiraj
Vdelava
flowchart LR
A == |text| ==> B
Nevidna povezava
Kopiraj
Vdelava
flowchart LR
A ~~~ B
Verižno povezovanje povezav
Kopiraj
Vdelava
flowchart LR
A -- text --> B -- text2 --> C
V isti vrstici lahko določite tudi več povezav med vozlišči, kot je prikazano spodaj:
Kopiraj
Vdelava
flowchart LR
a --> b & c--> d
Opisete lahko tudi odvisnosti, kot v spodnji kodi:
Kopiraj
Vdelava
flowchart LR
a --> b & c--> d & e--> f
Če bi isti graf opisali z osnovno sintakso, bi potrebovali 8 vrstic. Opozoriti velja, da lahko pretirana uporaba te metode oteži branje diagrama poteka v obliki Markdown.
Kopiraj
Vdelava
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Dodajanje ID povezovalni črti
Mermaid zdaj podpira dodajanje ID povezovalnim črtam, podobno kot prilaganje ID in metapodatkov vozliščem. Ta funkcija je osnova za naprednejše možnosti oblikovanja, razredov in animacij na povezovalnih črtah.
Sintaksa:Če želite povezovalni črti dodati ID, pred sintakso povezovalne črte napišite ID, ki mu takoj sledi znak @. Na primer:
Kopiraj
Vdelava
flowchart LR
A e1@--> B
V tem primeru je e1 ID povezovalne črte, ki povezuje A in B. Ta ID lahko uporabite v poznejših definicijah ali stavkih za oblikovanje, tako kot pri vozliščih.
Vklop animacije
Ko povezovalni črti dodate ID, lahko animacijo povezovalne črte vklopite z definiranjem njenih lastnosti:
Kopiraj
Vdelava
flowchart LR
A e1@==> B
e1@{ animate: true }
To pove Mermaidu, da je povezovalna črta e1 animirana.
Izbira vrste animacije
V začetni različici sta podprti dve hitrosti animacije: fast in slow. Izbira določene vrste animacije je preprost način za vklop animacije in hkratno nastavitev hitrosti animacije.
Kopiraj
Vdelava
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animacija s stavkom classDef
Povezovalni črti lahko dodate animacijo tudi tako, da ji dodelite razred in nato v stavku classDef definirate lastnosti animacije. Na primer:
Kopiraj
Vdelava
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
V tej kodi:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definira razred z imenom animate ter sloga in lastnosti animacije.
- class e1 animate uporabi razred animate na povezovalni črti e1.
Opomba o ubežnem vejici: pri nastavljanju lastnosti stroke-dasharray ne pozabite ubežati vejice kot ,, ker se vejica v definicijah slogov Mermaid uporablja kot ločilo.
Nova vrsta puščice
Podpora novim vrstam puščic
- Povezovalna črta s polnim krogom
- Povezovalna črta z oznako križa
Povezovalna črta s polnim krogom
Kopiraj
Vdelava
flowchart LR
A --o B
Povezovalna črta z oznako križa
Kopiraj
Vdelava
flowchart LR
A --x B
Večsmerna puščica
Uporabite lahko večsmerne puščice, na primer:
Kopiraj
Vdelava
flowchart LR
A o--o B
B <--> C
C x--x D
Dolžina povezovalne črte
Vsako vozlišče v diagramu poteka se glede na vozlišča, s katerimi je povezano, dodeli ravni v upodobljenem grafu, to je navpični ali vodoravni ravni (odvisno od smeri diagrama poteka). Privzeto lahko povezave prečkajo poljubno število ravni, vendar lahko z dodajanjem dodatnih pomišljajev v definicijo povezave zahtevate, da je določena povezava daljša od drugih.
V tem primeru sta v povezavo od vozlišča B do vozlišča E dodana dva dodatna pomišljaja, tako da prečka dve ravni več kot običajna povezava:
Kopiraj
Vdelava
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Ko je oznaka povezave zapisana na sredini povezave, je treba na desno stran povezave dodati dodatne pomišljaje. Ta primer je enakovreden prejšnjemu:
Kopiraj
Vdelava
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Pri pikčastih črtah ali debelih povezavah so znaki, ki jih je treba dodati, enačaj ali pika, kot je prikazano v spodnji tabeli:
| Dolžina | 1 | 2 | 3 |
|---|---|---|---|
| Običajna povezava | --- | ---- | ----- |
| Običajna povezava s puščico | --> | ---> | ----> |
| Debela povezava | === | ==== | ===== |
| Debela povezava s puščico | ==> | ===> | ====> |
| Pikčasta črta | -.- | -..- | -...- |
| Pikčasta črta s puščico | -.- | -..-> | -...-> |
Posebni znaki
Besedilo lahko postavite v narekovaje, da upodobite bolj zapletene znake. Kot je prikazano v spodnjem primeru:
Kopiraj
Vdelava
flowchart LR
id1["This is the (text) in the box"]
Kodiranje entitet za ubežne znake
Znake lahko ubežite s sintakso iz primera.
Kopiraj
Vdelava
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Navedena števila so decimalna, zato je # mogoče kodirati kot #35. Podprta je tudi uporaba imen znakov HTML.
Podgraf
Kopiraj
Vdelava
subgraph title
graph definition
end
Spodaj je primer:
Kopiraj
Vdelava
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Podgrafu lahko nastavite tudi id.
Kopiraj
Vdelava
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Diagram poteka
Pri grafih tipa diagram poteka lahko nastavite povezovalne črte v podgraf in iz njega, kot v spodnjem diagramu poteka.
Kopiraj
Vdelava
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
Smer podgrafa
Pri uporabi tipa diagram poteka lahko s stavkom za smer nastavite smer upodabljanja podgrafa, kot je prikazano spodaj:
Kopiraj
Vdelava
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
Omejitve
Če je katero koli vozlišče podgrafa povezano z zunanjostjo, se smer podgrafa prezre. V nasprotnem primeru podgraf podeduje smer nadrejenega grafa:
Kopiraj
Vdelava
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
Niz Markdown
Niz Markdown izboljša diagrame poteka in miselne vzorce s ponujanjem bolj prilagodljive vrste niza, saj podpira možnosti oblikovanja besedila, kot sta krepko in ležeče, ter omogoča samodejno prelamljanje besedila znotraj oznak.
Kopiraj
Vdelava
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
- Za krepko besedilo pred in za besedilom uporabite dve zvezdici (**).
- Za ležeče besedilo uporabite eno zvezdico (*) pred in za besedilom.
- Pri običajnih nizih morate za prelom besedila v vozlišču dodati oznako <br>. Vendar se niz Markdown samodejno prelomi, ko je besedilo predolgo, in za začetek nove vrstice zadošča znak za novo vrstico namesto oznake <br>.
Ta funkcija velja za oznake vozlišč, oznake povezovalnih črt in oznake podgrafov
Samodejno prelamljanje lahko onemogočite z uporabo posebne sintakse
Kopiraj
Vdelava
---
config:
markdownAutoWrap: false
---
graph LR
Komentar
V diagram poteka lahko vnesete komentarje, ki jih urejevalnik prezre. Komentar mora zavzemati celotno vrstico in se mora začeti z dvojnim odstotkom (%%). Vsako besedilo od začetka komentarja do naslednje vrstice se obravnava kot komentar, vključno s katero koli sintakso diagrama poteka.
Kopiraj
Vdelava
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Slogi in razredi
Slog povezave
Nastavite lahko slog povezave. Na primer, morda želite oblikovati povezavo, ki se v procesu premika nazaj; ker povezave za razliko od vozlišč nimajo ID, je treba na drug način določiti, kateri slog naj povezava uporabi. Uporabite zaporedno številko ob definiranju povezave ali privzeto vrednost, ki se uporabi za vse povezave.
Kopiraj
Vdelava
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Slog lahko dodate več povezavam tako, da v posameznem stavku številke povezav ločite z vejicami:
Kopiraj
Vdelava
linkStyle 1,2,7 color:blue;
Nastavitev sloga krivulje povezovalne črte
Če privzeta metoda ne ustreza vašim potrebam, lahko nastavite slog krivulje povezovalnih črt med elementi. Razpoložljivi slogi krivulj vključujejo basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter in stepBefore.
V spodnjem primeru diagram od leve proti desni uporablja slog krivulje stepBefore.
Kopiraj
Vdelava
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Nastavitev sloga vozlišča
Vozlišču lahko nastavite določen slog, na primer debelejši rob ali drugačno barvo ozadja.
Kopiraj
Vdelava
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
Razred
Namesto da bi slog definirali vsakič znova, je bolj priročno definirati slogovni razred in ga priložiti vozliščem, ki naj bi bila videti drugače.
Definicija razreda je prikazana spodaj:
Kopiraj
Vdelava
classDef className fill:pink,stroke:#333,stroke-width:4px;
Poleg tega lahko v enem stavku definirate slog za več razredov:
Kopiraj
Vdelava
classDef firstClassName,secondClassName font-size:12pt;
Prilaganje razreda vozlišču poteka takole:
Kopiraj
Vdelava
class nodeId1 className;
V enem stavku lahko razred priložite tudi seznamu vozlišč:
Kopiraj
Vdelava
class nodeId1,nodeId2 className;
Za dodajanje razreda lahko z operatorjem ::: ime razreda priložite vozlišču, kot je prikazano spodaj:
Kopiraj
Vdelava
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Ta oblika se lahko uporabi pri določanju več povezav med vozlišči:
Kopiraj
Vdelava
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- V deklaracijah grafov se stavki zdaj lahko končajo tudi brez podpičja. Po različici 0.2.16 je končanje stavka grafa s podpičjem le neobvezno. Zato je spodnja deklaracija grafa prav tako veljavna kot stara deklaracija grafa.
- Med vozlišči in povezavami je dovoljen en presledek. Vendar med vozliščem in njegovim besedilom ter med povezavo in njenim besedilom ne sme biti presledkov. Stara deklaracija grafa je še vedno veljavna, zato je ta nova funkcija neobvezna in je namenjena izboljšanju berljivosti.
Spodaj je nova deklaracija povezovalne črte, ki je prav tako veljavna kot stara deklaracija povezovalne črte.
Kopiraj
Vdelava
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
