Grundlæggende definition
Et flowdiagram består af knuder (geometriske former) og forbindelseslinjer (pile eller linjer). Mermaid-koden definerer, hvordan knuder og forbindelseslinjer opbygges, og understøtter flere piltyper, flerrettede pile samt vilkårlige link til subgrafer.
Advarsel Hvis du bruger ordet "end" i en flowdiagram-knude, skal du skrive det første bogstav eller hele ordet med stort (f.eks. "End" eller "END"); hvis du skriver "end" med små bogstaver, går flowdiagrammet i stykker.
Advarsel Hvis du bruger bogstavet "o" eller "x" som første bogstav, når du forbinder flowdiagram-knuder, skal du tilføje et mellemrum før bogstavet eller skrive det med stort (f.eks. "dev--- ops", "dev---Ops").
En knude (standard)
Kopiér
Integrer
---
title: Node
---
flowchart LR
id
id er det, der vises i boksen.
Til oprettelse af flowdiagrammer kan du ud over flowchart også bruge graph .
En knude med tekst
Du kan også give boksen en anden tekst end id. Hvis du gør dette flere gange, bruges den tekst, der sidst blev angivet for knuden. Hvis der senere defineres en forbindelseslinje for knuden, kan tekstdefinitionen desuden udelades; når boksen rendres, bruges den tidligere definerede tekst.
Kopiér
Integrer
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode-tekst
Omslut Unicode-tekst med dobbelte anførselstegn.
Kopiér
Integrer
flowchart LR
id["This ❤ Unicode"]
Markdown-format
Omslut Markdown-tekst med dobbelte anførselstegn og backtick
Kopiér
Integrer
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Retning
Angiver flowdiagrammets retning
Angiver, at flowdiagrammet er arrangeret fra top til bund (TD eller TB)
Kopiér
Integrer
flowchart TD
Start --> Stop
Flowdiagrammets retninger omfatter:
- TB - fra top til bund
- TD - fra top til bund (samme som top til bund)
- BT - fra bund til top
- RL - fra højre til venstre
- LR - fra venstre til højre
Knudeformer
Afrundet rektangel
Kopiér
Integrer
flowchart LR
id1(This is the text in the box)
Stadionform
Kopiér
Integrer
flowchart LR
id1([This is the text in the box])
Subgraf
Kopiér
Integrer
flowchart LR
id1[[This is the text in the box]]
Database
Kopiér
Integrer
flowchart LR
id1[(Database)]
Cirkel
Kopiér
Integrer
flowchart LR
id1((This is the text in the circle))
Asymmetrisk form
Kopiér
Integrer
flowchart LR
id1>This is the text in the box]
Rombe
Kopiér
Integrer
flowchart LR
id1{This is the text in the box}
Sekskant
Kopiér
Integrer
flowchart LR
id1{{This is the text in the box}}
Parallelogram
Kopiér
Integrer
flowchart TD
id1[/This is the text in the box/]
Omvendt parallelogram
Kopiér
Integrer
flowchart TD
id1[\This is the text in the box\]
Trapez
Kopiér
Integrer
flowchart TD
A[/ProcessOn\]
Omvendt trapez
Kopiér
Integrer
flowchart TD
B[\ProcessOn/]
Dobbeltcirkel
Kopiér
Integrer
flowchart TD
id1(((This is the text in the circle)))
Udvidelse af knudeformer i Mermaid-flowdiagrammer
Mermaid har introduceret 30 nye former for at øge fleksibiliteten og præcisionen i oprettelsen af flowdiagrammer. Disse nye former giver flere muligheder for intuitivt at repræsentere processer, beslutninger, hændelser, datalagring og andre elementer i et flowdiagram, hvilket forbedrer klarheden og den semantiske betydning.
Ny syntaks til formdefinition
Mermaid understøtter nu en generel syntaks til at definere formtyper for at håndtere det stigende antal former. Denne syntaks giver dig mulighed for at angive en bestemt form for en knude i et klart og fleksibelt format.
Kopiér
Integrer
A@{ shape: rect }
Denne syntaks opretter knuden A som et rektangel. Den rendres på samme måde som [A] eller A.
Komplet liste over knudeformer
Følgende er en komplet liste over de nyligt introducerede knudeformer med deres tilsvarende betydning, forkortelse og alias:
| Semantisk navn | Grafisk syntaks | Syntaksforkortelse | Syntaksalternativ | Detaljeret beskrivelse |
|---|---|---|---|---|
| Kort | Notched Rectangle | notch-rect | card, notched-rectangle | Repræsenterer et kort |
| Sortering | Hourglass | hourglass | collate | Repræsenterer en sorteringshandling |
| Kommunikationslink | Lightning Bolt | bolt | com-link, lightning-bolt | Kommunikationslink |
| Kommentar | Curly Brace | brace | brace-l, comment | Tilføjer en kommentar |
| Kommentar til højre | Curly Brace | brace-r | Tilføjer en kommentar | |
| Kommentar med klammer på begge sider | Curly Braces | braces | Tilføjer en kommentar | |
| Datainput eller -output | Lean Right | lean-r | in-out, lean-right | Repræsenterer input eller output |
| Datainput eller -output | Lean Left | lean-l | lean-left, out-in | Repræsenterer output eller input |
| Database | Cylinder | cyl | cylinder, database, db | Databaselagring |
| Beslutning | Diamond | diam | decision, diamond, question | Beslutningstrin |
| Forsinkelse | Half-Rounded Rectangle | delay | half-rounded-rectangle | Repræsenterer forsinkelse |
| Direkte adgangslager | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Direkte adgangslager |
| Disklagring | Lined Cylinder | lin-cyl | disk, lined-cylinder | Disklagring |
| Visning | Curved Trapezoid | curv-trap | curved-trapezoid, display | Repræsenterer, at information vises på en skærm, terminal eller lignende enhed |
| Opdelt behandling | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Form for opdelt behandling |
| Dokument | Document | doc | document | Repræsenterer et dokument |
| Hændelse | Rounded Rectangle | rounded | event | Repræsenterer en hændelse |
| Uddrag | Triangle | tri | extract, triangle | Uddragsproces |
| Forgrening/fletning | Filled Rectangle | fork | join | Forgrening eller fletning i et flowdiagram |
| Internt lager | Window Pane | win-pane | internal-storage, window-pane | Internt lager |
| Forbindelsespunkt | Filled Circle | f-circ | filled-circle, junction | Forbindelsespunkt |
| Dokument med linje | Lined Document | lin-doc | lined-document | Dokument med linje |
| Linje-/skyggeproces | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Procesform med linje |
| Løkkegrænse | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Trin for løkkegrænse |
| Manuel fil | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Manuel filhandling |
| Manuel input | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Manuelt inputtrin |
| Manuel handling | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Repræsenterer en manuel opgave |
| Flere dokumenter | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Flere processer | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Uregelmæssig form | Odd | odd | Uregelmæssig form | |
| Papirbånd | Flag | flag | paper-tape | Papirbånd |
| Forberedelsesbetingelse | Hexagon | hex | hexagon, prepare | Forberedelses- eller betingelsestrin |
| Prioriteret handling | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Prioriteret handling |
| Proces | Rectangle | rect | proc, process, rectangle | Standardprocesform |
| Start | Circle | circle | circ | Startpunkt |
| Start | Small Circle | sm-circ | small-circle, start | Lille cirkelformet startpunkt |
| Stop | Double Circle | dbl-circ | double-circle | Repræsenterer et stoppunkt |
| Stop | Framed Circle | fr-circ | framed-circle, stop | Repræsenterer et stoppunkt |
| Lagring af data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Lagring af data |
| Subgraf | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subproces, underprogram |
| Resumé | Crossed Circle | cross-circ | crossed-circle, summary | Resumé |
| Mærket dokument | Tagged Document | tag-doc | tagged-document | Mærket dokument |
| Standardiseret proces | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Slutpunkt | Stadium | stadium | pill, terminal | Slutpunkt |
| Tekstblok | Text Block | text | Tekstblok |
Følgende er et eksempel på flowdiagramkode, der bruger de nyligt introducerede former:
Kopiér
Integrer
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
Kopiér
Integrer
flowchart TD
A@{ shape: rect, label: "This is a process" }
Hændelse
Kopiér
Integrer
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subproces
Kopiér
Integrer
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Database (cylinder)
Kopiér
Integrer
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (cirkel)
Kopiér
Integrer
flowchart TD
A@{ shape: circle, label: "Start" }
Uregelmæssig form
Kopiér
Integrer
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Beslutning (rombe)
Kopiér
Integrer
flowchart TD
A@{ shape: diamond, label: "Decision" }
Forberedelsesbetingelse (sekskant)
Kopiér
Integrer
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Datainput/output (hælder mod højre)
Kopiér
Integrer
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Datainput/output (hælder mod venstre)
Kopiér
Integrer
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Prioriteret handling (trapez)
Kopiér
Integrer
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Manuel handling (omvendt trapez)
Kopiér
Integrer
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stop (dobbeltcirkel)
Kopiér
Integrer
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Tekstblok
Kopiér
Integrer
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kort (rektangel med hak)
Kopiér
Integrer
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Forløb med linje/skygge
Kopiér
Integrer
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (lille cirkel)
Kopiér
Integrer
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stop (cirkel med ramme)
Kopiér
Integrer
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Forgrening/fletning (langt rektangel)
Kopiér
Integrer
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sortering (timeglas)
Kopiér
Integrer
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Kommentar (klammer)
Kopiér
Integrer
flowchart TD
A@{ shape: comment, label: "Comment" }
Kommentar til højre (klamme til højre)
Kopiér
Integrer
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Kommentar (klammer på begge sider)
Kopiér
Integrer
flowchart TD
A@{ shape: braces, label: "Comment" }
Kommunikationslink (lyn)
Kopiér
Integrer
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopiér
Integrer
flowchart TD
A@{ shape: doc, label: "Document" }
Forsinkelse (halvt afrundet rektangel)
Kopiér
Integrer
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopiér
Integrer
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Disklagring (cylinder med rille)
Kopiér
Integrer
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Visning (visningsform)
Kopiér
Integrer
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Opdelt behandling (opdelt rektangel)
Kopiér
Integrer
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Uddrag (lille trekant)
Kopiér
Integrer
flowchart TD
A@{ shape: tri, label: "Extract" }
Internt lager (vinduespanel)
Kopiér
Integrer
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Forbindelsespunkt (udfyldt cirkel)
Kopiér
Integrer
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument med linje
Kopiér
Integrer
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Løkkegrænse (femkant med hak)
Kopiér
Integrer
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Manuel fil (vendt trekant)
Kopiér
Integrer
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Manuel input (retvinklet trapez)
Kopiér
Integrer
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Flere dokumenter (stablede dokumenter)
Kopiér
Integrer
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Flere processer (stablede rektangler)
Kopiér
Integrer
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Papirbånd (flag)
Kopiér
Integrer
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Lagring af data (sløjfeformet rektangel)
Kopiér
Integrer
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Resumé (cirkel med kryds)
Kopiér
Integrer
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Mærket dokument
Kopiér
Integrer
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Markeret forløb
Kopiér
Integrer
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Særlige former i Mermaid-flowdiagrammer
Mermaid har også introduceret billeder for at forbedre dine flowdiagrammer, så du kan inkludere billeder direkte i flowdiagrammet og dermed give mere visuel kontekst og klarhed.
Billedform
Du kan bruge image til at indsætte et billede i et flowdiagram. Syntaksen til at definere et billede er som følger:
Kopiér
Integrer
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 det billede, der skal vises.
- label: den tekstetiket, der er knyttet til billedet; den kan være en vilkårlig streng. Hvis den ikke er defineret, vises ingen etiket.
- pos: etiketens placering. Hvis den ikke er defineret, placeres etiketten som standard nederst på billedet.
- w: billedets bredde. Hvis den ikke er defineret, bruges billedets naturlige bredde som standard.
- h: billedets højde. Hvis den ikke er defineret, bruges billedets naturlige højde som standard.
- constraint: afgør, om billedet begrænser knudens størrelse. Denne indstilling sikrer også, at billedet bevarer sit oprindelige billedformat og justerer højden i forhold til bredden. Hvis den ikke er defineret, er standardværdien off .
Billeder giver dine flowdiagrammer ekstra fleksibilitet og visuel appel, så de bliver mere informative og tiltalende.
Forbindelser mellem knuder
Knuder kan forbindes med forbindelseslinjer og pile. Der findes forskellige typer link, og du kan også knytte en tekststreng til et link.
Link med pil
Kopiér
Integrer
flowchart LR
A-->B
Et åbent link
Kopiér
Integrer
flowchart LR
A --- B
Link med tekst
Kopiér
Integrer
flowchart LR
A-- This is the text! ---B
eller
Kopiér
Integrer
flowchart LR
A --- | This is the text| B
Link med pil og tekst
Kopiér
Integrer
flowchart LR
A-->|text|B
eller
Kopiér
Integrer
flowchart LR
A-- text -->B
Stiplet link
Kopiér
Integrer
flowchart LR
A-.->B;
Stiplet link med tekst
Kopiér
Integrer
flowchart LR
A-. text .->B;
Tykt link
Kopiér
Integrer
flowchart LR
A ==> B
Tykt link med tekst
Kopiér
Integrer
flowchart LR
A == |text| ==> B
Usynligt link
Kopiér
Integrer
flowchart LR
A ~~~ B
Kæde af link
Kopiér
Integrer
flowchart LR
A -- text --> B -- text2 --> C
Du kan også erklære flere knudelink på samme linje, som vist nedenfor:
Kopiér
Integrer
flowchart LR
a --> b & c--> d
Du kan også beskrive afhængigheder som i koden nedenfor:
Kopiér
Integrer
flowchart LR
a --> b & c--> d & e--> f
Hvis du beskriver den samme graf med den grundlæggende syntaks, kræver det 8 linjer. Bemærk, at overdreven brug af denne metode kan gøre et flowdiagram i Markdown-format sværere at læse.
Kopiér
Integrer
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Tilføj ID til en forbindelseslinje
Mermaid understøtter nu at tilføje ID til forbindelseslinjer, svarende til at knytte ID og metadata til knuder. Denne funktion danner grundlag for mere avancerede stil-, klasse- og animationsfunktioner på forbindelseslinjer.
Syntaks:For at tilføje et ID til en forbindelseslinje skal du sætte ID'et foran forbindelseslinjens syntaks efterfulgt af @-tegnet. For eksempel:
Kopiér
Integrer
flowchart LR
A e1@--> B
I dette eksempel er e1 ID'et for den forbindelseslinje, der forbinder A og B. Du kan bruge dette ID i efterfølgende definitions- eller stiludsagn, ligesom du bruger en knude.
Aktivér animation
Når du har tilføjet et ID til en forbindelseslinje, kan du aktivere animation af forbindelseslinjen ved at definere dens egenskaber:
Kopiér
Integrer
flowchart LR
A e1@==> B
e1@{ animate: true }
Dette fortæller Mermaid, at forbindelseslinjen e1 er animeret.
Vælg animationstype
I den første version understøttes to animationshastigheder: fast og slow. At vælge en bestemt animationstype er en nem måde at aktivere animation og angive animationshastigheden på én gang.
Kopiér
Integrer
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animér med classDef-udsagnet
Du kan også animere en forbindelseslinje ved at tildele den en klasse og derefter definere animationsegenskaber i et classDef-udsagn. For eksempel:
Kopiér
Integrer
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
I denne kode:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definerer en klasse ved navn animate med stil- og animationsegenskaber.
- class e1 animate anvender klassen animate på forbindelseslinjen e1.
Bemærkning om escape af kommaer: Når du angiver egenskaben stroke-dasharray, skal du huske at escape kommaet, da kommaet bruges som separator i Mermaids stildefinitioner.
Ny piltype
Understøtter nye piltyper
- Forbindelseslinje med udfyldt cirkel
- Forbindelseslinje med krydsmarkering
Forbindelseslinje med udfyldt cirkel
Kopiér
Integrer
flowchart LR
A --o B
Forbindelseslinje med krydsmarkering
Kopiér
Integrer
flowchart LR
A --x B
Flerrettet pil
Du kan bruge flerrettede pile, for eksempel:
Kopiér
Integrer
flowchart LR
A o--o B
B <--> C
C x--x D
Forbindelseslinjens længde
Hver knude i et flowdiagram tildeles et niveau i det renderede diagram ud fra de knuder, den er forbundet til, dvs. et lodret eller vandret niveau (afhængigt af flowdiagrammets retning). Som standard kan et link spænde over et vilkårligt antal niveauer, men du kan kræve, at en given forbindelse er længere end andre ved at tilføje ekstra bindestreger i forbindelsesdefinitionen.
I dette eksempel er der tilføjet to ekstra bindestreger i forbindelsen fra knude B til knude E, så den spænder over to niveauer mere end et almindeligt link:
Kopiér
Integrer
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Når en forbindelsesetiket skrives midt i forbindelsen, skal der tilføjes ekstra bindestreger på højre side af forbindelsen. Dette eksempel svarer til det foregående:
Kopiér
Integrer
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 link er det tegn, der skal tilføjes, et lighedstegn eller en prik, som vist i tabellen nedenfor:
| Længde | 1 | 2 | 3 |
|---|---|---|---|
| Almindelig forbindelse | --- | ---- | ----- |
| Almindelig forbindelse med pil | --> | ---> | ----> |
| Tyk forbindelse | === | ==== | ===== |
| Tyk forbindelse med pil | ==> | ===> | ====> |
| Stiplet linje | -.- | -..- | -...- |
| Stiplet linje med pil | -.- | -..-> | -...-> |
Specialtegn
Du kan sætte tekst i anførselstegn for at gengive mere besværlige tegn. Som vist i eksemplet nedenfor:
Kopiér
Integrer
flowchart LR
id1["This is the (text) in the box"]
Entitetskodning til escape af tegn
Du kan escape tegn ved hjælp af syntaksen i eksemplet.
Kopiér
Integrer
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Det angivne tal er decimalt, så # kan kodes som #35. Brug af HTML-tegnnavne understøttes også.
Subgraf
Kopiér
Integrer
subgraph title
graph definition
end
Nedenfor er et eksempel:
Kopiér
Integrer
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Du kan også angive et id for en subgraf.
Kopiér
Integrer
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Rutediagram
Med diagrammer af typen flowdiagram kan du også opsætte forbindelseslinjer til og fra subgrafer, som i flowdiagrammet nedenfor.
Kopiér
Integrer
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
Subgrafens retning
Når du bruger flowdiagramtypen, kan du bruge et retningsudsagn til at angive subgrafens renderingsretning, som vist nedenfor:
Kopiér
Integrer
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
Begrænsninger
Hvis nogen knude i subgrafen er forbundet med omverdenen, ignoreres subgrafens retning. Ellers arver subgrafen forældrediagrammets retning:
Kopiér
Integrer
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-strenge
Markdown-strenge forbedrer flowdiagrammer og mindmaps ved at tilbyde en mere fleksibel strengtype, der understøtter tekstformateringsmuligheder som fed og kursiv samt automatisk ombrydning af tekst i etiketter.
Kopiér
Integrer
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 at gøre tekst fed skal du bruge to stjerner (**) før og efter teksten.
- Kursiv bruger en enkelt stjerne (*) før og efter teksten.
- For traditionelle strenge skal du tilføje et <br>-tag for at ombryde teksten i en knude. Markdown-strenge ombryder dog automatisk teksten, når den er for lang, og du kan starte en ny linje blot ved at bruge et linjeskift i stedet for et <br>-tag.
Denne funktion gælder for knudeetiketter, forbindelseslinjeetiketter og subgrafetiketter
Du kan deaktivere automatisk ombrydning ved at bruge en bestemt syntaks
Kopiér
Integrer
---
config:
markdownAutoWrap: false
---
graph LR
Kommentar
Du kan indsætte kommentarer i et flowdiagram, og editoren ignorerer dem. En kommentar skal stå på sin egen linje og skal begynde med dobbelt procenttegn (%%). Al tekst fra kommentarens begyndelse til næste linje betragtes som en kommentar, inklusive enhver flowsyntaks.
Kopiér
Integrer
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Stil og klasse
Linkstil
Du kan angive linkstil. Du vil for eksempel måske style et link, der bevæger sig bagud i processen; da link ikke har ID på samme måde som knuder, skal stilen, som et link skal bruge, bestemmes på anden vis. Brug rækkefølgenummeret fra definitionen af linket, eller brug standardværdien, som gælder for alle link.
Kopiér
Integrer
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Du kan også tilføje stil til flere link ved at adskille linknumrene med kommaer i et enkelt udsagn:
Kopiér
Integrer
linkStyle 1,2,7 color:blue;
Angiv kurvestil for forbindelseslinjer
Hvis standardmetoden ikke opfylder dine behov, kan du angive en kurvestil for forbindelseslinjer mellem elementer. De tilgængelige kurvestile omfatter basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter og stepBefore.
I eksemplet nedenfor bruger et diagram fra venstre til højre kurvestilen stepBefore.
Kopiér
Integrer
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Angiv knudestil
Du kan angive en bestemt stil for en knude, f.eks. en tykkere kant eller en anden baggrundsfarve.
Kopiér
Integrer
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 at definere stil hver gang er det nemmere at definere en stilklasse og knytte denne klasse til de knuder, der skal se anderledes ud.
En klassedefinition ser sådan ud:
Kopiér
Integrer
classDef className fill:pink,stroke:#333,stroke-width:4px;
Derudover kan du definere stil for flere klasser i et enkelt udsagn:
Kopiér
Integrer
classDef firstClassName,secondClassName font-size:12pt;
Sådan knytter du en klasse til en knude:
Kopiér
Integrer
class nodeId1 className;
Du kan også knytte en klasse til en liste af knuder i et enkelt udsagn:
Kopiér
Integrer
class nodeId1,nodeId2 className;
For at tilføje en klasse kan du bruge :::-operatoren til at knytte klassenavnet til knuden, som vist nedenfor:
Kopiér
Integrer
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Denne form kan bruges, når du erklærer flere link mellem knuder:
Kopiér
Integrer
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- I grafdeklarationer behøver udsagn nu ikke længere at slutte med et semikolon. Efter version 0.2.16 er det kun valgfrit at afslutte grafüdsagn med et semikolon. Derfor er grafdeklarationen nedenfor lige så gyldig som den gamle.
- Der er tilladt et mellemrum mellem knuder og link. Der bør dog ikke være noget mellemrum mellem en knude og dens tekst eller mellem et link og dets tekst. Den gamle grafdeklaration er også stadig gyldig, så denne nye funktion er valgfri og har til formål at forbedre læsbarheden.
Nedenfor er den nye deklaration af forbindelseslinjer, som er lige så gyldig som den gamle.
Kopiér
Integrer
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
