Markdown教程<2> mermaid圖形繪制（1）
博客園中的markdown編輯器同時支持mermaid圖表引擎與tex公式引擎，可以使用mermaid直接畫出流程圖，時序圖，甘特圖等，比較方便，下面介紹一下在markdown中使用mermaid繪制圖表
注意：本文包含較多mermaid圖表，打開本網頁后需要等待一段時間加載完成方可顯示圖表。可以觀看瀏覽器標題欄，直至本網頁不處於加載狀態（轉圈圈）或者圖表已經顯示為止。
1. 流程圖
圖
使用graph來聲明一張新的圖以及圖的繪制方向，具體方法為:
graph TD
start --> stop
graph TD start --> stop
其中TD聲明了圖的繪制順序為由上到下，其他可以填寫的順序為：
- TB - top bottom
- BT - bottom top
- RL - right left
- LR - left right
- TD - 與TB一樣
graph LR
start --> stop
graph LR start --> stop
節點與形狀
默認節點
graph LR
node
graph LR node
可以看到，默認情況下節點名稱被顯示在矩形框內。
有文本的節點
當然也可以為節點設置文本，在設置文本的同時需要指定節點的形狀。
graph LR
node1[這是一段文字]
graph LR node1[這是一段文字]
圓角節點
graph LR
node1(這是一段文字)
graph LR node1(這是一段文字)
圓節點
graph LR
node1((這是一段文字))
graph LR node1((這是一段文字))
不對稱形狀節點
graph LR
node1>這是一段文字]
graph LR node1>這是一段文字]
菱形節點
graph LR
node1{這是一段文字}
graph LR node1{這是一段文字}
節點之間連接線
節點之間通過連接線/邊連接。所以可以設置連接線的形狀，或者把一段文本附着到線上。
箭頭連接線
graph LR
A --> B
graph LR A --> B
直線
graph LR
A --- B
graph LR A --- B
直線中帶有文字
graph LR
A --this is a text--- B
graph LR A --this is a text--- B
或者
graph LR
A ---|this is a text| B
graph LR A ---|this is a text| B
箭頭中帶有文字
graph LR
A --this is a text--> B
graph LR A --this is a text--> B
虛線連接
graph LR
A -.- B
graph LR A -.- B
虛線箭頭連接
graph LR
A -.-> B
graph LR A -.-> B
虛線帶有文本
graph LR
A -.this is a text.- B
graph LR A -.this is a text.- B
虛線箭頭帶有文本
graph LR
A -.this is a text.-> B
graph LR A -.this is a text.-> B
大箭頭(thick link)
graph LR
A ==> B
graph LR A ==> B
大箭頭(thick link)帶有文本
graph LR
A ==this is a text==> B
graph LR A ==this is a text==> B
用於轉義
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"]
子圖
subgraph title
graph definition
end
例如：
graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
graph TB subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end c1-->a2
節點交互
可以講一個點擊事件綁定到一個節點上，點擊可以出發一個javascript callback或者一個鏈接來在新的窗口打開
graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
<script>
var callback = function(){
alert('A callback was triggered');
}
<script>
graph LR; A-->B; click A callback "Tooltip" click B "http://www.github.com" "This is a link"
添加樣式
graph 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
linkStyle 0 stroke:#ff3,stroke-width:4px;
graph 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 linkStyle 0 stroke:#ff3,stroke-width:4px;
使用linkStyle num來為第num條邊指定樣式
使用style node_name來為名稱為node_name的節點指定樣式
最后，一個小例子
graph LR
A[Hard edge] --Link text--> B(Round edge)
B --> C{Decision}
C --One--> D[Result one]
C --Two--> E[Result two]
linkStyle 3 stroke:#ff3,stroke-width:4px;
graph LR A[Hard edge] --Link text--> B(Round edge) B --> C{Decision} C --One--> D[Result one] C --Two--> E[Result two] linkStyle 3 stroke:#ff3,stroke-width:4px;
[1]:本文內容來源於mermaid官方手冊