Perusmääritelmä
Vuokaavio koostuu solmuista (geometriset muodot) ja yhdistävistä viivoista (nuolet tai viivat). Mermaid-koodi määrittelee, miten solmut ja yhdistävät viivat rakennetaan, ja tukee useita nuolityyppejä, monisuuntaisia nuolia sekä mielivaltaisia linkkejä aligraafeihin.
Varoitus Jos käytät sanaa "end" vuokaavion solmussa, kirjoita ensimmäinen kirjain tai koko sana isolla (esimerkiksi: "End" tai "END"); pelkän pienen "end"-sanan syöttäminen aiheuttaa virheen vuokaaviossa.
Varoitus Jos yhdistät vuokaavion solmuja ja käytät kirjainta "o" tai "x" ensimmäisenä kirjaimena, lisää välilyönti kirjaimen eteen tai kirjoita kirjain isolla (esimerkiksi: "dev--- ops", "dev---Ops").
Yksi solmu (oletus)
Kopioi
Upotus
---
title: Node
---
flowchart LR
id
id on se, mitä laatikossa näytetään.
Vuokaavion luontisyntaksissa voit käyttää flowchart-komennon lisäksi myös graph-komentoa.
Solmu, jossa on teksti
Voit myös asettaa laatikolle id:stä poikkeavan tekstin. Jos teet tämän useita kertoja, järjestelmä käyttää solmun viimeksi määritettyä tekstiä. Lisäksi jos solmulle määritetään myöhemmin yhdistävä viiva, tekstin määrittely voidaan jättää pois; laatikkoa renderöitäessä käytetään aiemmin määritettyä tekstiä.
Kopioi
Upotus
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode-teksti
Kääri Unicode-teksti lainausmerkkeihin.
Kopioi
Upotus
flowchart LR
id["This ❤ Unicode"]
Markdown-muoto
Kääri Markdown-teksti lainausmerkkeihin ja takakenoviivoihin
Kopioi
Upotus
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Suunta
Määrittelee vuokaavion suunnan
Osoittaa, että vuokaavio on järjestetty ylhäältä alas (TD tai TB)
Kopioi
Upotus
flowchart TD
Start --> Stop
Vuokaavion suunnat ovat:
- TB - ylhäältä alas
- TD - ylhäältä alas (sama kuin ylhäältä alas)
- BT - alhaalta ylös
- RL - oikealta vasemmalle
- LR - vasemmalta oikealle
Solmun muoto
Pyöristetty suorakaide
Kopioi
Upotus
flowchart LR
id1(This is the text in the box)
Stadion-muoto
Kopioi
Upotus
flowchart LR
id1([This is the text in the box])
Aliprosessi
Kopioi
Upotus
flowchart LR
id1[[This is the text in the box]]
Tietokanta
Kopioi
Upotus
flowchart LR
id1[(Database)]
Ympyrä
Kopioi
Upotus
flowchart LR
id1((This is the text in the circle))
Epäsymmetrinen muoto
Kopioi
Upotus
flowchart LR
id1>This is the text in the box]
Vinoneliö
Kopioi
Upotus
flowchart LR
id1{This is the text in the box}
Kuusikulmio
Kopioi
Upotus
flowchart LR
id1{{This is the text in the box}}
Suunnikas
Kopioi
Upotus
flowchart TD
id1[/This is the text in the box/]
Käänteinen suunnikas
Kopioi
Upotus
flowchart TD
id1[\This is the text in the box\]
Puolisuunnikas
Kopioi
Upotus
flowchart TD
A[/ProcessOn\]
Käänteinen puolisuunnikas
Kopioi
Upotus
flowchart TD
B[\ProcessOn/]
Kaksoisympyrä
Kopioi
Upotus
flowchart TD
id1(((This is the text in the circle)))
Mermaid-vuokaavion solmumuotojen laajennus
Mermaid esitteli 30 uutta muotoa parantaakseen vuokaavioiden luonnin joustavuutta ja tarkkuutta. Nämä uudet muodot tarjoavat enemmän vaihtoehtoja prosessien, päätösten, tapahtumien, tietovarastojen ja muiden vuokaavion elementtien visuaaliseen esittämiseen, mikä parantaa selkeyttä ja semanttista merkitystä.
Muotojen määrittelyn uusi syntaksi
Mermaid tukee nyt yleistä syntaksia muototyyppien määrittämiseen kasvavan muotomäärän mukaisesti. Tämän syntaksin avulla voit määrittää solmulle tietyn muodon selkeässä ja joustavassa muodossa.
Kopioi
Upotus
A@{ shape: rect }
Tämä syntaksi luo solmun A suorakaiteeksi. Se renderöidään samalla tavalla kuin [A] tai A.
Täydellinen luettelo solmumuodoista
Seuraavassa on täydellinen luettelo uusista solmumuodoista sekä niiden vastaavista merkityksistä, lyhenteistä ja aliaksista:
| Semanttinen nimi | Graafisyntaksi | Syntaksin lyhenne | Syntaksin vaihtoehto | Yksityiskohtainen kuvaus |
|---|---|---|---|---|
| Kortti | Notched Rectangle | notch-rect | card, notched-rectangle | Esittää korttia |
| Lajittelu | Hourglass | hourglass | collate | Esittää lajittelutoimintoa |
| Tietoliikennelinja | Lightning Bolt | bolt | com-link, lightning-bolt | Tietoliikennelinja |
| Kommentti | Curly Brace | brace | brace-l, comment | Lisää kommentti |
| Oikeanpuoleinen kommentti | Curly Brace | brace-r | Lisää kommentti | |
| Kommentti, jossa on aaltosulut molemmilla puolilla | Curly Braces | braces | Lisää kommentti | |
| Tietojen syöttö tai tulostus | Lean Right | lean-r | in-out, lean-right | Esittää syöttöä tai tulostusta |
| Tietojen syöttö tai tulostus | Lean Left | lean-l | lean-left, out-in | Esittää tulostusta tai syöttöä |
| Tietokanta | Cylinder | cyl | cylinder, database, db | Tietokantavarasto |
| Päätös | Diamond | diam | decision, diamond, question | Päätösvaihe |
| Viive | Half-Rounded Rectangle | delay | half-rounded-rectangle | Esittää viivettä |
| Suorasaantimuisti | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Suorasaantimuisti |
| Levyvarasto | Lined Cylinder | lin-cyl | disk, lined-cylinder | Levyvarasto |
| Näyttö | Curved Trapezoid | curv-trap | curved-trapezoid, display | Esittää tiedon näyttämistä näytöllä, päätteellä ja muilla laitteilla |
| Jaettu käsittely | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Jaetun käsittelyn muoto |
| Asiakirja | Document | doc | document | Esittää asiakirjaa |
| Tapahtuma | Rounded Rectangle | rounded | event | Esittää tapahtumaa |
| Poiminta | Triangle | tri | extract, triangle | Poimintaprosessi |
| Haarautuminen/Yhdistäminen | Filled Rectangle | fork | join | Vuokaavion haarautuminen tai yhdistäminen |
| Sisäinen tallennus | Window Pane | win-pane | internal-storage, window-pane | Sisäinen tallennus |
| Yhteyspiste | Filled Circle | f-circ | filled-circle, junction | Yhteyspiste |
| Asiakirja viivalla | Lined Document | lin-doc | lined-document | Asiakirja viivalla |
| Viiva/Varjostettu prosessi | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Prosessimuoto viivalla |
| Silmukkarajoitus | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Silmukkarajoituksen vaihe |
| Manuaalinen tiedosto | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Manuaalinen tiedostotoiminto |
| Manuaalinen syöttö | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Manuaalisen syötön vaihe |
| Manuaalinen toiminto | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Esittää manuaalista tehtävää |
| Useita asiakirjoja | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Useita prosesseja | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Epäsäännöllinen muoto | Odd | odd | Epäsäännöllinen muoto | |
| Paperinauha | Flag | flag | paper-tape | Paperinauha |
| Valmisteluehto | Hexagon | hex | hexagon, prepare | Valmistelu- tai ehtovaihe |
| Priorisoitu toiminto | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Priorisoitu toiminto |
| Käsittely | Rectangle | rect | proc, process, rectangle | Vakiokäsittelyn muoto |
| Aloitus | Circle | circle | circ | Aloituspiste |
| Aloitus | Small Circle | sm-circ | small-circle, start | Pieni pyöreä aloituspiste |
| Lopetus | Double Circle | dbl-circ | double-circle | Esittää lopetuspistettä |
| Lopetus | Framed Circle | fr-circ | framed-circle, stop | Esittää lopetuspistettä |
| Tallenna tiedot | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Tallenna tiedot |
| Aliprosessi | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Aliprosessi, aliohjelma |
| Yhteenveto | Crossed Circle | cross-circ | crossed-circle, summary | Yhteenveto |
| Merkitty asiakirja | Tagged Document | tag-doc | tagged-document | Merkitty asiakirja |
| Standardisoitu prosessi | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Loppupiste | Stadium | stadium | pill, terminal | Loppupiste |
| Tekstilohko | Text Block | text | Tekstilohko |
Seuraavassa on esimerkki vuokaaviokoodista, joka käyttää uusia muotoja:
Kopioi
Upotus
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"}
Prosessi
Kopioi
Upotus
flowchart TD
A@{ shape: rect, label: "This is a process" }
Tapahtuma
Kopioi
Upotus
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Aliprosessi
Kopioi
Upotus
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Tietokanta (sylinteri)
Kopioi
Upotus
flowchart TD
A@{ shape: cyl, label: "Database" }
Aloitus (ympyrä)
Kopioi
Upotus
flowchart TD
A@{ shape: circle, label: "Start" }
Epäsäännöllinen muoto
Kopioi
Upotus
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Päätös (vinoneliö)
Kopioi
Upotus
flowchart TD
A@{ shape: diamond, label: "Decision" }
Valmisteluehto (kuusikulmio)
Kopioi
Upotus
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Tietojen syöttö/tulostus (oikealle kallistettu)
Kopioi
Upotus
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Tietojen syöttö/tulostus (vasemmalle kallistettu)
Kopioi
Upotus
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Priorisoitu toiminto (puolisuunnikas)
Kopioi
Upotus
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Manuaalinen toiminto (käänteinen puolisuunnikas)
Kopioi
Upotus
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Lopetus (kaksoisympyrä)
Kopioi
Upotus
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Tekstilohko
Kopioi
Upotus
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kortti (lovettu suorakaide)
Kopioi
Upotus
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Prosessi viivalla/varjostuksella
Kopioi
Upotus
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Aloitus (pieni ympyrä)
Kopioi
Upotus
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Lopetus (ympyrä laatikolla)
Kopioi
Upotus
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Haarautuminen/yhdistäminen (pitkä suorakaide)
Kopioi
Upotus
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Lajittelu (tiimalasi)
Kopioi
Upotus
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Kommentti (aaltosulut)
Kopioi
Upotus
flowchart TD
A@{ shape: comment, label: "Comment" }
Kommentti oikealla (oikeanpuoleiset aaltosulut)
Kopioi
Upotus
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Kommentti (sulkeet molemmilla puolilla)
Kopioi
Upotus
flowchart TD
A@{ shape: braces, label: "Comment" }
Tietoliikennelinja (salama)
Kopioi
Upotus
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Asiakirja
Kopioi
Upotus
flowchart TD
A@{ shape: doc, label: "Document" }
Viive (puoliksi pyöristetty suorakaide)
Kopioi
Upotus
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopioi
Upotus
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Levyvarasto (uritettu sylinteri)
Kopioi
Upotus
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Näyttö (näyttömuoto)
Kopioi
Upotus
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Jaettu käsittely (jaettu suorakaide)
Kopioi
Upotus
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Poiminta (pieni kolmio)
Kopioi
Upotus
flowchart TD
A@{ shape: tri, label: "Extract" }
Sisäinen tallennus (ikkunapaneeli)
Kopioi
Upotus
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Yhteyspiste (täytetty ympyrä)
Kopioi
Upotus
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Asiakirja viivalla
Kopioi
Upotus
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Silmukkarajoitus (lovettu viisikulmio)
Kopioi
Upotus
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Manuaalinen tiedosto (käännetty kolmio)
Kopioi
Upotus
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Manuaalinen syöttö (suorakulmainen puolisuunnikas)
Kopioi
Upotus
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Useita asiakirjoja (pinotut asiakirjat)
Kopioi
Upotus
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Useita prosesseja (pinotut suorakaiteet)
Kopioi
Upotus
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Paperinauha (lippu)
Kopioi
Upotus
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Tallenna tiedot (rusettisuorakaide)
Kopioi
Upotus
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Yhteenveto (ympyrä ristillä)
Kopioi
Upotus
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Merkitty asiakirja
Kopioi
Upotus
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Merkitty prosessi
Kopioi
Upotus
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Erityiset muodot Mermaid-vuokaaviossa
Mermaid esitteli myös kuvat vuokaavioiden tehostamiseksi, jolloin voit sisällyttää kuvia suoraan vuokaavioon tarjoten enemmän visuaalista taustaa ja selkeyttä.
Kuvan muoto
Voit lisätä kuvan vuokaavioon komennolla image; kuvan määrittelyn syntaksi on seuraava:
Kopioi
Upotus
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parametri
- img: näytettävän kuvan URL-osoite.
- label: kuvaan liitetty tekstimerkintä, joka voi olla mikä tahansa merkkijono. Jos sitä ei ole määritetty, mitään merkintää ei näytetä.
- pos: merkinnän sijainti. Jos sitä ei ole määritetty, merkintä sijaitsee oletuksena kuvan alaosassa.
- w: kuvan leveys. Jos sitä ei ole määritetty, oletuksena on kuvan luonnollinen leveys.
- h: kuvan korkeus. Jos sitä ei ole määritetty, oletuksena on kuvan luonnollinen korkeus.
- constraint: määrittää, rajoittaako kuva solmun kokoa. Tämä asetus varmistaa myös, että kuva säilyttää alkuperäisen kuvasuhteensa ja säätää korkeutta leveyden mukaan. Jos sitä ei ole määritetty, oletuksena on off.
Kuvat tarjoavat vuokaavioillesi lisää joustavuutta ja visuaalista vetovoimaa, mikä tekee niistä informatiivisempia ja kiinnostavampia.
Solmujen väliset yhteydet
Solmut voidaan yhdistää yhdistävillä viivoilla ja nuolilla. Linkkejä on eri tyyppejä, ja linkkeihin voidaan liittää myös tekstimerkkijonoja.
Linkki nuolella
Kopioi
Upotus
flowchart LR
A-->B
Avoin linkki
Kopioi
Upotus
flowchart LR
A --- B
Linkki, jossa on teksti
Kopioi
Upotus
flowchart LR
A-- This is the text! ---B
tai
Kopioi
Upotus
flowchart LR
A --- | This is the text| B
Linkki, jossa on nuoli ja teksti
Kopioi
Upotus
flowchart LR
A-->|text|B
tai
Kopioi
Upotus
flowchart LR
A-- text -->B
Katkoviivalinkki
Kopioi
Upotus
flowchart LR
A-.->B;
Katkoviivalinkki, jossa on teksti
Kopioi
Upotus
flowchart LR
A-. text .->B;
Paksu linkki
Kopioi
Upotus
flowchart LR
A ==> B
Paksu linkki, jossa on teksti
Kopioi
Upotus
flowchart LR
A == |text| ==> B
Näkymätön linkki
Kopioi
Upotus
flowchart LR
A ~~~ B
Linkkien ketjuyhteys
Kopioi
Upotus
flowchart LR
A -- text --> B -- text2 --> C
Voit myös määritellä useita solmulinkkejä samalla rivillä seuraavasti:
Kopioi
Upotus
flowchart LR
a --> b & c--> d
Voit myös kuvata riippuvuuksia, kuten alla olevassa koodissa:
Kopioi
Upotus
flowchart LR
a --> b & c--> d & e--> f
Jos sama graafi kuvataan perussyntaksilla, tarvitaan 8 riviä. On syytä muistuttaa, että tämän menetelmän liiallinen käyttö voi tehdä Markdown-muotoisesta vuokaaviosta vaikeammin luettavan.
Kopioi
Upotus
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Lisää tunniste yhdistävälle viivalle
Mermaid tukee nyt tunnisteen lisäämistä yhdistävälle viivalle samalla tavalla kuin tunnisteen ja metatietojen liittämistä solmuihin. Tämä ominaisuus luo perustan edistyneemmille tyylittelyille, luokille ja animaatioille yhdistävillä viivoilla.
Syntaksi:Jos haluat lisätä tunnisteen yhdistävälle viivalle, kirjoita tunniste yhdistävän viivan syntaksin eteen ja sen perään välittömästi @-merkki. Esimerkiksi:
Kopioi
Upotus
flowchart LR
A e1@--> B
Tässä esimerkissä e1 on solmut A ja B yhdistävän viivan tunniste. Voit käyttää tätä tunnistetta myöhemmissä määrittely- tai tyylilauseissa samalla tavalla kuin solmua.
Ota animaatio käyttöön
Kun olet lisännyt tunnisteen yhdistävälle viivalle, voit ottaa yhdistävän viivan animaation käyttöön määrittämällä sen ominaisuudet:
Kopioi
Upotus
flowchart LR
A e1@==> B
e1@{ animate: true }
Tämä kertoo Mermaidille, että yhdistävä viiva e1 on animoitu.
Valitse animaatiotyyppi
Alkuversiossa tuetaan kahta animaationopeutta: fast ja slow. Tietyn animaatiotyypin valitseminen on helppo tapa ottaa animaatio käyttöön ja asettaa animaation nopeus kerralla.
Kopioi
Upotus
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animoi classDef-lauseella
Voit myös animoida yhdistävää viivaa liittämällä sille luokan ja määrittämällä sitten animaatio-ominaisuudet classDef-lauseessa. Esimerkiksi:
Kopioi
Upotus
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
Tässä koodissa:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate määrittelee luokan nimeltä animate, jolla on tyyli- ja animaatio-ominaisuudet.
- class e1 animate soveltaa animate-luokkaa yhdistävälle viivalle e1.
Huomautus pilkun escape-merkinnästä: kun asetat stroke-dasharray-ominaisuutta, muista escape-merkitä pilkku muotoon ,, koska pilkku toimii erottimena Mermaidin tyylimäärittelyissä.
Uusi nuolityyppi
Tukee uusia nuolityyppejä
- Yhdistävä viiva täytetyllä ympyrällä
- Yhdistävä viiva ristimerkillä
Yhdistävä viiva täytetyllä ympyrällä
Kopioi
Upotus
flowchart LR
A --o B
Yhdistävä viiva ristimerkillä
Kopioi
Upotus
flowchart LR
A --x B
Monisuuntainen nuoli
Voit käyttää monisuuntaisia nuolia, esimerkiksi:
Kopioi
Upotus
flowchart LR
A o--o B
B <--> C
C x--x D
Yhdistävän viivan pituus
Vuokaavion jokaiselle solmulle annetaan renderöitävässä kaaviossa taso sen yhdistämien solmujen perusteella, eli pysty- tai vaakataso (vuokaavion suunnasta riippuen). Oletuksena linkit voivat ylittää minkä tahansa määrän tasoja, mutta voit vaatia tietyn yhteyden olevan muita pidempi lisäämällä yhteysmäärittelyyn ylimääräisiä viivoja.
Tässä esimerkissä solmusta B solmuun E johtavaan yhteyteen on lisätty kaksi ylimääräistä viivaa, jolloin se ylittää kaksi tasoa enemmän kuin tavallinen linkki:
Kopioi
Upotus
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Kun yhteysmerkintä kirjoitetaan yhteyden keskelle, yhteyden oikealle puolelle on lisättävä ylimääräisiä viivoja. Tämä esimerkki vastaa edellistä esimerkkiä:
Kopioi
Upotus
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Pisteellisille viivoille tai paksuille linkeille lisättävä merkki on yhtäsuuruusmerkki tai piste, kuten alla olevassa taulukossa näkyy:
| Pituus | 1 | 2 | 3 |
|---|---|---|---|
| Tavallinen yhteys | --- | ---- | ----- |
| Tavallinen yhteys nuolella | --> | ---> | ----> |
| Paksu yhteys | === | ==== | ===== |
| Paksu yhteys nuolella | ==> | ===> | ====> |
| Pisteellinen viiva | -.- | -..- | -...- |
| Pisteellinen viiva nuolella | -.- | -..-> | -...-> |
Erikoismerkit
Voit sijoittaa tekstin lainausmerkkien sisään renderöidäksesi hankalampia merkkejä. Kuten alla olevassa esimerkissä:
Kopioi
Upotus
flowchart LR
id1["This is the (text) in the box"]
Merkkien escape-koodaus
Merkit voidaan escape-merkitä esimerkin syntaksilla.
Kopioi
Upotus
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Annetut numerot ovat desimaalilukuja, joten # voidaan koodata muotoon #35. Myös HTML-merkkien nimiä tuetaan.
Aligraafi
Kopioi
Upotus
subgraph title
graph definition
end
Seuraavassa on esimerkki:
Kopioi
Upotus
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Voit myös asettaa aligraafille tunnisteen.
Kopioi
Upotus
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Vuokaavio
Vuokaaviotyyppisissä kaavioissa voit myös asettaa aligraafiin johtavia ja siitä lähteviä yhdistäviä viivoja, kuten alla olevassa vuokaaviossa.
Kopioi
Upotus
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
Aligraafin suunta
Vuokaaviotyyppiä käytettäessä voit asettaa aligraafin renderöintisuunnan suuntalauseella seuraavasti:
Kopioi
Upotus
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
Rajoitukset
Jos jokin aligraafin solmu on yhdistetty ulkopuolelle, aligraafin suunta jätetään huomiotta. Muussa tapauksessa aligraafi perii ylägraafin suunnan:
Kopioi
Upotus
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-merkkijono
Markdown-merkkijonot parantavat vuokaavioita ja miellekarttoja tarjoamalla joustavamman merkkijonotyypin, joka tukee tekstin muotoiluvaihtoehtoja kuten lihavointia ja kursiivia sekä tekstin automaattista rivinvaihtoa merkinnöissä.
Kopioi
Upotus
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
- Lihavoi teksti käyttämällä kahta tähteä (**) tekstin edessä ja jälkeen.
- Kursiivi saadaan sijoittamalla yksittäinen tähti (*) tekstin eteen ja jälkeen.
- Perinteisille merkkijonoille sinun on lisättävä <br>-tunniste, jotta teksti rivittyy solmussa. Markdown-merkkijonot kuitenkin rivittyvät automaattisesti, kun teksti on liian pitkä, ja uuden rivin voi aloittaa pelkällä rivinvaihtomerkillä <br>-tunnisteen sijaan.
Tämä ominaisuus toimii solmumerkinnöissä, yhdistävien viivojen merkinnöissä ja aligraafien merkinnöissä
Automaattinen rivinvaihto voidaan poistaa käytöstä tietyllä syntaksilla
Kopioi
Upotus
---
config:
markdownAutoWrap: false
---
graph LR
Kommentti
Vuokaavioon voi syöttää kommentteja, jotka editori jättää huomiotta. Kommentin on oltava omalla rivillään ja alettava kaksoisprosenttimerkillä (%%). Kaikki teksti kommentin alusta seuraavaan riviin asti tulkitaan kommentiksi, mukaan lukien mahdollinen vuokaaviosyntaksi.
Kopioi
Upotus
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Tyyli ja luokka
Linkin tyyli
Linkkien tyylin voi asettaa. Saatat esimerkiksi haluta tyylitellä linkin, joka kulkee prosessissa taaksepäin; koska linkeillä ei ole tunnistetta kuten solmuilla, linkin tyyli on päätettävä muulla tavalla. Käytä linkin määrittelyn yhteydessä järjestysnumeroa tai käytä oletusarvoa, joka kohdistetaan kaikkiin linkkeihin.
Kopioi
Upotus
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Voit myös lisätä tyylin usealle linkille erottamalla linkkien numerot pilkulla yhdessä lauseessa:
Kopioi
Upotus
linkStyle 1,2,7 color:blue;
Aseta yhdistävän viivan käyrätyyli
Jos oletusmenetelmä ei vastaa tarpeitasi, voit asettaa kohteiden välisille yhdistäville viivoille käyrätyylin. Käytettävissä olevat käyrätyylit ovat basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter ja stepBefore.
Alla olevassa esimerkissä vasemmalta oikealle suunnatussa kaaviossa käytetään stepBefore-käyrätyyliä.
Kopioi
Upotus
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Aseta solmun tyyli
Solmulle voidaan asettaa tietty tyyli, kuten paksumpi reunus tai erilainen taustaväri.
Kopioi
Upotus
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
Luokka
Kätevämpää kuin tyylin määrittäminen joka kerta on määrittää tyyliluokka ja liittää se solmuihin, jotka tarvitsevat erilaisen ulkoasun.
Luokan määrittely näkyy alla:
Kopioi
Upotus
classDef className fill:pink,stroke:#333,stroke-width:4px;
Lisäksi voit määrittää tyylin usealle luokalle yhdessä lauseessa:
Kopioi
Upotus
classDef firstClassName,secondClassName font-size:12pt;
Luokan liittäminen solmuun tapahtuu seuraavasti:
Kopioi
Upotus
class nodeId1 className;
Voit myös liittää luokan solmuluetteloon yhdessä lauseessa:
Kopioi
Upotus
class nodeId1,nodeId2 className;
Luokan voi lisätä liittämällä luokan nimen solmuun :::-operaattorilla seuraavasti:
Kopioi
Upotus
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Tätä muotoa voidaan käyttää määriteltäessä useita linkkejä solmujen välillä:
Kopioi
Upotus
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Kaavion määrittelyssä lause ei voi nyt myöskään päättyä puolipisteeseen. Version 0.2.16 jälkeen puolipiste lauseen lopussa on vain valinnainen. Siksi alla oleva kaavion määrittely on yhtä kelvollinen kuin vanha kaavion määrittely.
- Solmujen ja linkkien välissä sallitaan yksi välilyönti. Solmun ja sen tekstin sekä linkin ja sen tekstin välissä ei kuitenkaan saa olla välilyöntiä. Vanha kaavion määrittely on edelleen kelvollinen, joten tämä uusi ominaisuus on valinnainen ja pyrkii parantamaan luettavuutta.
Alla on yhdistävän viivan uusi määrittely, joka on yhtä kelvollinen kuin vanha yhdistävän viivan määrittely.
Kopioi
Upotus
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
