Grunnleggende definisjon
Et flytskjema består av noder (geometriske former) og forbindelseslinjer (piler eller linjer). Mermaid-koden definerer hvordan noder og forbindelseslinjer bygges opp, og støtter flere piltyper, flerretningspiler og vilkårlige lenker til subgrafer.
Advarsel Hvis du bruker ordet "end" i en flytskjemanode, må du skrive første bokstav eller hele ordet med store bokstaver (for eksempel: "End" eller "END"). Hvis du skriver "end" med bare små bokstaver, oppstår det feil i flytskjemaet.
Advarsel Hvis du bruker bokstaven "o" eller "x" som første tegn når du kobler sammen flytskjemanoder, må du legge til et mellomrom før bokstaven eller bruke stor bokstav (for eksempel: "dev--- ops", "dev---Ops").
Én node (standard)
Kopier
Bygg inn
---
title: Node
---
flowchart LR
id
id er innholdet som vises i boksen.
Syntaks for å opprette flytskjema: i tillegg til flowchart kan du også bruke graph .
Én node med tekst
Du kan også angi en annen tekst for boksen enn id. Hvis du gjør dette flere ganger, brukes den sist angitte teksten for noden. I tillegg, hvis du senere definerer en forbindelseslinje for noden, kan tekstdefinisjonen utelates; når boksen rendres, brukes den tidligere definerte teksten.
Kopier
Bygg inn
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode-tekst
Bruk doble anførselstegn for å omslutte Unicode-tekst.
Kopier
Bygg inn
flowchart LR
id["This ❤ Unicode"]
Markdown-format
Bruk doble anførselstegn og backtick for å omslutte Markdown-tekst
Kopier
Bygg inn
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Retning
Angir retningen til flytskjemaet
Indikerer at flytskjemaet er ordnet fra topp til bunn (TD eller TB)
Kopier
Bygg inn
flowchart TD
Start --> Stop
Retningen til flytskjemaet omfatter:
- TB - fra topp til bunn
- TD - fra topp til bunn (samme som fra topp til bunn)
- BT - fra bunn til topp
- RL - fra høyre til venstre
- LR - fra venstre til høyre
Nodeform
Rektangel med avrundede hjørner
Kopier
Bygg inn
flowchart LR
id1(This is the text in the box)
Stadionform
Kopier
Bygg inn
flowchart LR
id1([This is the text in the box])
Subgraf
Kopier
Bygg inn
flowchart LR
id1[[This is the text in the box]]
Database
Kopier
Bygg inn
flowchart LR
id1[(Database)]
Sirkel
Kopier
Bygg inn
flowchart LR
id1((This is the text in the circle))
Asymmetrisk form
Kopier
Bygg inn
flowchart LR
id1>This is the text in the box]
Diamant
Kopier
Bygg inn
flowchart LR
id1{This is the text in the box}
Sekskant
Kopier
Bygg inn
flowchart LR
id1{{This is the text in the box}}
Parallellogram
Kopier
Bygg inn
flowchart TD
id1[/This is the text in the box/]
Omvendt parallellogram
Kopier
Bygg inn
flowchart TD
id1[\This is the text in the box\]
Trapes
Kopier
Bygg inn
flowchart TD
A[/ProcessOn\]
Omvendt trapes
Kopier
Bygg inn
flowchart TD
B[\ProcessOn/]
Dobbel sirkel
Kopier
Bygg inn
flowchart TD
id1(((This is the text in the circle)))
Utvidelse av nodeformer i Mermaid-flytskjema
Mermaid introduserer 30 nye former for å øke fleksibiliteten og presisjonen ved oppretting av flytskjemaer. Disse nye formene gir flere valgmuligheter for å visuelt representere prosesser, beslutninger, hendelser, datalagring og andre elementer i flytskjemaet, og forbedrer dermed klarheten og den semantiske betydningen.
Ny syntaks for formdefinisjon
Mermaid støtter nå en generell syntaks for å definere formtyper, for å håndtere det økende antallet former. Denne syntaksen lar deg angi en bestemt form for en node ved hjelp av et klart og fleksibelt format.
Kopier
Bygg inn
A@{ shape: rect }
Denne syntaksen oppretter node A som et rektangel. Den rendres på samme måte som [A] eller A .
Fullstendig liste over nodeformer
Følgende er en fullstendig liste over de nylig introduserte nodeformene med tilhørende betydning, kortnavn og aliaser:
| Semantisk navn | Graf-syntaks | Syntaksforkortelse | Syntaksalternativ | Detaljert beskrivelse |
|---|---|---|---|---|
| Kort | Notched Rectangle | notch-rect | card, notched-rectangle | Representerer et kort |
| Sortering | Hourglass | hourglass | collate | Representerer en sorteringsoperasjon |
| Kommunikasjonslenke | Lightning Bolt | bolt | com-link, lightning-bolt | Kommunikasjonslenke |
| Kommentar | Curly Brace | brace | brace-l, comment | Legg til en kommentar |
| Kommentar til høyre | Curly Brace | brace-r | Legg til en kommentar | |
| Kommentar med klammer på begge sider | Curly Braces | braces | Legg til en kommentar | |
| Datainngang eller -utgang | Lean Right | lean-r | in-out, lean-right | Representerer inngang eller utgang |
| Datainngang eller -utgang | Lean Left | lean-l | lean-left, out-in | Representerer utgang eller inngang |
| Database | Cylinder | cyl | cylinder, database, db | Databaselagring |
| Beslutning | Diamond | diam | decision, diamond, question | Beslutningstrinn |
| Forsinkelse | Half-Rounded Rectangle | delay | half-rounded-rectangle | Representerer en forsinkelse |
| Direkteaksesslagring | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Direkteaksesslagring |
| Disklagring | Lined Cylinder | lin-cyl | disk, lined-cylinder | Disklagring |
| Visning | Curved Trapezoid | curv-trap | curved-trapezoid, display | Representerer at informasjon vises på en skjerm, terminal eller lignende enhet |
| Delt prosess | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Form for delt prosess |
| Dokument | Document | doc | document | Representerer et dokument |
| Hendelse | Rounded Rectangle | rounded | event | Representerer en hendelse |
| Uttrekk | Triangle | tri | extract, triangle | Uttrekksprosess |
| Forgreining/Sammenslåing | Filled Rectangle | fork | join | Forgreining eller sammenslåing i et flytskjema |
| Intern lagring | Window Pane | win-pane | internal-storage, window-pane | Intern lagring |
| Koblingspunkt | Filled Circle | f-circ | filled-circle, junction | Koblingspunkt |
| Dokument med linje | Lined Document | lin-doc | lined-document | Dokument med linje |
| Linje-/skyggeprosess | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Prosessform med linje |
| Løkkegrense | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Trinn for løkkegrense |
| Manuell fil | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Manuell filoperasjon |
| Manuell inndata | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Manuelt inndatastrinn |
| Manuell operasjon | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Representerer en manuell oppgave |
| Flere dokumenter | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Flere prosesser | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Uregelmessig form | Odd | odd | Uregelmessig form | |
| Papirtape | Flag | flag | paper-tape | Papirtape |
| Forberedelsesbetingelse | Hexagon | hex | hexagon, prepare | Forberedelses- eller betingelsestrinn |
| Prioritert handling | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Prioritert handling |
| Prosess | Rectangle | rect | proc, process, rectangle | Standard prosessform |
| Start | Circle | circle | circ | Startpunkt |
| Start | Small Circle | sm-circ | small-circle, start | Start i liten sirkel |
| Stopp | Double Circle | dbl-circ | double-circle | Representerer et stoppunkt |
| Stopp | Framed Circle | fr-circ | framed-circle, stop | Representerer et stoppunkt |
| Lagre data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Lagre data |
| Subgraf | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subprosess, underprogram |
| Sammendrag | Crossed Circle | cross-circ | crossed-circle, summary | Sammendrag |
| Merket dokument | Tagged Document | tag-doc | tagged-document | Merket dokument |
| Standardisert prosess | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Endepunkt | Stadium | stadium | pill, terminal | Endepunkt |
| Tekstblokk | Text Block | text | Tekstblokk |
Følgende er et kodeeksempel på et flytskjema som bruker de nylig introduserte formene:
Kopier
Bygg inn
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"}
Prosess
Kopier
Bygg inn
flowchart TD
A@{ shape: rect, label: "This is a process" }
Hendelse
Kopier
Bygg inn
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subprosess
Kopier
Bygg inn
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Database (sylinder)
Kopier
Bygg inn
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (sirkel)
Kopier
Bygg inn
flowchart TD
A@{ shape: circle, label: "Start" }
Uregelmessig form
Kopier
Bygg inn
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Vurdering (diamant)
Kopier
Bygg inn
flowchart TD
A@{ shape: diamond, label: "Decision" }
Forberedelsesbetingelse (sekskant)
Kopier
Bygg inn
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Datainngang/-utgang (skrått mot høyre)
Kopier
Bygg inn
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Datainngang/-utgang (skrått mot venstre)
Kopier
Bygg inn
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Prioritert handling (trapes)
Kopier
Bygg inn
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Manuell operasjon (omvendt trapes)
Kopier
Bygg inn
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stopp (dobbel sirkel)
Kopier
Bygg inn
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Tekstblokk
Kopier
Bygg inn
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kort (rektangel med hakk)
Kopier
Bygg inn
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Linje-/skyggeprosess
Kopier
Bygg inn
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (liten sirkel)
Kopier
Bygg inn
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stopp (sirkel med ramme)
Kopier
Bygg inn
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Forgreining/Sammenslåing (langt rektangel)
Kopier
Bygg inn
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sortering (timeglass)
Kopier
Bygg inn
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Kommentar (klammer)
Kopier
Bygg inn
flowchart TD
A@{ shape: comment, label: "Comment" }
Kommentar til høyre (høyre klammer)
Kopier
Bygg inn
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Kommentar (klammer på begge sider)
Kopier
Bygg inn
flowchart TD
A@{ shape: braces, label: "Comment" }
Kommunikasjonslenke (lyn)
Kopier
Bygg inn
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopier
Bygg inn
flowchart TD
A@{ shape: doc, label: "Document" }
Forsinkelse (rektangel med halvavrundede hjørner)
Kopier
Bygg inn
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopier
Bygg inn
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Disklagring (sylinder med spor)
Kopier
Bygg inn
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Visning (visningsform)
Kopier
Bygg inn
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Delt prosess (delt rektangel)
Kopier
Bygg inn
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Uttrekk (liten trekant)
Kopier
Bygg inn
flowchart TD
A@{ shape: tri, label: "Extract" }
Intern lagring (vinduspanel)
Kopier
Bygg inn
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Koblingspunkt (fylt sirkel)
Kopier
Bygg inn
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument med linje
Kopier
Bygg inn
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Løkkegrense (femkant med hakk)
Kopier
Bygg inn
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Manuell fil (vendt trekant)
Kopier
Bygg inn
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Manuell inndata (rettvinklet trapes)
Kopier
Bygg inn
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Flere dokumenter (stablet dokument)
Kopier
Bygg inn
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Flere prosesser (stablet rektangel)
Kopier
Bygg inn
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Papirtape (flagg)
Kopier
Bygg inn
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Lagre data (sløyfeformet rektangel)
Kopier
Bygg inn
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Sammendrag (sirkel med kryss)
Kopier
Bygg inn
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Merket dokument
Kopier
Bygg inn
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Merket prosess
Kopier
Bygg inn
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Spesielle former i Mermaid-flytskjemaer
Mermaid introduserer også bilder for å forbedre flytskjemaet ditt, slik at du kan inkludere bilder direkte i flytskjemaet og dermed gi mer visuell kontekst og klarhet.
Bildeform
Du kan bruke image for å sette inn et bilde i flytskjemaet. Syntaksen for å definere bildet er som følger:
Kopier
Bygg inn
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parameter
- img: URL-adressen til bildet som skal vises.
- label: tekstetiketten knyttet til bildet, som kan være en hvilken som helst streng. Hvis den ikke er definert, vises ingen etikett.
- pos: posisjonen til etiketten. Hvis den ikke er definert, plasseres etiketten som standard nederst på bildet.
- w: bredden på bildet. Hvis den ikke er definert, brukes bildets naturlige bredde som standard.
- h: høyden på bildet. Hvis den ikke er definert, brukes bildets naturlige høyde som standard.
- constraint: avgjør om bildet begrenser nodestørrelsen. Denne innstillingen sikrer også at bildet beholder sitt opprinnelige sideforhold og justerer høyden etter bredden. Hvis den ikke er definert, er standardverdien off .
Bilder gir ekstra fleksibilitet og visuell appell til flytskjemaet ditt, og gjør det mer informativt og tiltalende.
Forbindelser mellom noder
Noder kan kobles sammen med forbindelseslinjer og piler. Det finnes ulike typer lenker, og du kan også legge til tekststrenger på lenkene.
Lenke med pil
Kopier
Bygg inn
flowchart LR
A-->B
En åpen lenke
Kopier
Bygg inn
flowchart LR
A --- B
Lenke med tekst
Kopier
Bygg inn
flowchart LR
A-- This is the text! ---B
eller
Kopier
Bygg inn
flowchart LR
A --- | This is the text| B
Lenke med pil og tekst
Kopier
Bygg inn
flowchart LR
A-->|text|B
eller
Kopier
Bygg inn
flowchart LR
A-- text -->B
Stiplet lenke
Kopier
Bygg inn
flowchart LR
A-.->B;
Stiplet lenke med tekst
Kopier
Bygg inn
flowchart LR
A-. text .->B;
Tykk lenke
Kopier
Bygg inn
flowchart LR
A ==> B
Tykk lenke med tekst
Kopier
Bygg inn
flowchart LR
A == |text| ==> B
Usynlig lenke
Kopier
Bygg inn
flowchart LR
A ~~~ B
Kjeding av lenker
Kopier
Bygg inn
flowchart LR
A -- text --> B -- text2 --> C
Du kan også deklarere flere nodelenker på samme linje, som vist nedenfor:
Kopier
Bygg inn
flowchart LR
a --> b & c--> d
Du kan også beskrive avhengigheter, som i følgende kode:
Kopier
Bygg inn
flowchart LR
a --> b & c--> d & e--> f
Hvis du beskriver den samme grafen med grunnleggende syntaks, trengs det 8 linjer. Det bør nevnes at overdreven bruk av denne metoden kan gjøre et Markdown-formatert flytskjema vanskeligere å lese.
Kopier
Bygg inn
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Legg til en ID for forbindelseslinjen
Mermaid støtter nå å legge til en ID for forbindelseslinjer, på samme måte som å knytte ID-er og metadata til noder. Denne funksjonen legger grunnlaget for mer avanserte stil-, klasse- og animasjonsfunksjoner på forbindelseslinjer.
Syntaks:For å legge til en ID for en forbindelseslinje setter du ID-en foran syntaksen for forbindelseslinjen, etterfulgt av @ -tegnet. For eksempel:
Kopier
Bygg inn
flowchart LR
A e1@--> B
I dette eksempelet er e1 ID-en til forbindelseslinjen som kobler A og B. Du kan bruke denne ID-en i senere definisjoner eller stilsetninger, akkurat som for en node.
Slå på animasjon
Etter at du har lagt til en ID for forbindelseslinjen, kan du aktivere animasjon av forbindelseslinjen ved å definere egenskapene til forbindelseslinjen:
Kopier
Bygg inn
flowchart LR
A e1@==> B
e1@{ animate: true }
Dette forteller Mermaid at forbindelseslinjen e1 er animert.
Velg animasjonstype
I den første versjonen støttes to animasjonshastigheter: fast og slow . Å velge en bestemt animasjonstype er en enkel måte å aktivere animasjon og angi animasjonshastigheten på én gang.
Kopier
Bygg inn
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animasjon ved hjelp av classDef -setningen
Du kan også animere en forbindelseslinje ved å tildele den en klasse og deretter definere animasjonsegenskaper i en classDef -setning. For eksempel:
Kopier
Bygg inn
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
I denne koden:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definerer en klasse kalt animate med stil- og animasjonsegenskaper.
- class e1 animate bruker klassen animate på forbindelseslinjen e1 .
Merknad om escape av komma: når du angir egenskapen stroke-dasharray , husk å escape kommaet som , , siden komma brukes som skilletegn i Mermaids stildefinisjoner.
Ny piltype
Støtte for nye piltyper
- Forbindelseslinje med fylt sirkel
- Forbindelseslinje med kryssmerke
Forbindelseslinje med fylt sirkel
Kopier
Bygg inn
flowchart LR
A --o B
Forbindelseslinje med kryssmerke
Kopier
Bygg inn
flowchart LR
A --x B
Flerretningspil
Du kan bruke flerretningspiler, for eksempel:
Kopier
Bygg inn
flowchart LR
A o--o B
B <--> C
C x--x D
Lengden på forbindelseslinjen
Hver node i et flytskjema tildeles et nivå i det rendrede diagrammet basert på nodene den er koblet til, dvs. et vertikalt eller horisontalt nivå (avhengig av flytskjemaets retning). Som standard kan en lenke spenne over et vilkårlig antall nivåer, men du kan kreve at en bestemt forbindelse er lengre enn andre ved å legge til ekstra bindestreker i forbindelsesdefinisjonen.
I dette eksempelet er det lagt til to ekstra bindestreker i forbindelsen fra node B til node E, slik at den spenner over to nivåer mer enn en vanlig lenke:
Kopier
Bygg inn
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Når en forbindelsesetikett skrives midt i forbindelsen, må det legges til ekstra bindestreker på høyre side av forbindelsen. Dette eksempelet er ekvivalent med det forrige:
Kopier
Bygg inn
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
For stiplede linjer eller tykke lenker er tegnet som skal legges til et likhetstegn eller en prikk, som vist i tabellen nedenfor:
| Lengde | 1 | 2 | 3 |
|---|---|---|---|
| Vanlig forbindelse | --- | ---- | ----- |
| Vanlig forbindelse med pil | --> | ---> | ----> |
| Tykk forbindelse | === | ==== | ===== |
| Tykk forbindelse med pil | ==> | ===> | ====> |
| Stiplet linje | -.- | -..- | -...- |
| Stiplet linje med pil | -.- | -..-> | -...-> |
Spesialtegn
Du kan sette tekst i anførselstegn for å rendre mer problematiske tegn. Som vist i følgende eksempel:
Kopier
Bygg inn
flowchart LR
id1["This is the (text) in the box"]
Entitetskoding for escape av tegn
Du kan bruke syntaksen i eksempelet til å escape tegn.
Kopier
Bygg inn
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Det oppgitte tallet er desimalt, så # kan kodes som #35 . Bruk av HTML-tegnavn støttes også.
Subgraf
Kopier
Bygg inn
subgraph title
graph definition
end
Nedenfor er et eksempel:
Kopier
Bygg inn
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Du kan også angi en id for en subgraf.
Kopier
Bygg inn
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Flytdiagram
Ved bruk av diagrammer av flytskjematype kan du også angi forbindelseslinjer til og fra subgrafer, som i flytskjemaet nedenfor.
Kopier
Bygg inn
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
Subgraf-retning
Når du bruker flytskjematype, kan du bruke en retningssetning til å angi renderingsretningen til subgrafen, som vist nedenfor:
Kopier
Bygg inn
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
Begrensning
Hvis noen av nodene i en subgraf er koblet til noe utenfor, ignoreres retningen til subgrafen. Ellers arver subgrafen retningen til overordnet graf:
Kopier
Bygg inn
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-streng
Markdown-strenger forbedrer flytskjemaer og tankekart ved å tilby en mer fleksibel strengtype, som støtter tekstformateringsalternativer som fet og kursiv, og muligheten til å bryte tekst automatisk innenfor en etikett.
Kopier
Bygg inn
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
- For å gjøre tekst fet bruker du to stjerner ( ** ) før og etter teksten.
- Kursiv bruker en enkelt stjerne ( * ) før og etter teksten.
- For tradisjonelle strenger må du legge til <br> -taggen for at teksten skal brytes i en node. Markdown-strenger bryter imidlertid teksten automatisk når den blir for lang, og du kan starte en ny linje ved å bruke et linjeskift i stedet for <br> -taggen.
Denne funksjonen gjelder for nodeetiketter, forbindelsesetiketter og subgrafetiketter
Du kan deaktivere automatisk linjebryting ved å bruke en bestemt syntaks
Kopier
Bygg inn
---
config:
markdownAutoWrap: false
---
graph LR
Kommentar
Du kan skrive kommentarer i et flytskjema, og editoren ignorerer disse kommentarene. En kommentar må oppta en egen linje og må begynne med to prosenttegn (%%). All tekst fra kommentarens start til neste linje betraktes som en kommentar, inkludert all flytskjema-syntaks.
Kopier
Bygg inn
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Stil og klasse
Lenkestil
Du kan angi lenkestil. For eksempel vil du kanskje utforme en lenke som beveger seg bakover i prosessen. Siden lenker ikke har ID-er slik noder har, må stilen lenken skal bruke bestemmes på annen måte. Bruk ordensnummeret fra da lenken ble definert, eller bruk standardverdien for å bruke den på alle lenker.
Kopier
Bygg inn
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Du kan også legge til stil på flere lenker ved å skille lenkenumrene med komma i én setning:
Kopier
Bygg inn
linkStyle 1,2,7 color:blue;
Angi kurvestil for forbindelseslinjer
Hvis standardmetoden ikke dekker behovet ditt, kan du angi kurvestil for forbindelseslinjer mellom elementer. Tilgjengelige kurvestiler inkluderer basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter og stepBefore.
I eksempelet nedenfor bruker et diagram fra venstre til høyre kurvestilen stepBefore .
Kopier
Bygg inn
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Angi nodestil
Du kan angi en bestemt stil for noder, for eksempel en tykkere ramme eller en annen bakgrunnsfarge.
Kopier
Bygg inn
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
Klasse
I stedet for å definere stilen hver gang, er det mer praktisk å definere en stilklasse og knytte den klassen til de nodene som skal ha et annet utseende.
En klassedefinisjon ser slik ut:
Kopier
Bygg inn
classDef className fill:pink,stroke:#333,stroke-width:4px;
I tillegg kan du definere stil for flere klasser i én setning:
Kopier
Bygg inn
classDef firstClassName,secondClassName font-size:12pt;
Slik knytter du en klasse til en node:
Kopier
Bygg inn
class nodeId1 className;
Du kan også knytte en klasse til en liste over noder i én setning:
Kopier
Bygg inn
class nodeId1,nodeId2 className;
Du kan legge til en klasse ved å bruke ::: -operatoren til å knytte klassenavnet til en node, som vist nedenfor:
Kopier
Bygg inn
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Denne formen kan brukes når du deklarerer flere lenker mellom noder:
Kopier
Bygg inn
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- I grafdeklarasjoner kan setninger nå også avsluttes uten semikolon. Etter versjon 0.2.16 er det bare valgfritt å avslutte grafsetninger med semikolon. Derfor er følgende grafdeklarasjon like gyldig som den gamle.
- Det er tillatt med ett mellomrom mellom noder og lenker. Det bør imidlertid ikke være noe mellomrom mellom en node og dens tekst, eller mellom en lenke og dens tekst. Den gamle grafdeklarasjonen er fortsatt gyldig, så denne nye funksjonen er valgfri og har som mål å forbedre lesbarheten.
Nedenfor er den nye deklarasjonen av forbindelseslinjer, som er like gyldig som den gamle.
Kopier
Bygg inn
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
