Mermaid flowchart syntax - Tutorial sa paggawa ng flowchart gamit ang Mermaid code

Pangunahing kahulugan

Ang flowchart ay binubuo ng mga node (geometric na hugis) at mga linya ng koneksyon (palaso o linya). Tinutukoy ng Mermaid code kung paano itinatayo ang mga node at linya ng koneksyon, at sinusuportahan ang iba't ibang uri ng palaso, multi-directional na palaso, at arbitraryong pagkakawing sa subgraph.

Babala Kung gumagamit ka ng salitang "end" sa isang flowchart node, i-capitalize ang unang titik o ang buong salita (halimbawa: "End" o "END"), ang pag-type ng "end" nang lahat maliit na titik ay magdudulot ng error sa flowchart.

Babala Kung sa pagkonekta ng flowchart node ay ginagamit mo ang letrang "o" o "x" bilang unang titik, magdagdag ng isang espasyo bago ang letra o i-capitalize ang letra (halimbawa: "dev--- ops", "dev---Ops").

Isang node (karaniwan)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                --- 
title: Node 
--- 
flowchart LR 
id

Impormasyon

Ang id ay ang nilalaman na ipinapakita sa loob ng kahon.

Tip

Sa syntax ng paggawa ng flowchart, bukod sa flowchart, maaari mo ring gamitin ang graph.

Isang node na may teksto

Maaari mo ring magtakda ng teksto para sa kahon na iba sa id. Kung gagawin mo ito nang maraming beses, gagamitin ng system ang huling tekstong tinukoy para sa node. Bukod dito, kung may tinukoy na linya ng koneksyon para sa node sa ibang pagkakataon, maaari mong alisin ang kahulugan ng teksto; gagamitin ng rendering ng kahon ang dating tinukoy na teksto.

Code

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

Unicode text

Gamitin ang double quotes upang i-wrap ang Unicode text.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR 
     id["This ❤ Unicode"]

Markdown format

Gamitin ang double quotes at backtick upang i-wrap ang Markdown text

Code

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

Direksyon

Idineklara ang direksyon ng flowchart

Nagsasaad na ang flowchart ay nakaayos mula itaas pababa (TD o TB)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    Start --> Stop

Kasama sa direksyon ng flowchart:

TB - Mula itaas pababa
TD - Mula itaas pababa (kapareho ng top to bottom)
BT - Mula ibaba pataas
RL - Mula kanan pakaliwa
LR - Mula kaliwa pakanan

Hugis ng node

Rounded rectangle

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1(This is the text in the box)

Hugis stadium

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1([This is the text in the box])

Subproseso

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1[[This is the text in the box]]

Database

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1[(Database)]

Bilog

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1((This is the text in the circle))

Asymmetric na hugis

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1>This is the text in the box]

Diamond

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1{This is the text in the box}

Hexagon

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1{{This is the text in the box}}

Parallelogram

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    id1[/This is the text in the box/]

Reverse parallelogram

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    id1[\This is the text in the box\]

Trapezoid

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A[/ProcessOn\]

Inverted trapezoid

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    B[\ProcessOn/]

Dobleng bilog

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    id1(((This is the text in the circle)))

Pagpapalawak ng hugis ng flowchart node sa Mermaid

Ipinakilala ng Mermaid ang 30 bagong hugis upang mapahusay ang flexibility at precision ng paggawa ng flowchart. Ang mga bagong hugis na ito ay nagbibigay ng mas maraming opsyon upang biswal na kumatawan sa proseso, desisyon, event, data storage, at iba pang elemento sa flowchart, upang mapabuti ang kalinawan at semantikong kahulugan.

Bagong syntax para sa pagtukoy ng hugis

Sinusuportahan na ngayon ng Mermaid ang isang generic na syntax upang tukuyin ang uri ng hugis, upang umangkop sa dumaraming hugis. Ang syntax na ito ay nagbibigay-daan sa iyo na tumukoy ng partikular na hugis para sa isang node gamit ang malinaw at flexible na format.

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            A@{ shape: rect }

