Mermaid流程圖

​​Markdown文檔生成流程圖、時序圖、類圖、狀态圖、ER圖、使用者旅程圖、甘特圖、餅圖等​​

​​官網​​

​​Github 項目位址​​

一、介紹

Mermaid 是一個用于畫流程圖、狀态圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛內建于許多 Markdown 編輯器中

二、流程圖基礎

1、流程圖符号和含義

Mermaid 的流程圖的圖形含義使用象形的表達形式，非常類似中國象形，了解起來也不難，比如矩形 ​

​[]​

​​,圓角矩形​

​()​

​​,圓形​

​(())​

​

圖形	符号含義
圓角矩形	表示開始和結束	​ ​id(“文字”)​ ​
矩形	表示過程環節	​ ​id["文字"]​ ​
單向箭頭線段	表示流程進行方向
菱形	決策判斷	​ ​id{"文字"}​ ​
圓形	表示連接配接，避免流程圖	​ ​id(("文字"))​ ​
右向旗幟節點	标志提示	​ ​id>"文字"]​ ​

​​更多形狀參考官方文檔​​

示例：

graph TB
    start("圓角矩形")
    rectangle["矩形"]
    rhombus{"菱形"}
    round(("圓形"))
    right_arrow>"右向旗幟節點"]      

流程圖形狀.png

2、節點之間的連線

表述	說明	使用示例
​ ​-->​ ​	添加尾部箭頭	​ ​A(把你送進去監牢)-->B{打開監牢}​ ​
​ ​---​ ​	不添加尾部箭頭	​ ​A(把你送進去監牢)---B{打開監牢}​ ​
​ ​--​ ​	單線	​ ​A(把你送進去監牢)--B{打開監牢}​ ​
​ ​--text--​ ​	單線上加文字	​ ​A(把你送進去監牢)--你好親愛的--B{打開監牢}​ ​
​ ​==​ ​	粗線	​ ​A(把你送進去監牢)==>B{打開監牢}​ ​
​ ​==text==​ ​	粗線加文字
​ ​-.-​ ​	虛線
​ ​-.text.-​ ​	虛線加文字

代碼示例 1:箭頭連線示例

graph TD
    A(把你送進去監牢)-->B{打開監牢門}
    B-->|"你是初犯,使用小箭頭"|C["放進去小監牢"]
    C---E("三杠沒有箭頭指向")
    B==>|"你是老犯,使用大箭頭"|D["換個大監牢"]
    D-- "終身監禁" ---forever("沒出頭了")
    D---|"終身監禁"|forever("沒出頭了")      

箭頭連線示例.png

代碼示例 2：箭頭上加文字

加文字方式：節點連線表述定義+文字+節點連線表述定義

如：-.|“文字”|.->id("")

graph TB
    connect["資料庫連接配接"]--"root 127.0.0.1"-->start{"開始連接配接"}
    start-.虛線加文字.->ok["連接配接成功"]
    start-.->faild["虛線不加文字"]      

箭頭加文字.png

代碼示例3：結合​

​fontawesome​

​使用

graph TD
    B["fa:fa-weixin weixin"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner waitting);      

fontawesome結合.png

代碼示例4：給流程表做标題

将其添加到流程圖TD定義之後的頂部。

這将定義一個框，用下劃線（<u>）設定其文本的樣式，并使框填充和描邊為空白​​

​#FFF​

​（樣式标題）

并将其連結到實際的第一步/框（FirstStep），進而使其顯示在頂部，同時使使用linkStyle 0隐藏連結

graph TD      

title[<u>My Title</u>]

title–>FirstStep

style title fill:#FFF,stroke:#FFF

linkStyle 0 stroke:#FFF,stroke-width:0;

FirstStep–>…

标題.png

3、布局方向

TB/TB	Top Bottom 從上到下
BT	bottom top 從下到上
LR	left right 從左到右
RL	right left 從右到左

4、子圖

格式：

subgraph title
 graph definition
end      

代碼示例：

graph TB

subgraph 圖3
two1---two2
end
subgraph 圖2
three1 ==> three2
end
    subgraph 圖1
one1-->one2
end
one1-->two2      

style 圖2 fill:#f9f,stroke:#333,stroke-width:4px

子圖.png

三、代碼格式

基本格式：

​ graph {布局方向[​

​TB​

​​ | ​

​BT​

​​ | ​

​LR​

​​ |​

​RL​

​ ]}