Register
Process Type
Graphical expression
Mind Type
Structured expression
Note Type
Efficient expression
Flowchart
Swimlane Diagram
BPMN
Venn Diagram
UML
Architecture Diagram
Network Topology Diagram
Circuit Diagram
Floor Plan
Chart
ER Diagram
Mind Map
Fishbone diagram
Timeline
Organizational Chart
Treemap
Bracket Diagram
Markdown
Default Mode

StroomdiagramSyntaxis

Basisdefinitie

Een stroomdiagram bestaat uit knooppunten (geometrische vormen) en verbindingslijnen (pijlen of lijnen). Mermaid-code definieert hoe knooppunten en verbindingslijnen worden opgebouwd, en ondersteunt meerdere pijltypen, meerrichtingspijlen en willekeurige links met subgrafen.

Waarschuwing Als je het woord "end" in een stroomdiagram-knooppunt gebruikt, schrijf dan de eerste letter of het hele woord in hoofdletters (bijvoorbeeld: "End" of "END"); als je alles in kleine letters "end" invoert, ontstaat er een fout in het stroomdiagram.

Waarschuwing Als je stroomdiagram-knooppunten verbindt en de letter "o" of "x" als eerste letter gebruikt, voeg dan een spatie voor de letter toe of schrijf de letter in hoofdletters (bijvoorbeeld: "dev--- ops", "dev---Ops").

Een knooppunt (standaard)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                --- 
title: Node 
--- 
flowchart LR 
id
Informatie

id is de inhoud die in het vak wordt weergegeven.

Tip

Naast flowchart kan voor de syntaxis voor het aanmaken van een stroomdiagram ook graph worden gebruikt.

Een knooppunt met tekst

Je kunt voor een vak ook tekst instellen die verschilt van de id. Als je dit meerdere keren doet, wordt de laatst opgegeven tekst voor dat knooppunt gebruikt. Bovendien kun je de tekstdefinitie weglaten als je later een verbindingslijn voor het knooppunt definieert; bij het renderen van het vak wordt dan de eerder gedefinieerde tekst gebruikt.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                --- 
title: Node with text 
--- 
flowchart LR 
    id1[This is the text in the box]

Unicode-tekst

Omsluit Unicode-tekst met dubbele aanhalingstekens.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR 
     id["This ❤ Unicode"]

Markdown-indeling

Omsluit Markdown-tekst met dubbele aanhalingstekens en backticks

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

Richting

Declareert de richting van het stroomdiagram

Geeft aan dat het stroomdiagram van boven naar beneden wordt gerangschikt (TD of TB)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    Start --> Stop

De richtingen van een stroomdiagram zijn:

  • TB - van boven naar beneden
  • TD - van boven naar beneden (hetzelfde als van boven naar beneden)
  • BT - van beneden naar boven
  • RL - van rechts naar links
  • LR - van links naar rechts

Knooppuntvorm

Afgeronde rechthoek

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1(This is the text in the box)

Stadionvorm

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1([This is the text in the box])

Subproces

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1[[This is the text in the box]]

Database

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1[(Database)]

Cirkel

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1((This is the text in the circle))

Asymmetrische vorm

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1>This is the text in the box]

Ruit

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1{This is the text in the box}

Zeshoek

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1{{This is the text in the box}}

Parallellogram

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    id1[/This is the text in the box/]

Omgekeerd parallellogram

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    id1[\This is the text in the box\]

Trapezium

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A[/ProcessOn\]

Omgekeerd trapezium

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    B[\ProcessOn/]

Dubbele cirkel

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    id1(((This is the text in the circle)))

Uitbreiding van knooppuntvormen in Mermaid-stroomdiagrammen

Mermaid introduceert 30 nieuwe vormen om de flexibiliteit en precisie bij het maken van stroomdiagrammen te vergroten. Deze nieuwe vormen bieden meer opties om processen, beslissingen, gebeurtenissen, gegevensopslag en andere elementen in een stroomdiagram visueel weer te geven, waardoor de duidelijkheid en semantische betekenis verbeteren.

Nieuwe syntaxis voor het definiëren van vormen

Mermaid ondersteunt nu een algemene syntaxis om vormtypen te definiëren, om in te spelen op het groeiende aantal vormen. Deze syntaxis laat je een specifieke vorm aan een knooppunt toewijzen met een duidelijke en flexibele notatie. 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            A@{ shape: rect }