Ginagawa ng syntax na ito ang node A bilang isang rectangle. Ang rendering nito ay kapareho ng [A] o A.

Kumpletong listahan ng hugis ng node

Narito ang kumpletong listahan ng mga bagong ipinakilalang hugis ng node kasama ang kani-kanilang kahulugan, maikling pangalan, at alias:

Semantikong pangalan	Graph syntax	Maikling pangalan ng syntax	Alternatibong syntax	Detalyadong paglalarawan
Card	Notched Rectangle	notch-rect	card, notched-rectangle	Kumakatawan sa isang card
Pagsasaayos	Hourglass	hourglass	collate	Kumakatawan sa operasyon ng pagsasaayos
Communication link	Lightning Bolt	bolt	com-link, lightning-bolt	Communication link
Komento	Curly Brace	brace	brace-l, comment	Magdagdag ng komento
Komento sa kanang bahagi	Curly Brace	brace-r		Magdagdag ng komento
Komento na may curly braces sa magkabilang gilid	Curly Braces	braces		Magdagdag ng komento
Data input o output	Lean Right	lean-r	in-out, lean-right	Kumakatawan sa input o output
Data input o output	Lean Left	lean-l	lean-left, out-in	Kumakatawan sa output o input
Database	Cylinder	cyl	cylinder, database, db	Database storage
Desisyon	Diamond	diam	decision, diamond, question	Hakbang ng desisyon
Delay	Half-Rounded Rectangle	delay	half-rounded-rectangle	Kumakatawan sa delay
Direct access storage	Horizontal Cylinder	h-cyl	das, horizontal-cylinder	Direct access storage
Disk storage	Lined Cylinder	lin-cyl	disk, lined-cylinder	Disk storage
Display	Curved Trapezoid	curv-trap	curved-trapezoid, display	Nagsasaad na ang impormasyon ay ipinapakita sa screen, terminal, at iba pang device
Split process	Divided Rectangle	div-rect	div-proc, divided-process, divided-rectangle	Hugis ng split process
Dokumento	Document	doc	document	Kumakatawan sa isang dokumento
Event	Rounded Rectangle	rounded	event	Kumakatawan sa isang event
Extract	Triangle	tri	extract, triangle	Proseso ng extract
Fork/merge	Filled Rectangle	fork	join	Fork o merge sa flowchart
Internal storage	Window Pane	win-pane	internal-storage, window-pane	Internal storage
Connection point	Filled Circle	f-circ	filled-circle, junction	Connection point
Dokumentong may linya	Lined Document	lin-doc	lined-document	Dokumentong may linya
Linya/shadow process	Lined Rectangle	lin-rect	lin-proc, lined-process, lined-rectangle, shaded-process	Hugis ng prosesong may linya
Loop limit	Trapezoidal Pentagon	notch-pent	loop-limit, notched-pentagon	Hakbang ng loop limit
Manual na file	Flipped Triangle	flip-tri	flipped-triangle, manual-file	Operasyon ng manual na file
Manual na input	Sloped Rectangle	sl-rect	manual-input, sloped-rectangle	Hakbang ng manual na input
Manual na operasyon	Trapezoid Base Top	trap-t	inv-trapezoid, manual, trapezoid-top	Kumakatawan sa isang manual na gawain
Maraming dokumento	Stacked Document	docs	documents, st-doc, stacked-document	多个文档
Maraming proseso	Stacked Rectangle	st-rect	processes, procs, stacked-rectangle	多个进程
Irregular na hugis	Odd	odd		Irregular na hugis
Paper tape	Flag	flag	paper-tape	Paper tape
Kondisyon ng paghahanda	Hexagon	hex	hexagon, prepare	Hakbang ng paghahanda o kondisyon
Priority action	Trapezoid Base Bottom	trap-b	priority, trapezoid, trapezoid-bottom	Priority action
Proseso	Rectangle	rect	proc, process, rectangle	Standard na hugis ng proseso
Simula	Circle	circle	circ	Start point
Simula	Small Circle	sm-circ	small-circle, start	Maliit na bilog na start point
Stop	Double Circle	dbl-circ	double-circle	Kumakatawan sa stop point
Stop	Framed Circle	fr-circ	framed-circle, stop	Kumakatawan sa stop point
Stored data	Bow Tie Rectangle	bow-rect	bow-tie-rectangle, stored-data	Stored data
Subproseso	Framed Rectangle	fr-rect	framed-rectangle, subproc, subprocess, subroutine	Subproseso, subroutine
Summary	Crossed Circle	cross-circ	crossed-circle, summary	Summary
Tagged na dokumento	Tagged Document	tag-doc	tagged-document	Tagged na dokumento
Standard na proseso	Tagged Rectangle	tag-rect	tag-proc, tagged-process, tagged-rectangle	已标准进程
End point	Stadium	stadium	pill, terminal	End point
Text block	Text Block	text		Text block

