創建流程圖需要選擇語言: mermaid
流程中的代碼包裹
graph 這里寫順序
end
流程圖方向:
從上到下(TB),從下到上(BT),從左到右(LR),從右到左(RL)
TB - 從上到下
TD - 自上而下/與自上同
BT - 從下到上
RL - 從右到左
LR - 從左到右
2.節點形狀
體育場形狀的節點 Aid1([描述])
矩形節點 A[描述]
圓角矩形節點 B(描述)
子例程形狀中的節點 B[[描述]]
圓形節點 C((描述))
圓柱形節點 C [(描述)]
右向旗幟狀節點/非對稱節點(asymetric shape) D>描述]
菱形節點(rhombus)E{描述}
六邊形節點 E{{描述}}
平行四邊形 E[/描述/]
梯形1 F[/描述\]
梯形2 F[\描述/]
節點間的連線
帶有箭頭的鏈接 A-->B
不帶箭頭 A --- B
鏈接上的文本 A-- This is the text! ---B 或 A---|This is the text|B
帶有箭頭和文本的鏈接 A-->|text|B 或 A-- text -->B
虛線鏈接:A-.->B;
帶文本的虛線 A-. text .-> B
粗鏈接 A ==> B
帶文本的粗鏈接 A == text ==> B
鏈接鏈接:多個相連
A -- text --> B -- text2 --> C
也可以這樣: a --> b & c--> d
依賴關系ab 依賴cd: A & B--> C & D
拆解就這樣
A --> C
A --> D
B --> C
B --> D
新的箭頭類型
A --o B
B --x C
多向箭頭
A o--o B
B <--> C
C x--x D
例子:
graph TB
id1(圓角矩形)--普通線-->id2[矩形]
subgraph 子圖表名稱
id2==粗線==>id3{菱形}
id3-.虛線.->id4>右向旗幟]
id3--無箭頭---id5((圓形))
end
后面百度了一圈發現還有標准流程圖,這里邊可以寫if分支,循環啥的,我tm,上面是干啥用的??
流程圖(flowchart)語法
流程圖的語法大致分為兩部分。
- 定義元素
tag=>type: content:url
tag:標簽,用於連接元素時使用
type:該標簽的類型。共有6種類型如下:
start 開始
end 結束
operation 處理框
subroutine 子流程
condition 判斷框
inputoutput 輸入輸出框
content:流程語句中放置的內容 和type 空格隔開
url:鏈接,與流程語句綁定
連接元素
c2(yes)->io->e
c2(no)->op2->e
st=>start: 開始
e=>end: 結束
cond=>condition: 確定嗎
op1=>operation: 分支1
op2=>operation: 分支2
st->cond
cond(yes)->op1->e
cond(no)->op2->e