mermaid中的流程圖
1. 圖形
圖形佈局分四個方向，上下、下上、左右、右左，分別是TB(TD)/BT(DT)/RL/LR，字母必須爲大寫，具體代碼如下：
```mermaid
graph TD;
開始 --> 結束;
2. 節點和形狀
-
帶文字節點：爲節點設置一個id，id後括號中寫該節點內容
graph TD;
id1[這是一個節點]
-
圓邊節點：()
graph TD;
id2(圓邊節點)
-
圓形節點：(())
graph TD;
id3((圓形節點))
-
非對稱形狀節點
graph TD;
id4>非對稱節點]
*：目前只有這種非對稱形狀，反過來無效
-
菱形節點
graph TD;
id5{菱形節點}
3. 節點之間的連接
-
實線箭頭連接
graph LR;
A --> B
-
開放連接（沒有箭頭）
graph LR;
A — B
-
連接上加文字
graph LR;
A – TEXT — B
或
A —| TEXT | B
*：第一種形式必須前邊兩個減號後邊三個，第二種形式必須前邊三個減號，即必須嚴格按照說明文檔，否則無法解析，後面內容不再贅述
-
帶箭頭和文字的連接
graph LR;
A -->| TEXT | B
或
A – TEXT --> B
-
虛線連接
graph LR;
A -.-> B
-
帶文字的虛線連接
graph LR;
A -. TEXT .-> B
-
粗箭頭連接
graph LR;
A ==> B
-
帶文本的粗連接
graph LR;
A == TEXT ==> B
4. 破壞語法的特殊字符
-
將文本放在引號內一遍渲染複雜字符
graph LR;
id1["(TEXT)"]
此處不加引號會出錯
-
實體代碼轉義字符1
graph LR;
A[“TEXT WITH QUOTE#quot;”] -->B
5.子圖1
-
模式
subgraph title
graph definition
end
示例：
graph TB;
c1 --> a2;
subgraph one;
a1 --> a2;
end;
subgraph two;
b1 --> b2;
end;
subgraph three;
c1 --> c2;
end;
graph TB; c1 --> a2; subgraph one; a1 --> a2; end; subgraph two; b1 --> b2; end; subgraph three; c1 --> c2; end;*：換行和縮進以及分號都不是必須的
6. 相互作用
主要學習mermaid在markdown中的運用，此部分在markdown中無效
7. 樣式和類
-
連接樣式
graph LR;
A1 --> B1;
A2 --> B2;
linkStyle 1 stroke:#ff3,stroke-width:4px;*：因爲連接線沒有id，所以要設置其樣式要指定是第幾條連接線，索引從0開始
-
對節點設置樣式
grpah LR;
id1(Start)–>id2(Stop);
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5; -
可以定義樣式類，再設置到對應節點上1
定義類：
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
附加到節點：
class nodeId1 className;
或
class nodeId1,nodeId2 className;
graph LR;
id1(Start) --> id2(Stop)
classDef c1 fill:#f9f,stroke:#333,stroke-width:4px;
class id1,id2 c1; -
CSS類
markdown不支持
-
默認類
如果一個類被命名爲default，則會被分配給所有沒有特定類定義的類（暫不清楚含義）
8. 對fontawesome的基本支持1
graph TD
B[“fa:fa-twitter for peace”]
B–>C[fa:fa-ban forbidden]
B–>D(fa:fa-spinner);
B–>E(A fa:fa-camera-retro perhaps);
具體支持哪些圖標需要對照fontawesome進行測試
9. 格式問題
- 語句結尾分號是可選的
- 節點和連接線之間允許單個空格，但是節點及其文本和連接及其文本之間不應該有空格