Narito ang halimbawa ng flowchart code gamit ang bagong ipinakilalang hugis:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                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"}

Proseso

Code

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

Event

Code

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

Subproseso

Code

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

Database (cylinder)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: cyl, label: "Database" }

Simula (bilog)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: circle, label: "Start" }

Irregular na hugis

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: odd, label: "Odd shape" }

Desisyon (diamond)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: diamond, label: "Decision" }

Kondisyon ng paghahanda (hexagon)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: hex, label: "Prepare conditional" }

Data input/output (nakatagilid sa kanan)

Code

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

Data input/output (nakatagilid sa kaliwa)

Code

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

Priority action (trapezoid)

Code

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

Manual na operasyon (inverted trapezoid)

Code

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

Stop (dobleng bilog)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: dbl-circ, label: "Stop" }

Text block

Code

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

Card (notched rectangle)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: notch-rect, label: "Card" }

Prosesong may linya/shadow

Code

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

Simula (maliit na bilog)

Code

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

Stop (bilog na may frame)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: framed-circle, label: "Stop" }

Fork/merge (mahabang rectangle)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: fork, label: "Fork or Join" }

Pagsasaayos (hourglass)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: hourglass, label: "Collate" }

Komento (curly brace)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: comment, label: "Comment" }

Kanang bahagi ng komento (curly brace sa kanan)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: brace-r, label: "Comment" }

Komento (may brace sa magkabilang gilid)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: braces, label: "Comment" }

Communication link (kidlat)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: bolt, label: "Communication link" }

Dokumento

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: doc, label: "Document" }

Delay (kalahating rounded rectangle)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: delay, label: "Delay" }

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

Code

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

Disk storage (cylinder na may slot)

Code

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

Display (hugis display)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: curv-trap, label: "Display" }

Split process (split rectangle)

Code

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

Extract (maliit na tatsulok)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: tri, label: "Extract" }

Internal storage (window panel)

Code

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

Connection point (solidong bilog)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
    A@{ shape: f-circ, label: "Connect" }

Dokumentong may linya

Code

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

Loop limit (notched pentagon)

Code

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

Manual na file (nakabaligtad na tatsulok)

Code

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

Manual na input (right trapezoid)

Code

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

Maraming dokumento (stacked na dokumento)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
   A@{ shape: docs, label: "Multi-document" }

Maraming proseso (stacked na rectangle)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
   A@{ shape: processes, label: "Multiple processes" }

Paper tape (bandila)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
   A@{ shape: flag, label: "Paper tape" }

Stored data (bow-tie rectangle)

Code

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

Summary (bilog na may cross)

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TD
   A@{ shape: cross-circ, label: "Summary" }

Tagged na dokumento

Code

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

Marked na proseso

Code

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

Espesyal na hugis sa Mermaid flowchart