Deze syntaxis maakt knooppunt A als een rechthoek. Het wordt op dezelfde manier gerenderd als [A] of A.

Volledige lijst met knooppuntvormen

Hieronder volgt een volledige lijst van de nieuw geïntroduceerde knooppuntvormen met hun bijbehorende betekenis, afkorting en aliassen:

Semantische naam Grafieksyntaxis Syntaxisafkorting Syntaxisalternatief Gedetailleerde beschrijving
Kaart Notched Rectangle notch-rect card, notched-rectangle Geeft een kaart weer
Sorteren Hourglass hourglass collate Geeft een sorteerbewerking weer
Communicatielink Lightning Bolt bolt com-link, lightning-bolt Communicatielink
Opmerking Curly Brace brace brace-l, comment Opmerking toevoegen
Opmerking aan de rechterkant Curly Brace brace-r Opmerking toevoegen
Opmerking met accolades aan beide zijden Curly Braces braces Opmerking toevoegen
Gegevensinvoer of -uitvoer Lean Right lean-r in-out, lean-right Geeft invoer of uitvoer weer
Gegevensinvoer of -uitvoer Lean Left lean-l lean-left, out-in Geeft uitvoer of invoer weer
Database Cylinder cyl cylinder, database, db Databaseopslag
Beslissing Diamond diam decision, diamond, question Beslissingsstap
Vertraging Half-Rounded Rectangle delay half-rounded-rectangle Geeft een vertraging weer
Directe toegankelijke opslag Horizontal Cylinder h-cyl das, horizontal-cylinder Directe toegankelijke opslag
Schijfopslag Lined Cylinder lin-cyl disk, lined-cylinder Schijfopslag
Weergave Curved Trapezoid curv-trap curved-trapezoid, display Geeft aan dat informatie wordt weergegeven op apparaten zoals een scherm of terminal
Gesplitste verwerking Divided Rectangle div-rect div-proc, divided-process, divided-rectangle Vorm voor gesplitste verwerking
Document Document doc document Geeft een document weer
Gebeurtenis Rounded Rectangle rounded event Geeft een gebeurtenis weer
Extraheren Triangle tri extract, triangle Extractieproces
Vertakken/Samenvoegen Filled Rectangle fork join Vertakking of samenvoeging in een stroomdiagram
Interne opslag Window Pane win-pane internal-storage, window-pane Interne opslag
Verbindingspunt Filled Circle f-circ filled-circle, junction Verbindingspunt
Document met lijn Lined Document lin-doc lined-document Document met lijn
Lijn-/schaduwproces Lined Rectangle lin-rect lin-proc, lined-process, lined-rectangle, shaded-process Procesvorm met lijnen
Luslimiet Trapezoidal Pentagon notch-pent loop-limit, notched-pentagon Stap voor luslimiet
Handmatig bestand Flipped Triangle flip-tri flipped-triangle, manual-file Handmatige bestandsbewerking
Handmatige invoer Sloped Rectangle sl-rect manual-input, sloped-rectangle Stap voor handmatige invoer
Handmatige bewerking Trapezoid Base Top trap-t inv-trapezoid, manual, trapezoid-top Geeft een handmatige taak weer
Meerdere documenten Stacked Document docs documents, st-doc, stacked-document 多个文档
Meerdere processen Stacked Rectangle st-rect processes, procs, stacked-rectangle 多个进程
Onregelmatige vorm Odd odd Onregelmatige vorm
Papierband Flag flag paper-tape Papierband
Voorwaarde voorbereiden Hexagon hex hexagon, prepare Voorbereidings- of voorwaardestap
Prioriteitsactie Trapezoid Base Bottom trap-b priority, trapezoid, trapezoid-bottom Prioriteitsactie
Verwerking Rectangle rect proc, process, rectangle Standaard procesvorm
Start Circle circle circ Startpunt
Start Small Circle sm-circ small-circle, start Kleine cirkel als startpunt
Stop Double Circle dbl-circ double-circle Geeft een stoppunt weer
Stop Framed Circle fr-circ framed-circle, stop Geeft een stoppunt weer
Gegevens opslaan Bow Tie Rectangle bow-rect bow-tie-rectangle, stored-data Gegevens opslaan
Subproces Framed Rectangle fr-rect framed-rectangle, subproc, subprocess, subroutine Subproces, subroutine
Samenvatting Crossed Circle cross-circ crossed-circle, summary Samenvatting
Gelabeld document Tagged Document tag-doc tagged-document Gelabeld document
Gestandaardiseerd proces Tagged Rectangle tag-rect tag-proc, tagged-process, tagged-rectangle 已标准进程
Eindpunt Stadium stadium pill, terminal Eindpunt
Tekstblok Text Block text Tekstblok

