Pagrindinis apibrėžimas
Srautų diagramą sudaro mazgai (geometrinės formos) ir jungiamosios linijos (rodyklės arba linijos). „Mermaid“ kodas apibrėžia, kaip kuriami mazgai ir jungiamosios linijos, ir palaiko įvairius rodyklių tipus, daugiakryptes rodykles bei savavališką susiejimą su pografiu.
Įspėjimas Jei srautų diagramos mazge naudojate žodį "end", pirmąją raidę arba visą žodį rašykite didžiosiomis (pavyzdžiui: "End" arba "END"); įvedus vien mažosiomis "end" srautų diagrama sugenda.
Įspėjimas Jei jungdami srautų diagramos mazgus kaip pirmąją raidę naudojate "o" arba "x", prieš raidę pridėkite tarpą arba raidę rašykite didžiąja (pavyzdžiui: "dev--- ops", "dev---Ops").
Vienas mazgas (numatytasis)
Kopijuoti
Įterpti
---
title: Node
---
flowchart LR
id
id yra tai, kas rodoma lauke.
Kuriant srautų diagramą, be flowchart galima naudoti ir graph.
Mazgas su tekstu
Taip pat galima laukui nustatyti kitokį tekstą nei id. Jei tai daroma kelis kartus, bus naudojamas paskutinis nurodytas mazgo tekstas. Be to, jei vėliau mazgui apibrėžiama jungiamoji linija, teksto apibrėžimą galima praleisti; atvaizduojant lauką bus naudojamas anksčiau apibrėžtas tekstas.
Kopijuoti
Įterpti
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode tekstas
Unicode tekstą apgaubkite dvigubomis kabutėmis.
Kopijuoti
Įterpti
flowchart LR
id["This ❤ Unicode"]
Markdown formatas
Markdown tekstą apgaubkite dvigubomis kabutėmis ir atgaline kabute
Kopijuoti
Įterpti
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Kryptis
Nurodo srautų diagramos kryptį
Nurodo, kad srautų diagrama išdėstyta iš viršaus į apačią (TD arba TB)
Kopijuoti
Įterpti
flowchart TD
Start --> Stop
Srautų diagramos kryptys:
- TB - iš viršaus į apačią
- TD - iš viršaus į apačią (tas pats kaip iš viršaus į apačią)
- BT - iš apačios į viršų
- RL - iš dešinės į kairę
- LR - iš kairės į dešinę
Mazgo forma
Stačiakampis su užapvalintais kampais
Kopijuoti
Įterpti
flowchart LR
id1(This is the text in the box)
Stadiono forma
Kopijuoti
Įterpti
flowchart LR
id1([This is the text in the box])
Paprogramė
Kopijuoti
Įterpti
flowchart LR
id1[[This is the text in the box]]
Duomenų bazė
Kopijuoti
Įterpti
flowchart LR
id1[(Database)]
Apskritimas
Kopijuoti
Įterpti
flowchart LR
id1((This is the text in the circle))
Asimetrinė forma
Kopijuoti
Įterpti
flowchart LR
id1>This is the text in the box]
Rombas
Kopijuoti
Įterpti
flowchart LR
id1{This is the text in the box}
Šešiakampis
Kopijuoti
Įterpti
flowchart LR
id1{{This is the text in the box}}
Lygiagretainis
Kopijuoti
Įterpti
flowchart TD
id1[/This is the text in the box/]
Atvirkštinis lygiagretainis
Kopijuoti
Įterpti
flowchart TD
id1[\This is the text in the box\]
Trapecija
Kopijuoti
Įterpti
flowchart TD
A[/ProcessOn\]
Apversta trapecija
Kopijuoti
Įterpti
flowchart TD
B[\ProcessOn/]
Dvigubas apskritimas
Kopijuoti
Įterpti
flowchart TD
id1(((This is the text in the circle)))
Mermaid srautų diagramos mazgų formų plėtinys
Mermaid pristatė 30 naujų formų, didinančių srautų diagramų kūrimo lankstumą ir tikslumą. Šios naujos formos suteikia daugiau parinkčių, leidžiančių vaizdžiai pavaizduoti procesus, sprendimus, įvykius, duomenų saugyklas ir kitus srautų diagramos elementus, taip didinant aiškumą ir semantinę reikšmę.
Naujoji formų apibrėžimo sintaksė
Mermaid dabar palaiko bendrą sintaksę formų tipams apibrėžti, kad būtų galima aprašyti vis daugiau formų. Ši sintaksė leidžia aiškiu ir lanksčiu formatu nurodyti konkrečią mazgo formą.
Kopijuoti
Įterpti
A@{ shape: rect }
Ši sintaksė sukuria mazgą A kaip stačiakampį. Jis atvaizduojamas taip pat kaip [A] arba A.
Visas mazgų formų sąrašas
Toliau pateikiamas visas naujai pristatytų mazgų formų bei jų reikšmių, trumpinių ir aliasų sąrašas:
| Semantinis pavadinimas | Diagramos sintaksė | Sintaksės trumpinys | Sintaksės alternatyva | Išsamus aprašymas |
|---|---|---|---|---|
| Kortelė | Notched Rectangle | notch-rect | card, notched-rectangle | Žymi kortelę |
| Rūšiavimas | Hourglass | hourglass | collate | Žymi rūšiavimo operaciją |
| Ryšio linija | Lightning Bolt | bolt | com-link, lightning-bolt | Ryšio linija |
| Komentaras | Curly Brace | brace | brace-l, comment | Pridedamas komentaras |
| Komentaras dešinėje | Curly Brace | brace-r | Pridedamas komentaras | |
| Komentaras su riestiniais skliaustais iš abiejų pusių | Curly Braces | braces | Pridedamas komentaras | |
| Duomenų įvestis arba išvestis | Lean Right | lean-r | in-out, lean-right | Žymi įvestį arba išvestį |
| Duomenų įvestis arba išvestis | Lean Left | lean-l | lean-left, out-in | Žymi išvestį arba įvestį |
| Duomenų bazė | Cylinder | cyl | cylinder, database, db | Duomenų bazės saugykla |
| Sprendimas | Diamond | diam | decision, diamond, question | Sprendimo žingsnis |
| Delsa | Half-Rounded Rectangle | delay | half-rounded-rectangle | Žymi delsą |
| Tiesioginės prieigos saugykla | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Tiesioginės prieigos saugykla |
| Disko saugykla | Lined Cylinder | lin-cyl | disk, lined-cylinder | Disko saugykla |
| Ekranas | Curved Trapezoid | curv-trap | curved-trapezoid, display | Žymi, kad informacija rodoma ekrane, terminale ir kituose įrenginiuose |
| Skaidymo apdorojimas | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Skaidymo apdorojimo forma |
| Dokumentas | Document | doc | document | Žymi dokumentą |
| Įvykis | Rounded Rectangle | rounded | event | Žymi įvykį |
| Ištraukimas | Triangle | tri | extract, triangle | Ištraukimo procesas |
| Išsišakojimas / sujungimas | Filled Rectangle | fork | join | Išsišakojimas arba sujungimas srautų diagramoje |
| Vidinė saugykla | Window Pane | win-pane | internal-storage, window-pane | Vidinė saugykla |
| Sujungimo taškas | Filled Circle | f-circ | filled-circle, junction | Sujungimo taškas |
| Dokumentas su linija | Lined Document | lin-doc | lined-document | Dokumentas su linija |
| Linijos / šešėlio procesas | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Proceso forma su linija |
| Ciklo riba | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Ciklo ribos žingsnis |
| Rankinis failas | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Rankinė failo operacija |
| Rankinė įvestis | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Rankinės įvesties žingsnis |
| Rankinė operacija | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Žymi rankinę užduotį |
| Keli dokumentai | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Keli procesai | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Netaisyklinga forma | Odd | odd | Netaisyklinga forma | |
| Popierinė juosta | Flag | flag | paper-tape | Popierinė juosta |
| Pasiruošimo sąlyga | Hexagon | hex | hexagon, prepare | Pasiruošimo arba sąlygos žingsnis |
| Pirmumo veiksmas | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Pirmumo veiksmas |
| Apdorojimas | Rectangle | rect | proc, process, rectangle | Standartinė apdorojimo forma |
| Pradžia | Circle | circle | circ | Pradžios taškas |
| Pradžia | Small Circle | sm-circ | small-circle, start | Mažas apskritimas – pradžios taškas |
| Stabdymas | Double Circle | dbl-circ | double-circle | Žymi stabdymo tašką |
| Stabdymas | Framed Circle | fr-circ | framed-circle, stop | Žymi stabdymo tašką |
| Saugomi duomenys | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Saugomi duomenys |
| Paprogramė | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Paprogramė, poprogramis |
| Santrauka | Crossed Circle | cross-circ | crossed-circle, summary | Santrauka |
| Pažymėtas dokumentas | Tagged Document | tag-doc | tagged-document | Pažymėtas dokumentas |
| Standartizuotas procesas | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Pabaigos taškas | Stadium | stadium | pill, terminal | Pabaigos taškas |
| Teksto blokas | Text Block | text | Teksto blokas |
Toliau pateikiamas srautų diagramos kodo pavyzdys, naudojant naujai pristatytas formas:
Kopijuoti
Įterpti
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"}
Procesas
Kopijuoti
Įterpti
flowchart TD
A@{ shape: rect, label: "This is a process" }
Įvykis
Kopijuoti
Įterpti
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Paprocesis
Kopijuoti
Įterpti
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Duomenų bazė (cilindras)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: cyl, label: "Database" }
Pradžia (apskritimas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: circle, label: "Start" }
Netaisyklinga figūra
Kopijuoti
Įterpti
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Sprendimas (rombas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: diamond, label: "Decision" }
Pasiruošimo sąlyga (šešiakampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Duomenų įvestis / išvestis (pasvirusi į dešinę)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Duomenų įvestis / išvestis (pasvirusi į kairę)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Pirmumo veiksmas (trapecija)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Rankinė operacija (apversta trapecija)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stabdymas (dvigubas apskritimas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Teksto blokas
Kopijuoti
Įterpti
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kortelė (stačiakampis su išpjova)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Procesas su linija / šešėliu
Kopijuoti
Įterpti
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Pradžia (mažas apskritimas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stabdymas (apskritimas su rėmeliu)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Išsišakojimas / sujungimas (ilgas stačiakampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Rūšiavimas (smėlio laikrodis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Komentaras (riestiniai skliaustai)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: comment, label: "Comment" }
Komentaras dešinėje (dešinysis riestinis skliaustas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Komentaras (skliaustai iš abiejų pusių)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: braces, label: "Comment" }
Ryšio linija (žaibas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokumentas
Kopijuoti
Įterpti
flowchart TD
A@{ shape: doc, label: "Document" }
Delsa (pusiau užapvalintas stačiakampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopijuoti
Įterpti
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Disko saugykla (cilindras su grioveliu)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Ekranas (ekrano forma)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Skaidymo apdorojimas (padalytas stačiakampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Ištraukimas (mažas trikampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: tri, label: "Extract" }
Vidinė saugykla (lango panelė)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Sujungimo taškas (pilnas apskritimas)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokumentas su linija
Kopijuoti
Įterpti
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Ciklo riba (penkiakampis su išpjova)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Rankinis failas (apverstas trikampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Rankinė įvestis (stačiakampė trapecija)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Keli dokumentai (sukrauti dokumentai)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Keli procesai (sukrauti stačiakampiai)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Popierinė juosta (vėliavėlė)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Saugomi duomenys (drugelio formos stačiakampis)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Santrauka (apskritimas su kryžiumi)
Kopijuoti
Įterpti
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Pažymėtas dokumentas
Kopijuoti
Įterpti
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Pažymėtas procesas
Kopijuoti
Įterpti
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Specialiosios formos Mermaid srautų diagramoje
Mermaid taip pat pristatė paveikslėlius, kurie papildo jūsų srautų diagramą, leisdami tiesiogiai įtraukti paveikslėlius į srautų diagramą ir taip suteikti daugiau vizualaus konteksto bei aiškumo.
Paveikslėlio forma
Galite naudoti image, kad įterptumėte paveikslėlį į srautų diagramą; paveikslėlio apibrėžimo sintaksė:
Kopijuoti
Įterpti
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parametras
- img: rodomo paveikslėlio URL adresas.
- label: su paveikslėliu susietas teksto žymeklis, gali būti bet kokia eilutė. Jei neapibrėžta, joks žymeklis nebus rodomas.
- pos: žymeklio vieta. Jei neapibrėžta, žymeklis pagal numatytuosius nustatymus bus paveikslėlio apačioje.
- w: paveikslėlio plotis. Jei neapibrėžta, numatytasis – natūralus paveikslėlio plotis.
- h: paveikslėlio aukštis. Jei neapibrėžta, numatytasis – natūralus paveikslėlio aukštis.
- constraint: nustato, ar paveikslėlis riboja mazgo dydį. Šis nustatymas taip pat užtikrina, kad paveikslėlis išlaikys pradinį kraštinių santykį, o aukštis bus koreguojamas pagal plotį. Jei neapibrėžta, numatytasis – off.
Paveikslėliai suteikia jūsų srautų diagramai papildomo lankstumo ir vizualaus patrauklumo, darydami ją informatyvesnę ir patrauklesnę.
Mazgų jungtys
Mazgai gali būti jungiami jungiamosiomis linijomis ir rodyklėmis. Yra įvairių tipų jungčių, taip pat prie jungties galima pridėti teksto eilutę.
Jungtis su rodykle
Kopijuoti
Įterpti
flowchart LR
A-->B
Atvira jungtis
Kopijuoti
Įterpti
flowchart LR
A --- B
Jungtis su tekstu
Kopijuoti
Įterpti
flowchart LR
A-- This is the text! ---B
arba
Kopijuoti
Įterpti
flowchart LR
A --- | This is the text| B
Jungtis su rodykle ir tekstu
Kopijuoti
Įterpti
flowchart LR
A-->|text|B
arba
Kopijuoti
Įterpti
flowchart LR
A-- text -->B
Brūkšninė jungtis
Kopijuoti
Įterpti
flowchart LR
A-.->B;
Brūkšninė jungtis su tekstu
Kopijuoti
Įterpti
flowchart LR
A-. text .->B;
Stora jungtis
Kopijuoti
Įterpti
flowchart LR
A ==> B
Stora jungtis su tekstu
Kopijuoti
Įterpti
flowchart LR
A == |text| ==> B
Nematoma jungtis
Kopijuoti
Įterpti
flowchart LR
A ~~~ B
Grandininė jungčių sujungtis
Kopijuoti
Įterpti
flowchart LR
A -- text --> B -- text2 --> C
Taip pat galima vienoje eilutėje nurodyti kelias mazgų jungtis, kaip parodyta žemiau:
Kopijuoti
Įterpti
flowchart LR
a --> b & c--> d
Taip pat galite aprašyti priklausomybes, kaip parodyta žemiau esančiame kode:
Kopijuoti
Įterpti
flowchart LR
a --> b & c--> d & e--> f
Jei tą pačią diagramą aprašytumėte naudodami bazinę sintaksę, prireiktų 8 eilučių. Reikia priminti, kad per didelis šio metodo naudojimas gali apsunkinti Markdown formato srautų diagramos skaitymą.
Kopijuoti
Įterpti
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Jungiamosios linijos ID pridėjimas
Mermaid dabar palaiko jungiamosios linijos ID pridėjimą, panašiai kaip ID ir metaduomenų priskyrimą mazgams. Ši funkcija sudaro pagrindą pažangesniam jungiamųjų linijų stiliui, klasėms ir animacijai.
Sintaksė:Norėdami pridėti jungiamosios linijos ID, prieš jungiamosios linijos sintaksę įrašykite ID, o iš karto po jo – simbolį @. Pavyzdžiui:
Kopijuoti
Įterpti
flowchart LR
A e1@--> B
Šiame pavyzdyje e1 yra jungiamosios linijos, jungiančios A ir B, ID. Šį ID galite naudoti vėlesniuose apibrėžimuose ar stiliaus sakiniuose, kaip ir mazgo atveju.
Įjungti animaciją
Pridėję jungiamosios linijos ID, galite įjungti jungiamosios linijos animaciją apibrėždami jos savybes:
Kopijuoti
Įterpti
flowchart LR
A e1@==> B
e1@{ animate: true }
Tai praneša Mermaid, kad jungiamoji linija e1 yra animuota.
Animacijos tipo pasirinkimas
Pradinėje versijoje palaikomi du animacijos greičiai: fast ir slow. Konkretaus animacijos tipo pasirinkimas yra paprastas būdas įjungti animaciją ir vienu metu nustatyti jos greitį.
Kopijuoti
Įterpti
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animacija naudojant classDef sakinį
Taip pat galite animuoti jungiamąją liniją priskirdami jai klasę, o tada classDef sakinyje apibrėždami animacijos savybes. Pavyzdžiui:
Kopijuoti
Įterpti
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
Šiame kode:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate apibrėžia klasę, pavadintą animate, su stiliaus ir animacijos savybėmis.
- class e1 animate priskiria animate klasę jungiamajai linijai e1.
Pastaba dėl kablelio escape: nustatydami stroke-dasharray savybę, nepamirškite kablelio escape'inti, nes Mermaid stiliaus apibrėžimuose kablelis naudojamas kaip skyriklis.
Naujas rodyklės tipas
Palaikomas naujas rodyklės tipas
- Jungiamoji linija su pilnu apskritimu
- Jungiamoji linija su kryžiaus žyme
Jungiamoji linija su pilnu apskritimu
Kopijuoti
Įterpti
flowchart LR
A --o B
Jungiamoji linija su kryžiaus žyme
Kopijuoti
Įterpti
flowchart LR
A --x B
Daugiakryptė rodyklė
Galima naudoti daugiakryptes rodykles, pavyzdžiui:
Kopijuoti
Įterpti
flowchart LR
A o--o B
B <--> C
C x--x D
Jungiamosios linijos ilgis
Kiekvienam srautų diagramos mazgui pagal jam prijungtus mazgus atvaizduojamoje diagramoje priskiriamas lygis, t. y. vertikalus arba horizontalus lygmuo (priklausomai nuo srautų diagramos krypties). Pagal numatytuosius nustatymus jungtis gali apimti bet kokį lygių skaičių, tačiau pridėję papildomų brūkšnelių prie jungties apibrėžimo galite reikalauti, kad tam tikra jungtis būtų ilgesnė už kitas.
Šiame pavyzdyje prie jungties nuo mazgo B iki mazgo E papildomai pridėti du brūkšneliai, todėl ji apima dviem lygiais daugiau nei įprasta jungtis:
Kopijuoti
Įterpti
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Kai jungties žymeklis rašomas jungties viduryje, dešinėje jungties pusėje būtina pridėti papildomų brūkšnelių. Šis pavyzdys atitinka ankstesnį pavyzdį:
Kopijuoti
Įterpti
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Brūkšninėms arba storoms jungtims pridėtinas simbolis yra lygybės ženklas arba taškas, kaip parodyta žemiau esančioje lentelėje:
| Ilgis | 1 | 2 | 3 |
|---|---|---|---|
| Įprasta jungtis | --- | ---- | ----- |
| Įprasta jungtis su rodykle | --> | ---> | ----> |
| Stora jungtis | === | ==== | ===== |
| Stora jungtis su rodykle | ==> | ===> | ====> |
| Taškinė linija | -.- | -..- | -...- |
| Taškinė linija su rodykle | -.- | -..-> | -...-> |
Specialieji simboliai
Tekstą galima dėti į kabutes, kad būtų atvaizduoti sudėtingesni simboliai. Kaip parodyta žemiau esančiame pavyzdyje:
Kopijuoti
Įterpti
flowchart LR
id1["This is the (text) in the box"]
Simbolių escape'inimui skirtas entity kodavimas
Simbolius galima escape'inti naudojant pavyzdyje parodytą sintaksę.
Kopijuoti
Įterpti
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Pateikti skaičiai yra dešimtainiai, todėl # gali būti koduojamas kaip #35. Taip pat palaikomi HTML simbolių pavadinimai.
Pografis
Kopijuoti
Įterpti
subgraph title
graph definition
end
Toliau pateikiamas pavyzdys:
Kopijuoti
Įterpti
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Taip pat galite nustatyti pografo id.
Kopijuoti
Įterpti
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Srauto diagrama
Naudodami srautų diagramos tipo grafiką, taip pat galite nustatyti jungiamąsias linijas į pografį ir iš jo, kaip parodyta žemiau esančioje srautų diagramoje.
Kopijuoti
Įterpti
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
Pografo kryptis
Naudodami srautų diagramos tipą, galite naudoti krypties sakinį pografo atvaizdavimo krypčiai nustatyti, kaip parodyta žemiau:
Kopijuoti
Įterpti
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
Apribojimai
Jei bet kuris pografo mazgas sujungtas su išore, pografo kryptis ignoruojama. Kitu atveju pografis paveldi tėvinės diagramos kryptį:
Kopijuoti
Įterpti
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
Markdown eilutė
Markdown eilutė, suteikdama lankstesnį eilutės tipą, papildo srautų diagramas ir minčių žemėlapius, palaiko teksto formatavimo parinktis, tokias kaip pusjuodis ir kursyvas, ir leidžia automatiškai kelti tekstą į naują eilutę žymeklio viduje.
Kopijuoti
Įterpti
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
- Norėdami paryškinti tekstą, prieš ir po jo naudokite dvi žvaigždutes (**).
- Kursyvui naudokite vieną žvaigždutę (*) prieš ir po teksto.
- Tradicinėse eilutėse, norint, kad tekstas mazge būtų keliamas į naują eilutę, reikia pridėti žymą <br>. Tačiau Markdown eilutė, kai tekstas per ilgas, automatiškai keliama į naują eilutę, ir naujai eilutei pradėti pakanka naudoti eilutės lūžio simbolį, o ne žymą <br>.
Ši funkcija taikoma mazgų žymekliams, jungiamųjų linijų žymekliams ir pografo žymekliams
Automatinį teksto kėlimą į naują eilutę galima išjungti naudojant specialią sintaksę
Kopijuoti
Įterpti
---
config:
markdownAutoWrap: false
---
graph LR
Komentaras
Srautų diagramoje galima įrašyti komentarus; redaktorius juos ignoruos. Komentaras turi užimti atskirą eilutę ir prasidėti dvigubu procento ženklu (%%). Bet koks tekstas nuo komentaro pradžios iki kitos eilutės laikomas komentaru, įskaitant bet kokią diagramos sintaksę.
Kopijuoti
Įterpti
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Stilius ir klasė
Jungties stilius
Galima nustatyti jungties stilių. Pavyzdžiui, galbūt norite sukurti jungtį, kuri sraute juda atgal; kadangi jungtys, skirtingai nei mazgai, neturi ID, jungties stilių reikia nustatyti kitu būdu. Naudokite eilės numerį, nurodytą apibrėžiant jungtį, arba numatytąją reikšmę, kuri taikoma visoms jungtims.
Kopijuoti
Įterpti
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Taip pat galima pridėti stilių kelioms jungtims viename sakinyje atskiriant jungčių numerius kableliais:
Kopijuoti
Įterpti
linkStyle 1,2,7 color:blue;
Jungiamosios linijos kreivės stiliaus nustatymas
Jei numatytasis metodas netenkina jūsų poreikių, galite nustatyti jungiamųjų linijų tarp elementų kreivės stilių. Galimi kreivės stiliai: basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter ir stepBefore.
Toliau pateiktame pavyzdyje iš kairės į dešinę orientuotoje diagramoje naudojamas stepBefore kreivės stilius.
Kopijuoti
Įterpti
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Mazgo stiliaus nustatymas
Mazgui galima nustatyti konkretų stilių, pavyzdžiui, storesnį rėmelį arba kitokią fono spalvą.
Kopijuoti
Įterpti
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
Klasė
Patogiau nei kiekvieną kartą apibrėžti stilių yra apibrėžti stiliaus klasę ir priskirti ją mazgams, kuriems reikia kitokios išvaizdos.
Klasės apibrėžimas atrodo taip:
Kopijuoti
Įterpti
classDef className fill:pink,stroke:#333,stroke-width:4px;
Be to, viename sakinyje galima apibrėžti stilių kelioms klasėms:
Kopijuoti
Įterpti
classDef firstClassName,secondClassName font-size:12pt;
Klasės priskyrimas mazgui atliekamas taip:
Kopijuoti
Įterpti
class nodeId1 className;
Taip pat galima viename sakinyje priskirti vieną klasę mazgų sąrašui:
Kopijuoti
Įterpti
class nodeId1,nodeId2 className;
Norėdami pridėti klasę, galite naudoti ::: operatorių, kuris priskiria klasės pavadinimą mazgui, kaip parodyta žemiau:
Kopijuoti
Įterpti
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Deklaruojant kelias jungtis tarp mazgų, galima naudoti šią formą:
Kopijuoti
Įterpti
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Diagramos deklaracijoje sakiniai dabar gali ir nesibaigti kabliataškiu. Nuo 0.2.16 versijos diagramos sakinio pabaiga su kabliataškiu yra tik neprivaloma. Todėl toliau pateikta diagramos deklaracija, kaip ir senoji, taip pat galioja.
- Tarp viršūnės ir jungties leidžiamas vienas tarpas. Tačiau tarp viršūnės ir jos teksto bei tarp jungties ir jos teksto neturi būti jokių tarpų. Senoji diagramos deklaracija taip pat galioja, todėl ši nauja funkcija yra neprivaloma ir skirta skaitomumui pagerinti.
Toliau pateikiama nauja jungiamosios linijos deklaracija, kuri, kaip ir senoji, taip pat galioja.
Kopijuoti
Įterpti
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