Ipinakilala rin ng Mermaid ang mga larawan upang mapahusay ang iyong flowchart, na nagbibigay-daan sa iyo na direktang magsama ng mga larawan sa flowchart, upang magbigay ng mas maraming biswal na konteksto at kalinawan.

Hugis ng larawan

Maaari mong gamitin ang image upang magsingit ng larawan sa flowchart, ang syntax para sa pagtukoy ng larawan ay ang sumusunod:

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

Parameter

img: ang URL address ng larawang ipapakita.
label: ang text label na nauugnay sa larawan, maaaring maging anumang string. Kung hindi tinukoy, walang label na ipapakita.
pos: ang posisyon ng label. Kung hindi tinukoy, ang label ay magiging nasa ilalim ng larawan bilang default.
w: ang lapad ng larawan. Kung hindi tinukoy, magiging natural na lapad ng larawan bilang default.
h: ang taas ng larawan. Kung hindi tinukoy, magiging natural na taas ng larawan bilang default.
constraint: tinutukoy kung nililimitahan ng larawan ang laki ng node. Tinitiyak din ng setting na ito na pinapanatili ng larawan ang orihinal nitong aspect ratio, at inaayos ang taas batay sa lapad. Kung hindi tinukoy, ang default ay off .

Ang mga larawan ay nagbibigay ng karagdagang flexibility at visual appeal sa iyong flowchart, na ginagawa itong mas informative at kaakit-akit.

Koneksyon sa pagitan ng mga node

Maaaring konektado ang mga node sa pamamagitan ng mga linya ng koneksyon at palaso. May iba't ibang uri ng link, at maaari mo ring ilakip ang text string sa link.

Link na may palaso

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A-->B

Isang bukas na link

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A --- B

Link na may teksto

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A-- This is the text! ---B

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A --- | This is the text| B

Link na may palaso at teksto

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A-->|text|B

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A-- text -->B

Dashed na link

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A-.->B;

Dashed na link na may teksto

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A-. text .->B;

Makapal na link

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A ==> B

Makapal na link na may teksto

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A == |text| ==> B

Invisible na link

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A ~~~ B

Chained na koneksyon ng mga link

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A -- text --> B -- text2 --> C

Maaari mo ring ideklara ang maraming node link sa isang linya, tulad ng ipinapakita sa ibaba:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   a --> b & c--> d

Maaari mo ring ilarawan ang dependency, tulad ng sumusunod na code:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   a --> b & c--> d & e--> f

Kung gagamitin ang basic syntax upang ilarawan ang parehong graph, kakailanganin ng 8 linya. Paalala: ang labis na paggamit ng paraang ito ay maaaring gawing mas mahirap basahin ang Markdown-format na flowchart.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TB
   a --> b
   a --> c
   b --> d
   b --> e
   c --> d
   c --> e
   d --> f
   e --> f

Magdagdag ng ID sa linya ng koneksyon

Sinusuportahan na ngayon ng Mermaid ang pagdaragdag ng ID sa linya ng koneksyon, katulad ng paglakip ng ID at metadata sa mga node. Ang feature na ito ay naglalatag ng pundasyon para sa mas advanced na styling, class, at animation na feature sa linya ng koneksyon.

Syntax:

Upang magdagdag ng ID sa linya ng koneksyon, ilagay ang ID sa harap ng syntax ng linya ng koneksyon, na sinusundan agad ng @ character. Halimbawa:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A e1@--> B

Sa halimbawang ito, ang e1 ay ang ID ng linya ng koneksyon na nagkokonekta sa A at B. Maaari mong gamitin ang ID na ito sa mga kasunod na kahulugan o style statement, tulad ng paggamit ng node.

I-on ang animation

Pagkatapos magdagdag ng ID sa linya ng koneksyon, maaari mong i-on ang animation ng linya ng koneksyon sa pamamagitan ng pagtukoy ng mga property nito:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
   A e1@==> B
    e1@{ animate: true }