Hieronder volgt een codevoorbeeld van een stroomdiagram dat de nieuw geïntroduceerde vormen gebruikt:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                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

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: rect, label: "This is a process" }

Gebeurtenis

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: rounded, label: "This is an event" }

Subproces

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: subproc, label: "This is a subprocess" }

Database (cilinder)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: cyl, label: "Database" }

Start (cirkelvormig)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: circle, label: "Start" }

Onregelmatige vorm

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: odd, label: "Odd shape" }

Beslissing (ruit)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: diamond, label: "Decision" }

Voorwaarde voorbereiden (zeshoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: hex, label: "Prepare conditional" }

Gegevensinvoer/-uitvoer (naar rechts hellend)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: lean-r, label: "Input/Output" }

Gegevensinvoer/-uitvoer (naar links hellend)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: lean-l, label: "Input/Output" }

Prioriteitsactie (trapezium)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: trap-b, label: "Priority action" }

Handmatige bewerking (omgekeerd trapezium)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: trap-t, label: "Manual operation" }

Stop (dubbele cirkel)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: dbl-circ, label: "Stop" }

Tekstblok

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: text, label: "This is a text block" }

Kaart (rechthoek met inkeping)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: notch-rect, label: "Card" }

Proces met lijn/schaduw

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: lin-rect, label: "Lined process" }

Start (kleine cirkel)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: sm-circ, label: "Small start" }

Stop (cirkel met kader)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: framed-circle, label: "Stop" }

Vertakken/samenvoegen (lange rechthoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: fork, label: "Fork or Join" }

Sorteren (zandloper)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: hourglass, label: "Collate" }

Opmerking (accolades)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: comment, label: "Comment" }

Opmerking aan de rechterkant (accolade aan de rechterkant)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: brace-r, label: "Comment" }

Opmerking (met haakjes aan beide zijden)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: braces, label: "Comment" }

Communicatielink (bliksem)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: bolt, label: "Communication link" }

Document

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: doc, label: "Document" }

Vertraging (half afgeronde rechthoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: delay, label: "Delay" }

直接存取存储（水平圆柱）

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: das, label: "Direct access to storage" }

Schijfopslag (cilinder met groeven)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: lin-cyl, label: "Disk storage" }

Weergave (weergavevorm)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: curv-trap, label: "Display" }

Gesplitste verwerking (gesplitste rechthoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: div-rect, label: "Divided process" }

Extraheren (kleine driehoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: tri, label: "Extract" }

Interne opslag (vensterpaneel)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: win-pane, label: "Internal storage" }

Verbindingspunt (massieve cirkel)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A@{ shape: f-circ, label: "Connect" }

Document met lijn

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: lin-doc, label: "Lined document" }

Luslimiet (vijfhoek met inkeping)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: notch-pent, label: "Loop limit" }

Handmatig bestand (omgekeerde driehoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: flip-tri, label: "Manual file" }

Handmatige invoer (rechthoekig trapezium)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: sl-rect, label: "Manual input" }

Meerdere documenten (gestapelde documenten)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: docs, label: "Multi-document" }

Meerdere processen (gestapelde rechthoeken)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: processes, label: "Multiple processes" }

Papierband (vlag)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: flag, label: "Paper tape" }

Gegevens opslaan (strikrechthoek)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: bow-rect, label: "Data stored" }

Samenvatting (cirkel met kruis)

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: cross-circ, label: "Summary" }

Gelabeld document

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: tag-doc, label: "Tagged document" }

Gemarkeerd proces

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
   A@{ shape: tag-rect, label: "Tagged process" }

Speciale vormen in Mermaid-stroomdiagrammen

