所有流程圖都由節(jié)點、幾何形狀和邊緣碴裙、箭頭或線條組成心软。代碼圖定義了這些節(jié)點和邊的制作和交互方式叠穆。
它還可以容納不同的箭頭類型、多向箭頭以及與子圖的鏈接愿棋。
重要提示：請勿將“end”一詞鍵入為流程圖節(jié)點。將所有或任何一個字母大寫以防止流程圖中斷，即“End”或“END”西剥。
flowchart?LR
????id
id
注意id 是框中顯示的內(nèi)容。
也可以在不同于 id 的框中設置文本亿汞。如果多次這樣做瞭空，它將是為將使用的節(jié)點找到的最后一個文本。此外疗我，如果您稍后為節(jié)點定義邊咆畏，則可以省略文本定義。渲染框時將使用先前定義的那個吴裤。
flowchart?LR
????id1[This?is?the?text?in?the?box]
This is the text in the box
該語句聲明了流程圖的方向旧找。
這聲明流程圖從上到下（TD或TB）定向。
flowchart?TD
????Start?-->?Stop
StartStop
這表明流程圖是從左到右的（LR）嚼摩。
flowchart?LR
????Start?-->?Stop
StartStop
可能的流程圖方向是：
TB - 從上到下
TD - 自上而下/與自上而下相同
BT - 自下而上
RL - 從右到左
LR——從左到右
flowchart?LR
????id1(This?is?the?text?in?the?box)
This is the text in the box
flowchart?LR
????id1([This?is?the?text?in?the?box])
This is the text in the box
flowchart?LR
????id1[[This?is?the?text?in?the?box]]
This is the text in the box
flowchart?LR
????id1[(Database)]
Database
flowchart?LR
????id1((This?is?the?text?in?the?circle))
This is the text in the circle
flowchart?LR
????id1>This?is?the?text?in?the?box]
This is the text in the box
目前只有上面的形狀是可能的钦讳，而不是它的鏡子。這可能會隨著未來的版本而改變枕面。
flowchart?LR
????id1{This?is?the?text?in?the?box}
This is the text in the box
flowchart?LR
????id1{{This?is?the?text?in?the?box}}
This is the text in the box
flowchart?TD
????id1[/This?is?the?text?in?the?box/]
This is the text in the box
flowchart?TD
????id1[\This?is?the?text?in?the?box\]
This is the text in the box
flowchart?TD
????A[/Christmas\]
Christmas
flowchart?TD
????B[\Go?shopping/]
Go shopping
flowchart?TD
????id1(((This?is?the?text?in?the?circle)))
This is the text in the circle
節(jié)點可以與鏈接/邊連接愿卒。可以有不同類型的鏈接或將文本字符串附加到鏈接潮秘。
flowchart?LR
????A-->B
AB
flowchart?LR
????A?---?B
AB
flowchart?LR
????A--?This?is?the?text!?---B
This is the text!AB
或者
flowchart?LR
????A---|This?is?the?text|B
This is the textAB
flowchart?LR
????A-->|text|B
textAB
或者
flowchart?LR
????A--?text?-->B
textAB
flowchart?LR;
???A-.->B;
AB
flowchart?LR
???A-.?text?.->?B
textAB
flowchart?LR
???A?==>?B
AB
flowchart?LR
???A?==?text?==>?B
textAB
可以在同一行中聲明許多鏈接琼开，如下所示：
flowchart?LR
???A?--?text?-->?B?--?text2?-->?C
texttext2ABC
也可以在同一行中聲明多個節(jié)點鏈接，如下所示：
flowchart?LR
???a?-->?b?&?c-->?d
abcd
然后枕荞，您可以以非常有表現(xiàn)力的方式描述依賴關系柜候。就像下面的單線：
flowchart?TB
????A?&?B-->?C?&?D
ABCD
如果您使用基本語法描述相同的圖表，則需要四行躏精。警告一句渣刷，這可能會使流程圖更難以降價形式閱讀。瑞典詞lagom浮現(xiàn)在腦海矗烛。這意味著辅柴，不要太多也不要太少。這也適用于表達性語法瞭吃。
flowchart?TB
????A?-->?C
????A?-->?D
????B?-->?C
????B?-->?D
支持以下新類型的箭頭：
flowchart?LR
????A?--o?B
????B?--x?C
ABC
可以使用多向箭頭碌嘀。
flowchart?LR
????A?o--o?B
????B?<-->?C
????C?x--x?D
ABCD
流程圖中的每個節(jié)點最終都根據(jù)其鏈接到的節(jié)點被分配到渲染圖中的等級，即垂直或水平級別（取決于流程圖方向）歪架。默認情況下股冗，鏈接可以跨越任意數(shù)量的等級，但您可以通過在鏈接定義中添加額外的破折號來要求任何鏈接比其他鏈接更長和蚪。
在以下示例中止状，在從節(jié)點B?到節(jié)點E的鏈接中添加了兩個額外的破折號烹棉，因此它比常規(guī)鏈接多兩個等級：
flowchart?TD
????A[Start]?-->?B{Is?it?}
????B?-->|Yes|?C[OK]
????C?-->?D[Rethink]
????D?-->?B
????B?---->|No|?E[End]
YesNoStartIs it?OKRethinkEnd
注意鏈接可能仍會比渲染引擎請求的等級數(shù)更長，以適應其他請求怯疤。
當鏈接標簽寫在鏈接中間時峦耘，額外的破折號必須添加在鏈接的右側。以下示例與上一個示例等效：
flowchart?TD
????A[Start]?-->?B{Is?it?}
????B?--?Yes?-->?C[OK]
????C?-->?D[Rethink]
????D?-->?B
????B?--?No?---->?E[End]
YesNoStartIs it?OKRethinkEnd
對于點鏈接或粗鏈接旅薄，要添加的字符是等號或點，如下表所示：
長度123
普通的------------
正常帶箭頭-->--->---->
厚的============
粗帶箭頭==>===>====>
點綴-.--..--...-
點綴箭頭-.->-..->-...->
可以將文本放在引號內(nèi)以呈現(xiàn)更麻煩的字符泣崩。如下例所示：
flowchart?LR
????id1["This?is?the?(text)?in?the?box"]
This is the (text) in the box
可以使用此處示例的語法來轉義字符少梁。
????flowchart?LR
????????A["A?double?quote:#quot;"]?-->B["A?dec?char:#9829;"]
A double quote:"A dec char:?
給出的數(shù)字以 10 為底，因此#可以編碼為#35;.?還支持使用 HTML 字符名稱矫付。
subgraph title
? ? graph definition
end
下面的一個例子：
flowchart?TB
????c1-->a2
????subgraph?one
????a1-->a2
????end
????subgraph?two
????b1-->b2
????end
????subgraph?three
????c1-->c2
????end
threeonec2c1twob2b1a2a1
您還可以為子圖設置顯式 id凯沪。
flowchart?TB
????c1-->a2
????subgraph?ide1?[one]
????a1-->a2
????end
onea2a1c1
使用 graphtype 流程圖，還可以設置與子圖之間的邊买优，如下面的流程圖所示妨马。
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
threeonec2c1twob2b1a2a1
使用 graphtype 流程圖，您可以使用方向語句來設置子圖將呈現(xiàn)的方向杀赢，如本例所示烘跺。
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
TOPB1f1i1B2f2i2AB
可以將單擊事件綁定到節(jié)點，單擊可以導致 javascript 回調(diào)或將在新瀏覽器選項卡中打開的鏈接脂崔。注意：此功能在使用時禁用滤淳，在使用時securityLevel='strict'啟用securityLevel='loose'。
click nodeId callback
click nodeId call callback()
nodeId 是節(jié)點的id
callback 是在顯示圖形的頁面上定義的 javascript 函數(shù)的名稱砌左，該函數(shù)將以 nodeId 作為參數(shù)被調(diào)用脖咐。
下面的工具提示用法示例：
<script>varcallback=function(){alert('A callback was triggered');};</script>
工具提示文本用雙引號括起來。工具提示的樣式由類設置.mermaidTooltip汇歹。
flowchart?LR
????A-->B
????B-->C
????C-->D
????click?A?callback?"Tooltip?for?a?callback"
????click?B?"https://www.github.com"?"This?is?a?tooltip?for?a?link"
????click?A?call?callback()?"Tooltip?for?a?callback"
????click?B?href?"https://www.github.com"?"This?is?a?tooltip?for?a?link"
ABCD
默認情況下屁擅，鏈接在同一瀏覽器選項卡/窗口中打開〔可以通過將鏈接目標添加到點擊定義來更改此設置（支持_self,_blank和）：_parent_top
flowchart?LR
????A-->B
????B-->C
????C-->D
????D-->E
????click?A?"https://www.github.com"?_blank
????click?B?"https://www.github.com"?"Open?this?in?a?new?tab"?_blank
????click?C?href?"https://www.github.com"?_blank
????click?D?href?"https://www.github.com"?"Open?this?in?a?new?tab"?_blank
初學者提示——在 html 上下文中使用交互式鏈接的完整示例：
<body><divclass="mermaid">flowchart LR? ? ? ? A-->B? ? ? ? B-->C? ? ? ? C-->D? ? ? ? click A callback "Tooltip"? ? ? ? click B "https://www.github.com" "This is a link"? ? ? ? click C call callback() "Tooltip"? ? ? ? click D href "https://www.github.com" "This is a link"</div><script>varcallback=function(){alert('A callback was triggered');};varconfig={startOnLoad:true,flowchart:{useMaxWidth:true,htmlLabels:true,curve:'cardinal'},securityLevel:'loose'};mermaid.initialize(config);</script></body>
可以在流程圖中輸入注釋派歌，解析器將忽略這些注釋。注釋需要單獨一行取视，并且必須以%%（雙百分號）開頭硝皂。注釋開始后到下一個換行符的任何文本都將被視為注釋，包括任何流語法
flowchart?LR
%%?this?is?a?comment?A?--?text?-->?B{node}
???A?--?text?-->?B?--?text2?-->?C
可以設置鏈接樣式作谭。例如稽物，您可能想要對流中向后的鏈接進行樣式設置。由于鏈接沒有與節(jié)點相同的 id折欠，因此需要其他方式來確定鏈接應附加到哪種樣式贝或。使用圖表中定義鏈接時的順序號代替 ids吼过，或使用默認值應用于所有鏈接。在下面的示例中咪奖，linkStyle 語句中定義的樣式將屬于圖中的第四個鏈接：
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
如果默認方法不能滿足您的需要盗忱，則可以設置用于項目之間線條的曲線類型⊙蛘裕可用的曲線樣式包括basis趟佃、bump、linear昧捷、monotoneX闲昭、monotoneY、natural靡挥、step序矩、stepAfter和stepBefore。
在此示例中跋破，從左到右的圖形使用stepBefore曲線樣式：
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
有關可用曲線的完整列表簸淀，包括自定義曲線的說明，請參閱d3-shape項目中的Shapes文檔 毒返。
可以對節(jié)點應用特定樣式租幕，例如較粗的邊框或不同的背景顏色。
flowchart?LR
????id1(Start)-->id2(Stop)
????style?id1?fill:#f9f,stroke:#333,stroke-width:4px
????style?id2?fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray:?5?5
StartStop
比每次都定義樣式更方便的是定義一個樣式類拧簸，并將該類附加到應該具有不同外觀的節(jié)點上令蛉。
類定義如下例所示：
? ? classDef className fill:#f9f,stroke:#333,stroke-width:4px;
將類附加到節(jié)點按以下方式完成：
? ? class nodeId1 className;
也可以在一個語句中將一個類附加到節(jié)點列表：
? ? class nodeId1,nodeId2 className;
添加類的更短形式是使用運算符將類名附加到節(jié)點:::，如下所示：
flowchart?LR
????A:::someclass?-->?B
????classDef?someclass?fill:#f96;
AB
也可以在 css 樣式中預定義可以從圖形定義中應用的類狡恬，如下例所示：
示例樣式
<style>.cssClass > rect{fill:#FF0000;stroke:#FFFF00;stroke-width:4px;}</style>
示例定義
flowchart?LR;
????A-->B[AAA<span>BBB</span>]
????B-->D
????class?A?cssClass
AAAABBBD
如果一個類被命名為 default 珠叔，它將被分配給所有沒有特定類定義的類。
? ? classDef default fill:#f9f,stroke:#333,stroke-width:4px;
可以從 fontawesome 添加圖標弟劲。
圖標通過語法 fa:#icon class name# 訪問祷安。
flowchart?TD
????B["fab:fa-twitter?for?peace"]
????B-->C[fa:fa-ban?forbidden]
????B-->D(fa:fa-spinner);
????B-->E(A?fa:fa-camera-retro?perhaps?)
?for peace?forbiddenA??perhaps?
Code Chart 現(xiàn)在僅與 Font Awesome 版本 4、5 和 6 兼容兔乞。檢查您使用的 Font Awesome 版本是否正確汇鞭。
在圖形聲明中，語句現(xiàn)在也可以不用分號結束庸追。在 0.2.16 版本之后霍骄，以分號結束圖形語句只是可選的。因此淡溯，下面的圖形聲明與圖形的舊聲明一起也是有效的读整。
頂點和鏈接之間允許有一個空格。但是咱娶，頂點及其文本與鏈接及其文本之間不應有任何空格米间。圖形聲明的舊語法也可以使用强品，因此這個新特性是可選的，并被引入以提高可讀性屈糊。
下面是圖邊的新聲明的榛，它與圖邊的舊聲明一樣有效。
flowchart?LR
????A[Hard?edge]?-->|Link?text|?B(Round?edge)
????B?-->?C{Decision}
????C?-->|One|?D[Result?one]
????C?-->|Two|?E[Result?two]
Link textOneTwoHard edgeRound edgeDecisionResult oneResult two
是否可以調(diào)整渲染流程圖的寬度逻锐。
這是通過定義mermaid.flowchartConfig來完成的夫晌。
mermaid.flowchartConfig={width:100%}