Sinasabi nito sa Mermaid na ang linya ng koneksyon e1 ay animated.

Pumili ng uri ng animation

Sa paunang bersyon, dalawang bilis ng animation ang sinusuportahan: fast at slow. Ang pagpili ng partikular na uri ng animation ay isang madaling paraan upang paganahin ang animation at itakda ang bilis nito nang sabay.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
  A e1@--> B
  e1@{ animation: fast }

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

Gamitin ang classDef statement para sa animation

Maaari mo ring gawing animated ang linya ng koneksyon sa pamamagitan ng pagtatalaga ng class sa linya ng koneksyon, pagkatapos ay pagtukoy ng animation property sa classDef statement. Halimbawa:

Code

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

Sa code na ito:

e1@--> 创建了一个 ID 为 e1 的连接线
Ang classDef animate ay tumutukoy ng class na pinangalanang animate, na may style at animation property.
Inilalapat ng class e1 animate ang animate class sa linya ng koneksyon e1.

Tandaan tungkol sa pag-escape ng kuwit: kapag nagtatakda ng stroke-dasharray property, tandaan na i-escape ang kuwit, dahil ang kuwit ay ginagamit bilang separator sa style definition ng Mermaid.

Bagong uri ng palaso

Sinusuportahan ang bagong uri ng palaso

Linya ng koneksyon na may solidong bilog
Linya ng koneksyon na may cross mark

Linya ng koneksyon na may solidong bilog

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A --o B

Linya ng koneksyon na may cross mark

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A --x B

Multi-directional na palaso

Maaaring gumamit ng multi-directional na palaso, halimbawa:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A o--o B
    B <--> C
    C x--x D

Haba ng linya ng koneksyon

Ang bawat node sa flowchart ay itinatalaga sa isang rank sa rendered na graph batay sa mga node na konektado nito, ibig sabihin, isang vertical o horizontal na level (depende sa direksyon ng flowchart). Bilang default, ang mga link ay maaaring sumaklaw sa anumang bilang ng rank, ngunit maaari mong hilingin na ang isang koneksyon ay mas mahaba kaysa sa iba sa pamamagitan ng pagdaragdag ng karagdagang gitling sa kahulugan ng koneksyon.

Sa halimbawang ito, may dalawang karagdagang gitling na idinagdag sa koneksyon mula node B hanggang node E, na ginagawa itong sumasaklaw ng dalawang rank na higit kaysa sa ordinaryong link:

Code

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

Tandaan: ang koneksyon ay maaaring mas mahaba kaysa sa hinihinging bilang ng rank ng rendering engine, upang umangkop sa iba pang kahilingan.

Kapag ang label ng koneksyon ay isinulat sa gitna ng koneksyon, kailangang magdagdag ng karagdagang gitling sa kanang bahagi ng koneksyon. Ang halimbawang ito ay katumbas ng naunang halimbawa:

Code

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

Para sa dotted na linya o makapal na link, ang karakter na idadagdag ay equal sign o tuldok, tulad ng ipinapakita sa talahanayan sa ibaba:

Haba	1	2	3
Ordinaryong koneksyon	---	----	-----
Ordinaryong koneksyon na may palaso	-->	--->	---->
Makapal na koneksyon	===	====	=====
Makapal na koneksyon na may palaso	==>	===>	====>
Dotted na linya	-.-	-..-	-...-
Dotted na linya na may palaso	-.-	-..->	-...->

Espesyal na karakter

Maaari mong ilagay ang teksto sa loob ng quotes upang i-render ang mas mahirap na mga karakter. Tulad ng ipinapakita sa ibaba:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    id1["This is the (text) in the box"]

Entity encoding para sa pag-escape ng karakter

Maaari mong i-escape ang mga karakter gamit ang syntax sa halimbawa.

Code

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

Ang ibinigay na numero ay decimal, kaya ang # ay maaaring i-encode bilang #35. Sinusuportahan din ang paggamit ng HTML character names.