Mermaid introduceert ook afbeeldingen om je stroomdiagrammen te verrijken, waardoor je afbeeldingen direct in een stroomdiagram kunt opnemen en zo meer visuele context en duidelijkheid biedt.

Afbeeldingsvorm

Je kunt image gebruiken om een afbeelding in een stroomdiagram in te voegen. De syntaxis voor het definiëren van een afbeelding is als volgt: 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            flowchart TD
   A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }

Parameter

  • img: de URL van de weer te geven afbeelding.
  • label: het tekstlabel dat aan de afbeelding is gekoppeld; dit kan elke tekenreeks zijn. Als het niet is gedefinieerd, wordt geen label weergegeven.
  • pos: de positie van het label. Als het niet is gedefinieerd, staat het label standaard onderaan de afbeelding.
  • w: de breedte van de afbeelding. Als het niet is gedefinieerd, wordt standaard de natuurlijke breedte van de afbeelding gebruikt.
  • h: de hoogte van de afbeelding. Als het niet is gedefinieerd, wordt standaard de natuurlijke hoogte van de afbeelding gebruikt.
  • constraint: bepaalt of de afbeelding de grootte van het knooppunt beperkt. Deze instelling zorgt er ook voor dat de afbeelding de oorspronkelijke beeldverhouding behoudt en de hoogte aanpast op basis van de breedte. Als het niet is gedefinieerd, is de standaardwaarde off.

Afbeeldingen bieden extra flexibiliteit en visuele aantrekkingskracht voor je stroomdiagrammen, waardoor ze informatiever en aantrekkelijker worden.

Verbindingen tussen knooppunten

Knooppunten kunnen worden verbonden met verbindingslijnen en pijlen. Er zijn verschillende soorten links, en je kunt ook tekstreeksen aan een link toevoegen.

Link met pijl

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A-->B

Een open link

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A --- B

Link met tekst

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A-- This is the text! ---B

of

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A --- | This is the text| B

Link met pijl en tekst

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A-->|text|B

of

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A-- text -->B

Streeplijnlink

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A-.->B;

Streeplijnlink met tekst

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A-. text .->B;

Dikke link

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A ==> B

Dikke link met tekst

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A == |text| ==> B

Onzichtbare link

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A ~~~ B

Geketende verbinding van links

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A -- text --> B -- text2 --> C

Je kunt ook meerdere knooppuntlinks op dezelfde regel declareren, zoals hieronder weergegeven:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   a --> b & c--> d

Je kunt ook afhankelijkheden beschrijven, zoals in de onderstaande code:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   a --> b & c--> d & e--> f

Als je dezelfde grafiek met de basissyntaxis beschrijft, zijn 8 regels nodig. Onthoud dat overmatig gebruik van deze methode het in Markdown-formaat geschreven stroomdiagram moeilijker leesbaar kan maken.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TB
   a --> b
   a --> c
   b --> d
   b --> e
   c --> d
   c --> e
   d --> f
   e --> f

Een ID toevoegen aan een verbindingslijn

Mermaid ondersteunt nu het toevoegen van een ID aan een verbindingslijn, vergelijkbaar met het toevoegen van een ID en metadata aan een knooppunt. Deze functie legt de basis voor geavanceerdere styling-, klasse- en animatiefuncties op verbindingslijnen.

Syntaxis:

Om een ID aan een verbindingslijn toe te voegen, zet je de ID voor de syntaxis van de verbindingslijn, direct gevolgd door het teken @. Bijvoorbeeld:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A e1@--> B

In dit voorbeeld is e1 de ID van de verbindingslijn die A en B verbindt. Je kunt deze ID in latere definities of stijlverklaringen gebruiken, net als bij een knooppunt.

Animatie inschakelen

Nadat je een ID aan een verbindingslijn hebt toegevoegd, kun je de animatie van de verbindingslijn inschakelen door de eigenschappen van de verbindingslijn te definiëren:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A e1@==> B
    e1@{ animate: true }

Dit vertelt Mermaid dat de verbindingslijn e1 geanimeerd is.

Animatietype kiezen

In de eerste versie worden twee animatiesnelheden ondersteund: fast en slow. Het kiezen van een specifiek animatietype is een eenvoudige manier om de animatie in te schakelen en de animatiesnelheid in één keer in te stellen.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
  A e1@--> B
  e1@{ animation: fast }

