Grundläggande definition
Ett flödesschema består av noder (geometriska former) och förbindelselinjer (pilar eller linjer). Mermaid-koden definierar hur noder och förbindelselinjer byggs upp och stöder flera piltyper, flerriktade pilar samt godtyckliga länkar till subgrafer.
Varning Om du använder ordet "end" i en nod i ett flödesschema, skriv första bokstaven eller hela ordet med versaler (till exempel: "End" eller "END"), om du skriver in "end" helt med gemener uppstår ett fel i flödesschemat.
Varning Om du använder bokstaven "o" eller "x" som första bokstav när du förbinder noder i ett flödesschema, lägg till ett mellanslag före bokstaven eller skriv bokstaven med versal (till exempel: "dev--- ops", "dev---Ops").
En nod (standard)
Kopiera
Bädda in
---
title: Node
---
flowchart LR
id
id är det som visas i rutan.
Syntax för att skapa flödesscheman: förutom att använda flowchart kan du även använda graph .
En nod med text
Du kan också ange en annan text än id för rutan. Om detta görs flera gånger används den text som sist angavs för noden. Dessutom kan textdefinitionen utelämnas om en förbindelselinje senare definieras för noden; vid rendering av rutan används den tidigare definierade texten.
Kopiera
Bädda in
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode-text
Omge Unicode-text med dubbla citattecken.
Kopiera
Bädda in
flowchart LR
id["This ❤ Unicode"]
Markdown-format
Omge Markdown-text med dubbla citattecken och backticks
Kopiera
Bädda in
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Riktning
Anger flödesschemats riktning
Anger att flödesschemat är ordnat uppifrån och ned (TD eller TB)
Kopiera
Bädda in
flowchart TD
Start --> Stop
Riktningar för flödesschema omfattar:
- TB - uppifrån och ned
- TD - uppifrån och ned (samma som uppifrån och ned)
- BT - nedifrån och upp
- RL - höger till vänster
- LR - vänster till höger
Nodform
Rektangel med rundade hörn
Kopiera
Bädda in
flowchart LR
id1(This is the text in the box)
Stadionform
Kopiera
Bädda in
flowchart LR
id1([This is the text in the box])
Subgraf
Kopiera
Bädda in
flowchart LR
id1[[This is the text in the box]]
Databas
Kopiera
Bädda in
flowchart LR
id1[(Database)]
Cirkel
Kopiera
Bädda in
flowchart LR
id1((This is the text in the circle))
Asymmetrisk form
Kopiera
Bädda in
flowchart LR
id1>This is the text in the box]
Romb
Kopiera
Bädda in
flowchart LR
id1{This is the text in the box}
Hexagon
Kopiera
Bädda in
flowchart LR
id1{{This is the text in the box}}
Parallellogram
Kopiera
Bädda in
flowchart TD
id1[/This is the text in the box/]
Omvänd parallellogram
Kopiera
Bädda in
flowchart TD
id1[\This is the text in the box\]
Trapets
Kopiera
Bädda in
flowchart TD
A[/ProcessOn\]
Omvänt trapets
Kopiera
Bädda in
flowchart TD
B[\ProcessOn/]
Dubbelcirkel
Kopiera
Bädda in
flowchart TD
id1(((This is the text in the circle)))
Utökning av nodformer i Mermaid-flödesschema
Mermaid introducerar 30 nya former för att öka flexibiliteten och precisionen vid skapande av flödesscheman. Dessa nya former erbjuder fler alternativ för att visuellt representera processer, beslut, händelser, datalagring och andra element i flödesscheman, vilket förbättrar tydlighet och semantisk innebörd.
Ny syntax för formdefinition
Mermaid stöder nu en generell syntax för att definiera formtyper, för att hantera det växande antalet former. Denna syntax låter dig ange en specifik form för en nod med ett tydligt och flexibelt format.
Kopiera
Bädda in
A@{ shape: rect }
Denna syntax skapar noden A som en rektangel. Den renderas på samma sätt som [A] eller A.
Fullständig lista över nodformer
Följande är en fullständig lista över de nyligen introducerade nodformerna med tillhörande innebörd, förkortningar och alias:
| Semantiskt namn | Grafikens syntax | Syntaxförkortning | Syntaxalternativ | Detaljerad beskrivning |
|---|---|---|---|---|
| Kort | Notched Rectangle | notch-rect | card, notched-rectangle | Representerar ett kort |
| Sortering | Hourglass | hourglass | collate | Representerar en sorteringsåtgärd |
| Kommunikationslänk | Lightning Bolt | bolt | com-link, lightning-bolt | Kommunikationslänk |
| Kommentar | Curly Brace | brace | brace-l, comment | Lägg till en kommentar |
| Kommentar till höger | Curly Brace | brace-r | Lägg till en kommentar | |
| Kommentar med klammerparenteser på båda sidor | Curly Braces | braces | Lägg till en kommentar | |
| Datainmatning eller datautmatning | Lean Right | lean-r | in-out, lean-right | Representerar indata eller utdata |
| Datainmatning eller datautmatning | Lean Left | lean-l | lean-left, out-in | Representerar utdata eller indata |
| Databas | Cylinder | cyl | cylinder, database, db | Databaslagring |
| Beslut | Diamond | diam | decision, diamond, question | Beslutssteg |
| Fördröjning | Half-Rounded Rectangle | delay | half-rounded-rectangle | Representerar en fördröjning |
| Direktåtkomstlagring | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Direktåtkomstlagring |
| Disklagring | Lined Cylinder | lin-cyl | disk, lined-cylinder | Disklagring |
| Visning | Curved Trapezoid | curv-trap | curved-trapezoid, display | Representerar att information visas på en skärm, terminal eller liknande enhet |
| Delad bearbetning | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Form för delad bearbetning |
| Dokument | Document | doc | document | Representerar ett dokument |
| Händelse | Rounded Rectangle | rounded | event | Representerar en händelse |
| Extrahering | Triangle | tri | extract, triangle | Extraheringsprocess |
| Förgrening/sammanslagning | Filled Rectangle | fork | join | Förgrening eller sammanslagning i ett flödesschema |
| Intern lagring | Window Pane | win-pane | internal-storage, window-pane | Intern lagring |
| Anslutningspunkt | Filled Circle | f-circ | filled-circle, junction | Anslutningspunkt |
| Dokument med linje | Lined Document | lin-doc | lined-document | Dokument med linje |
| Linje-/skuggprocess | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Processform med linje |
| Loopbegränsning | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Steg för loopbegränsning |
| Manuell fil | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Manuell filåtgärd |
| Manuell inmatning | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Steg för manuell inmatning |
| Manuell åtgärd | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Representerar en manuell uppgift |
| Flera dokument | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Flera processer | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Oregelbunden form | Odd | odd | Oregelbunden form | |
| Pappersremsa | Flag | flag | paper-tape | Pappersremsa |
| Förberedelse | Hexagon | hex | hexagon, prepare | Förberedelse- eller villkorssteg |
| Prioriterad åtgärd | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Prioriterad åtgärd |
| Process | Rectangle | rect | proc, process, rectangle | Standardform för process |
| Start | Circle | circle | circ | Startpunkt |
| Start | Small Circle | sm-circ | small-circle, start | Liten cirkel som startpunkt |
| Stopp | Double Circle | dbl-circ | double-circle | Representerar en stoppunkt |
| Stopp | Framed Circle | fr-circ | framed-circle, stop | Representerar en stoppunkt |
| Lagring av data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Lagring av data |
| Subgraf | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Delprocess, underprogram |
| Sammanfattning | Crossed Circle | cross-circ | crossed-circle, summary | Sammanfattning |
| Taggat dokument | Tagged Document | tag-doc | tagged-document | Taggat dokument |
| Standardiserad process | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Slutpunkt | Stadium | stadium | pill, terminal | Slutpunkt |
| Textblock | Text Block | text | Textblock |
Följande är ett kodexempel på ett flödesschema som använder de nyligen introducerade formerna:
Kopiera
Bädda in
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"}
Process
Kopiera
Bädda in
flowchart TD
A@{ shape: rect, label: "This is a process" }
Händelse
Kopiera
Bädda in
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Delprocess
Kopiera
Bädda in
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Databas (cylinder)
Kopiera
Bädda in
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (cirkel)
Kopiera
Bädda in
flowchart TD
A@{ shape: circle, label: "Start" }
Oregelbunden form
Kopiera
Bädda in
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Beslut (romb)
Kopiera
Bädda in
flowchart TD
A@{ shape: diamond, label: "Decision" }
Förberedelse (hexagon)
Kopiera
Bädda in
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Datainmatning/utmatning (lutad åt höger)
Kopiera
Bädda in
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Datainmatning/utmatning (lutad åt vänster)
Kopiera
Bädda in
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Prioriterad åtgärd (trapets)
Kopiera
Bädda in
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Manuell åtgärd (omvänt trapets)
Kopiera
Bädda in
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stopp (dubbelcirkel)
Kopiera
Bädda in
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Textblock
Kopiera
Bädda in
flowchart TD
A@{ shape: text, label: "This is a text block" }
Kort (rektangel med hack)
Kopiera
Bädda in
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Process med linje/skugga
Kopiera
Bädda in
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (liten cirkel)
Kopiera
Bädda in
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stopp (cirkel med ram)
Kopiera
Bädda in
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Förgrening/sammanslagning (lång rektangel)
Kopiera
Bädda in
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sortering (timglas)
Kopiera
Bädda in
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Kommentar (klammerparenteser)
Kopiera
Bädda in
flowchart TD
A@{ shape: comment, label: "Comment" }
Kommentar till höger (höger klammerparentes)
Kopiera
Bädda in
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Kommentar (parenteser på båda sidor)
Kopiera
Bädda in
flowchart TD
A@{ shape: braces, label: "Comment" }
Kommunikationslänk (blixt)
Kopiera
Bädda in
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopiera
Bädda in
flowchart TD
A@{ shape: doc, label: "Document" }
Fördröjning (halvt rundad rektangel)
Kopiera
Bädda in
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopiera
Bädda in
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Disklagring (cylinder med spår)
Kopiera
Bädda in
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Visning (visningsform)
Kopiera
Bädda in
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Delad bearbetning (delad rektangel)
Kopiera
Bädda in
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Extrahering (liten triangel)
Kopiera
Bädda in
flowchart TD
A@{ shape: tri, label: "Extract" }
Intern lagring (fönsterpanel)
Kopiera
Bädda in
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Anslutningspunkt (fylld cirkel)
Kopiera
Bädda in
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument med linje
Kopiera
Bädda in
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Loopbegränsning (femhörning med hack)
Kopiera
Bädda in
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Manuell fil (vänd triangel)
Kopiera
Bädda in
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Manuell inmatning (rätvinkligt trapets)
Kopiera
Bädda in
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Flera dokument (staplade dokument)
Kopiera
Bädda in
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Flera processer (staplade rektanglar)
Kopiera
Bädda in
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Pappersremsa (flagga)
Kopiera
Bädda in
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Lagring av data (rosett-rektangel)
Kopiera
Bädda in
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Sammanfattning (cirkel med kors)
Kopiera
Bädda in
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Taggat dokument
Kopiera
Bädda in
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Markerad process
Kopiera
Bädda in
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Särskilda former i Mermaid-flödesscheman
Mermaid introducerar även bilder för att förbättra ditt flödesschema, så att du kan inkludera bilder direkt i flödesschemat, vilket ger mer visuell kontext och tydlighet.
Bildform
Du kan använda image för att infoga en bild i flödesschemat. Syntaxen för att definiera en bild är följande:
Kopiera
Bädda in
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 till bilden som ska visas.
- label: en textetikett som är kopplad till bilden, kan vara vilken sträng som helst. Om den inte definieras visas ingen etikett.
- pos: etikettens position. Om den inte definieras placeras etiketten som standard längst ned på bilden.
- w: bildens bredd. Om den inte definieras används bildens naturliga bredd som standard.
- h: bildens höjd. Om den inte definieras används bildens naturliga höjd som standard.
- constraint: avgör om bilden begränsar nodens storlek. Denna inställning säkerställer också att bilden behåller sitt ursprungliga bildförhållande och justerar höjden efter bredden. Om den inte definieras är standardvärdet off .
Bilder ger ditt flödesschema extra flexibilitet och visuell attraktionskraft, vilket gör det mer informativt och tilltalande.
Förbindelser mellan noder
Noder kan förbindas med förbindelselinjer och pilar. Det finns olika typer av länkar, och textsträngar kan också bifogas till länkarna.
Länk med pil
Kopiera
Bädda in
flowchart LR
A-->B
En öppen länk
Kopiera
Bädda in
flowchart LR
A --- B
Länk med text
Kopiera
Bädda in
flowchart LR
A-- This is the text! ---B
eller
Kopiera
Bädda in
flowchart LR
A --- | This is the text| B
Länk med pil och text
Kopiera
Bädda in
flowchart LR
A-->|text|B
eller
Kopiera
Bädda in
flowchart LR
A-- text -->B
Streckad länk
Kopiera
Bädda in
flowchart LR
A-.->B;
Streckad länk med text
Kopiera
Bädda in
flowchart LR
A-. text .->B;
Tjock länk
Kopiera
Bädda in
flowchart LR
A ==> B
Tjock länk med text
Kopiera
Bädda in
flowchart LR
A == |text| ==> B
Osynlig länk
Kopiera
Bädda in
flowchart LR
A ~~~ B
Kedjade länkar
Kopiera
Bädda in
flowchart LR
A -- text --> B -- text2 --> C
Du kan också deklarera flera nodlänkar på samma rad, som visas nedan:
Kopiera
Bädda in
flowchart LR
a --> b & c--> d
Du kan också beskriva beroenden, som i följande kod:
Kopiera
Bädda in
flowchart LR
a --> b & c--> d & e--> f
Om samma graf beskrivs med den grundläggande syntaxen krävs 8 rader. Kom ihåg att överdriven användning av denna metod kan göra flödesscheman i Markdown-format svårare att läsa.
Kopiera
Bädda in
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Lägg till ett ID för en förbindelselinje
Mermaid stöder nu att lägga till ett ID för en förbindelselinje, liknande att bifoga ID och metadata till noder. Denna funktion lägger grunden för mer avancerad stil, klasser och animering på förbindelselinjer.
Syntax:För att lägga till ett ID för en förbindelselinje, skriv ID:t före förbindelselinjens syntax, följt direkt av tecknet @. Till exempel:
Kopiera
Bädda in
flowchart LR
A e1@--> B
I detta exempel är e1 ID:t för förbindelselinjen som förbinder A och B. Du kan använda detta ID i efterföljande definitioner eller stiluttryck, precis som för en nod.
Aktivera animering
Efter att ha lagt till ett ID för förbindelselinjen kan du aktivera animering av förbindelselinjen genom att definiera dess egenskaper:
Kopiera
Bädda in
flowchart LR
A e1@==> B
e1@{ animate: true }
Detta talar om för Mermaid att förbindelselinjen e1 är animerad.
Välj animationstyp
I den första versionen stöds två animationshastigheter: fast och slow. Att välja en specifik animationstyp är ett enkelt sätt att aktivera animering och ange animationshastigheten på en gång.
Kopiera
Bädda in
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animering med classDef -satsen
Du kan också animera en förbindelselinje genom att tilldela den en klass och sedan definiera animationsegenskaper i en classDef -sats. Till exempel:
Kopiera
Bädda in
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
I denna kod:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definierar en klass som heter animate, med stil- och animationsegenskaper.
- class e1 animate tillämpar klassen animate på förbindelselinjen e1.
Om att undvika kommatecken: när du ställer in egenskapen stroke-dasharray, kom ihåg att undvika kommatecken som ,, eftersom kommatecken används som avgränsare i Mermaids stildefinitioner.
Ny piltyp
Stöd för nya piltyper
- Förbindelselinje med fylld cirkel
- Förbindelselinje med kryssmarkering
Förbindelselinje med fylld cirkel
Kopiera
Bädda in
flowchart LR
A --o B
Förbindelselinje med kryssmarkering
Kopiera
Bädda in
flowchart LR
A --x B
Flerriktade pilar
Du kan använda flerriktade pilar, till exempel:
Kopiera
Bädda in
flowchart LR
A o--o B
B <--> C
C x--x D
Förbindelselinjens längd
Varje nod i ett flödesschema tilldelas en nivå i renderingsgrafen beroende på vilka noder den är förbunden med, det vill säga en vertikal eller horisontell nivå (beroende på flödesschemats riktning). Som standard kan en länk spänna över valfritt antal nivåer, men du kan begära att en viss förbindelse ska vara längre än andra genom att lägga till extra bindestreck i förbindelsedefinitionen.
I detta exempel har två extra bindestreck lagts till i förbindelsen från nod B till nod E, vilket gör att den spänner över två nivåer mer än en vanlig länk:
Kopiera
Bädda in
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
När en förbindelseetikett skrivs i mitten av förbindelsen måste extra bindestreck läggas till på förbindelsens högra sida. Detta exempel är likvärdigt med det föregående:
Kopiera
Bädda in
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
För punktlinjer eller tjocka länkar är tecknet som ska läggas till ett likhetstecken eller punkt, som visas i tabellen nedan:
| Längd | 1 | 2 | 3 |
|---|---|---|---|
| Vanlig förbindelse | --- | ---- | ----- |
| Vanlig förbindelse med pil | --> | ---> | ----> |
| Tjock förbindelse | === | ==== | ===== |
| Tjock förbindelse med pil | ==> | ===> | ====> |
| Punktlinje | -.- | -..- | -...- |
| Punktlinje med pil | -.- | -..-> | -...-> |
Specialtecken
Du kan placera text inom citattecken för att rendera besvärligare tecken. Som i följande exempel:
Kopiera
Bädda in
flowchart LR
id1["This is the (text) in the box"]
Entitetskodning för att undvika tecken
Du kan undvika tecken med syntaxen i exemplet.
Kopiera
Bädda in
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
De angivna talen är decimala, så # kan kodas som #35. Användning av HTML-teckennamn stöds också.
Subgraf
Kopiera
Bädda in
subgraph title
graph definition
end
Här är ett exempel:
Kopiera
Bädda in
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Du kan också ange ett id för en subgraf.
Kopiera
Bädda in
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Flödesschema
Med diagram av typen flödesschema kan du också ange förbindelselinjer till och från subgrafer, som i följande flödesschema.
Kopiera
Bädda in
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 riktning
När du använder diagramtypen flödesschema kan du använda en riktningssats för att ange subgrafens renderingsriktning, som visas nedan:
Kopiera
Bädda in
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änsningar
Om någon nod i subgrafen är förbunden med omvärlden ignoreras subgrafens riktning. Annars ärver subgrafen den överordnade grafens riktning:
Kopiera
Bädda in
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-sträng
Markdown-strängar förbättrar flödesscheman och tankekartor genom att erbjuda en mer flexibel strängtyp, med stöd för textformateringsalternativ som fetstil och kursiv, samt möjlighet att automatiskt radbryta text inom etiketter.
Kopiera
Bädda in
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
- För att göra text fetstil, använd två asterisker (**) före och efter texten.
- Kursiv stil använder en enkel asterisk (*) före och efter texten.
- För traditionella strängar måste du lägga till en <br> -tagg för att texten ska radbrytas i noden. Markdown-strängar radbryter dock automatiskt när texten är för lång, och du behöver bara använda en radbrytning istället för en <br> -tagg för att börja en ny rad.
Denna funktion gäller för nodetiketter, förbindelselinjeetiketter och subgrafetiketter
Automatisk radbrytning kan inaktiveras med en specifik syntax
Kopiera
Bädda in
---
config:
markdownAutoWrap: false
---
graph LR
Kommentar
Du kan infoga kommentarer i ett flödesschema, och redigeraren ignorerar dessa kommentarer. En kommentar måste uppta en egen rad och börja med två procenttecken (%%). All text från kommentarens början till nästa rad betraktas som en kommentar, inklusive all flödessyntax.
Kopiera
Bädda in
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Stil och klass
Länkstil
Du kan ange länkstil. Till exempel kanske du vill utforma en länk som rör sig bakåt i flödet. Eftersom länkar inte har ID:n som noder, måste stilen för länken bestämmas på annat sätt. Använd ordningsnumret när länken definieras, eller använd standardvärdet för att tillämpa på alla länkar.
Kopiera
Bädda in
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Du kan också lägga till stil på flera länkar genom att separera länknumren med kommatecken i en och samma sats:
Kopiera
Bädda in
linkStyle 1,2,7 color:blue;
Ange kurvstil för förbindelselinjer
Om standardmetoden inte uppfyller dina behov kan du ange kurvstil för förbindelselinjer mellan objekt. Tillgängliga kurvstilar inkluderar basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter och stepBefore.
I följande exempel använder ett diagram från vänster till höger kurvstilen stepBefore .
Kopiera
Bädda in
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Ange nodstil
Du kan ange en specifik stil för en nod, till exempel en tjockare ram eller en annan bakgrundsfärg.
Kopiera
Bädda in
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
Klass
Istället för att definiera stilen varje gång är det bekvämare att definiera en stilklass och koppla denna klass till de noder som behöver ett annat utseende.
En klassdefinition ser ut så här:
Kopiera
Bädda in
classDef className fill:pink,stroke:#333,stroke-width:4px;
Dessutom kan du definiera stil för flera klasser i en och samma sats:
Kopiera
Bädda in
classDef firstClassName,secondClassName font-size:12pt;
Så här kopplar du en klass till en nod:
Kopiera
Bädda in
class nodeId1 className;
Du kan också koppla en klass till en lista av noder i en och samma sats:
Kopiera
Bädda in
class nodeId1,nodeId2 className;
Du kan lägga till en klass med operatorn ::: som kopplar klassnamnet till noden, som visas nedan:
Kopiera
Bädda in
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Denna form kan användas när du deklarerar flera länkar mellan noder:
Kopiera
Bädda in
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- I grafdeklarationer kan satser nu också avslutas utan semikolon. Efter version 0.2.16 är det bara valfritt att avsluta grafsatser med semikolon. Därför är följande grafdeklaration lika giltig som den gamla grafdeklarationen.
- Ett mellanslag tillåts mellan nod och länk. Det bör dock inte finnas något mellanslag mellan en nod och dess text eller mellan en länk och dess text. Den gamla grafdeklarationen är fortfarande giltig, så denna nya funktion är valfri och syftar till att förbättra läsbarheten.
Följande är den nya deklarationen av förbindelselinjer, som är lika giltig som den gamla deklarationen av förbindelselinjer.
Kopiera
Bädda in
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