Subgraph

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            subgraph title
    graph definition
end

Narito ang isang halimbawa:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Maaari ka ring magtakda ng id para sa subgraph.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

Tsart ng daloy

Gamit ang flowchart-type na chart, maaari mo ring itakda ang mga linya ng koneksyon paatras at mula sa subgraph, tulad ng flowchart sa ibaba.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                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

Direksyon ng subgraph

Kapag gumagamit ng flowchart type, maaari mong gamitin ang direction statement upang itakda ang rendering direction ng subgraph, tulad ng ipinapakita sa ibaba:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                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

Limitasyon

Kung ang alinman sa mga node ng subgraph ay konektado sa labas, ang direksyon ng subgraph ay hindi papansinin. Kung hindi, mamanahin ng subgraph ang direksyon ng parent graph:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                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 string

Ang Markdown string ay nagpapahusay sa flowchart at mind map sa pamamagitan ng pagbibigay ng mas flexible na uri ng string, sinusuportahan ang mga text format option tulad ng bold at italic, at may kakayahang awtomatikong mag-line break ng teksto sa loob ng label.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                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

Upang gawing bold ang teksto, gumamit ng dalawang asterisk (**) bago at pagkatapos ng teksto.
Ang italic ay gumagamit ng isang asterisk (*) na inilalagay bago at pagkatapos ng teksto.
Para sa traditional na string, kailangan mong magdagdag ng <br> tag upang makapag-line break ang teksto sa node. Gayunpaman, ang Markdown string ay awtomatikong nag-line break kapag masyadong mahaba ang teksto, at kailangan mo lang gumamit ng newline sa halip na <br> tag upang magsimula ng bagong linya.

Naaangkop ang feature na ito sa node label, linya ng koneksyon label, at subgraph label

Maaaring i-disable ang awtomatikong pag-line break sa pamamagitan ng paggamit ng partikular na syntax

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                ---
config:
  markdownAutoWrap: false
---
graph LR

Komento

Maaari kang maglagay ng komento sa flowchart, at hindi papansinin ng editor ang mga komentong ito. Ang komento ay kailangang sumakop sa isang buong linya, at dapat magsimula sa double percent sign (%%). Anumang teksto mula sa simula ng komento hanggang sa susunod na linya ay ituturing na komento, kabilang ang anumang flowchart syntax.

Code

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

Estilo at class

Estilo ng link

Maaari mong itakda ang estilo ng link. Halimbawa, maaaring gusto mong magdisenyo ng link na paatras sa proseso, dahil ang mga link ay walang ID tulad ng mga node, kailangang magpasya sa ibang paraan kung anong estilo ang dapat gamitin para sa link. Gamitin ang order number kapag nagtukoy ng link, o gamitin ang default na halaga upang ilapat sa lahat ng link.

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

Maaari ka ring magdagdag ng estilo sa maraming link sa pamamagitan ng paghihiwalay ng mga link number gamit ang kuwit sa isang statement:

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            linkStyle 1,2,7 color:blue;

Itakda ang curve style ng linya ng koneksyon

Kung ang default na paraan ay hindi nakakatugon sa iyong pangangailangan, maaari mong itakda ang curve style para sa mga linya ng koneksyon sa pagitan ng mga item. Kabilang sa mga available na curve style ang basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter, at stepBefore.

Sa halimbawa sa ibaba, ang isang left-to-right na chart ay gumagamit ng stepBefore curve style.

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
 graph LR

Itakda ang estilo ng node

Maaari kang magtakda ng partikular na estilo sa node, tulad ng mas makapal na border o ibang background color.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                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

Class

Mas madali kaysa sa pagtukoy ng estilo nang paulit-ulit ang pagtukoy ng isang style class at paglakip nito sa mga node na nangangailangan ng ibang hitsura.

Ang class definition ay tulad ng ipinapakita sa ibaba:

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            classDef className fill:pink,stroke:#333,stroke-width:4px;