这相当于 e1@{ animate: true, animation: fast }。

Animeren met de classDef-verklaring

Je kunt ook een animatie aan een verbindingslijn toevoegen door een klasse aan de verbindingslijn toe te wijzen en vervolgens de animatie-eigenschappen in een classDef-verklaring te definiëren. Bijvoorbeeld:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate

In deze code:

  • e1@--> 创建了一个 ID 为 e1 的连接线
  • classDef animate definieert een klasse met de naam animate, met stijl- en animatie-eigenschappen.
  • class e1 animate past de klasse animate toe op de verbindingslijn e1.

Opmerking over het escapen van komma's: bij het instellen van de eigenschap stroke-dasharray moet je eraan denken de komma te escapen, omdat de komma in Mermaid-stijldefinities als scheidingsteken wordt gebruikt.

Nieuw pijltype

Ondersteunt nieuwe pijltypen

  • Verbindingslijn met een massieve cirkel
  • Verbindingslijn met een kruismarkering

Verbindingslijn met een massieve cirkel

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A --o B

Verbindingslijn met een kruismarkering

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A --x B

Meerrichtingspijl

Je kunt meerrichtingspijlen gebruiken, bijvoorbeeld:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A o--o B
    B <--> C
    C x--x D

Lengte van de verbindingslijn

Elk knooppunt in een stroomdiagram krijgt op basis van de knooppunten waarmee het is verbonden een rang toegewezen in de gerenderde grafiek, dat wil zeggen een verticaal of horizontaal niveau (afhankelijk van de richting van het stroomdiagram). Standaard kan een link een willekeurig aantal niveaus overspannen, maar je kunt een verbinding langer maken dan andere door extra streepjes aan de verbindingsdefinitie toe te voegen.

In dit voorbeeld zijn twee extra streepjes toegevoegd aan de verbinding van knooppunt B naar knooppunt E, waardoor deze twee niveaus meer overspant dan een gewone link:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
Opmerking: een verbinding kan langer zijn dan het aantal niveaus dat de rendering-engine heeft aangevraagd, om aan andere verzoeken te voldoen.

Wanneer een verbindingslabel in het midden van de verbinding wordt geschreven, moeten extra streepjes aan de rechterkant van de verbinding worden toegevoegd. Dit voorbeeld is gelijk aan het vorige voorbeeld:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

Voor streeplijnen of dikke links is het toe te voegen teken een gelijkteken of punt, zoals weergegeven in de onderstaande tabel:

Lengte 1 2 3
Normale verbinding --- ---- -----
Normale verbinding met pijl --> ---> ---->
Dikke verbinding === ==== =====
Dikke verbinding met pijl ==> ===> ====>
Stippellijn -.- -..- -...-
Stippellijn met pijl -.- -..-> -...->

Speciale tekens

Je kunt tekst tussen aanhalingstekens plaatsen om lastigere tekens te renderen. Zoals in het onderstaande voorbeeld:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    id1["This is the (text) in the box"]

Entiteitscodering voor het escapen van tekens

Met de syntaxis van het voorbeeld kunnen tekens worden geëscaped.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
   A["A double quote:#quot;"] --> B["A dec char:#9829;"]

De gegeven getallen zijn decimaal, dus # kan worden gecodeerd als #35. Het gebruik van HTML-tekennamen wordt ook ondersteund.

Subgraaf 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            subgraph title
    graph definition
end

Hieronder volgt een voorbeeld:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Je kunt ook een id voor de subgraaf instellen.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

Stroomdiagram

Met grafiektypen van het type stroomdiagram kun je ook verbindingslijnen naar en van subgrafen instellen, zoals in het onderstaande stroomdiagram.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                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

Richting van de subgraaf

Bij gebruik van het type stroomdiagram kun je de richting van de weergave van de subgraaf instellen met een richtingsverklaring, zoals hieronder weergegeven:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                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

Beperkingen

Als een knooppunt van de subgraaf met de buitenkant is verbonden, wordt de richting van de subgraaf genegeerd. Anders erft de subgraaf de richting van de bovenliggende grafiek:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                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-tekenreeks