Bukod dito, maaari ka ring magtukoy ng estilo para sa maraming class sa isang statement:

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            classDef firstClassName,secondClassName font-size:12pt;

Ang paglakip ng class sa isang node ay tulad ng sumusunod:

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            class nodeId1 className;

Maaari ka ring maglakip ng isang class sa isang listahan ng node sa isang statement:

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            class nodeId1,nodeId2 className;

Upang magdagdag ng class, maaari mong gamitin ang ::: operator upang ilakip ang class name sa node, tulad ng ipinapakita sa ibaba:

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

Maaaring gamitin ang form na ito kapag nagdedeklara ng maraming link sa pagitan ng mga node:

Code

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

Sa graph declaration, ang mga statement ay maaari na ngayong hindi magtapos sa semicolon. Pagkatapos ng bersyon 0.2.16, ang pagtatapos ng graph statement sa semicolon ay opsyonal lamang. Kaya, ang graph declaration sa ibaba ay kasing-bisa ng lumang graph declaration.
Isang espasyo ang pinapayagan sa pagitan ng vertex at link. Gayunpaman, dapat walang anumang espasyo sa pagitan ng vertex at ng teksto nito, at sa pagitan ng link at ng teksto nito. Ang lumang graph declaration ay valid pa rin, kaya ang bagong feature na ito ay opsyonal at naglalayong pagbutihin ang readability.

Narito ang bagong declaration ng linya ng koneksyon, na kasing-bisa ng lumang declaration ng linya ng koneksyon.

Code

                            
                                
                                    
                                    Kopyahin
                                
                                
                                    
                                    Embed
                                
                            
                            
                                flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Tsart ng daloySintaks

Pangunahing kahulugan

Isang node (karaniwan)

Isang node na may teksto

Unicode text

Markdown format

Direksyon

Hugis ng node

Rounded rectangle

Hugis stadium

Subproseso

Database

Bilog

Asymmetric na hugis

Diamond

Hexagon

Parallelogram

Reverse parallelogram

Trapezoid

Inverted trapezoid

Dobleng bilog

Pagpapalawak ng hugis ng flowchart node sa Mermaid

Kumpletong listahan ng hugis ng node

Proseso

Event

Subproseso

Database (cylinder)

Simula (bilog)

Irregular na hugis

Desisyon (diamond)

Kondisyon ng paghahanda (hexagon)

Data input/output (nakatagilid sa kanan)

Data input/output (nakatagilid sa kaliwa)

Priority action (trapezoid)

Manual na operasyon (inverted trapezoid)

Stop (dobleng bilog)

Text block

Card (notched rectangle)

Prosesong may linya/shadow

Simula (maliit na bilog)

Stop (bilog na may frame)

Fork/merge (mahabang rectangle)

Pagsasaayos (hourglass)

Komento (curly brace)

Kanang bahagi ng komento (curly brace sa kanan)

Komento (may brace sa magkabilang gilid)

Communication link (kidlat)

Dokumento

Delay (kalahating rounded rectangle)

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

Disk storage (cylinder na may slot)

Display (hugis display)

Split process (split rectangle)

Extract (maliit na tatsulok)

Internal storage (window panel)

Connection point (solidong bilog)

Dokumentong may linya

Loop limit (notched pentagon)

Manual na file (nakabaligtad na tatsulok)

Manual na input (right trapezoid)

Maraming dokumento (stacked na dokumento)

Maraming proseso (stacked na rectangle)

Paper tape (bandila)

Stored data (bow-tie rectangle)

Summary (bilog na may cross)

Tagged na dokumento

Marked na proseso

Espesyal na hugis sa Mermaid flowchart

Hugis ng larawan

Parameter

Koneksyon sa pagitan ng mga node

Link na may palaso

Isang bukas na link

Link na may teksto

Link na may palaso at teksto

Dashed na link

Dashed na link na may teksto

Makapal na link

Makapal na link na may teksto

Invisible na link