Markdown-tekenreeksen verrijken stroomdiagrammen en mindmaps door een flexibeler tekenreekstype te bieden, met ondersteuning voor tekstopmaakopties zoals vet en cursief, en de mogelijkheid om tekst binnen een label automatisch af te breken.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                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
  • Om tekst vet te maken, gebruik je twee sterretjes (**) voor en na de tekst.
  • Voor cursief gebruik je een enkel sterretje (*) voor en na de tekst.
  • Voor traditionele tekenreeksen moet je een <br>-tag toevoegen om tekst in een knooppunt af te breken. Markdown-tekenreeksen breken tekst echter automatisch af wanneer deze te lang is, en je kunt een nieuwe regel beginnen met alleen een regeleinde in plaats van een <br>-tag.

Deze functie is van toepassing op knooppuntlabels, verbindingslijnlabels en subgraaflabels

Automatische afbreking kan worden uitgeschakeld met een specifieke syntaxis

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                ---
config:
  markdownAutoWrap: false
---
graph LR

Opmerking

Je kunt opmerkingen in een stroomdiagram invoeren; de editor negeert deze opmerkingen. Opmerkingen moeten op een eigen regel staan en moeten beginnen met een dubbel procentteken (%%). Alle tekst vanaf het begin van de opmerking tot de volgende regel wordt als opmerking beschouwd, inclusief eventuele stroomdiagram-syntaxis.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
 %% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

Stijlen en klassen

Linkstijl

Je kunt de stijl van een link instellen. Je wilt bijvoorbeeld een link vormgeven die in de stroom teruggaat. Omdat links, anders dan knooppunten, geen ID hebben, moet je op een andere manier bepalen welke stijl een link moet gebruiken. Gebruik het volgnummer dat wordt toegewezen bij het definiëren van de link, of gebruik de standaardwaarde die op alle links wordt toegepast. 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

Je kunt ook stijlen aan meerdere links toevoegen door de linknummers in één verklaring met komma's te scheiden: 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            linkStyle 1,2,7 color:blue;

De curve-stijl van verbindingslijnen instellen

Als de standaardmethode niet aan je behoeften voldoet, kun je de curve-stijl van verbindingslijnen tussen items instellen. Beschikbare curve-stijlen zijn basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter en stepBefore.

In het onderstaande voorbeeld gebruikt een diagram van links naar rechts de curve-stijl stepBefore. 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
 graph LR

Knooppuntstijl instellen

Je kunt een specifieke stijl aan een knooppunt toewijzen, bijvoorbeeld een dikkere rand of een andere achtergrondkleur.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                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

Handiger dan elke keer een stijl te definiëren is het definiëren van een stijlklasse en deze klasse toe te voegen aan knooppunten die er anders moeten uitzien.

Een klassendefinitie ziet er als volgt uit: 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            classDef className fill:pink,stroke:#333,stroke-width:4px;

Bovendien kun je in één verklaring stijlen voor meerdere klassen definiëren: 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            classDef firstClassName,secondClassName font-size:12pt;

Het toevoegen van een klasse aan een knooppunt gaat als volgt: 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            class nodeId1 className;

Je kunt in één verklaring ook een klasse aan een lijst met knooppunten toevoegen: 

                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            class nodeId1,nodeId2 className;

Het toevoegen van een klasse kan met de operator ::: om de klassenaam aan een knooppunt toe te voegen, zoals hieronder weergegeven:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

Deze vorm kan worden gebruikt bij het declareren van meerdere links tussen knooppunten:

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

  • In grafiekverklaringen hoeven verklaringen nu ook niet meer met een puntkomma te eindigen. Na versie 0.2.16 is het eindigen van een grafiekverklaring met een puntkomma slechts optioneel. Daarom is de onderstaande grafiekverklaring net zo geldig als de oude.
  • Tussen hoekpunten en links is één spatie toegestaan. Tussen een hoekpunt en zijn tekst, en tussen een link en zijn tekst, mag echter geen spatie staan. De oude grafiekverklaringen blijven ook geldig, dus deze nieuwe functie is optioneel en bedoeld om de leesbaarheid te verbeteren.

Hieronder volgt de nieuwe declaratie van een verbindingslijn, die net als de oude declaratie geldig is.

Code 
                            

                                

                                    
                                    Kopiëren
                                

                                

                                    
                                    Insluiten
                                

                            

                            
                                flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Volgende：Sequencediagram