后知后覺的我，最近才知道MarkDown支持mermaid語法，可以用MarkDown畫流程圖！

猶記得當初做畢業設計時，自己用Word插入一個個形狀再插入一條條線的方式作圖，流程稍微有點改動就要牽一發而動全身，機械又低效。MarkDown的語法簡潔又優雅，利用編程的方式來作圖，腰也不疼了，背也不酸了，一口氣可以做六張。

效果圖

先來看一張效果圖：

MarkDown畫的流程圖效果圖

對應的mermaid語法是這樣的：

graph LR

rect["[]表示正方形"] -->roundedRect("()表示圓角矩形")

roundedRect --> condition{"{}表示菱形"}

condition -->|"||用來在線條間插入文字"| result1["再來個[]"]

condition -->|"||用來在線條間插入文字"| result2["再來個[]"]

效果還不錯，接下來就讓我們一起來學習一下mermaid有哪些語法。

一、格子形狀

有以下幾種格子形狀：

格子形狀

對應的mermaid語法如下：

graph LR

默認方形

rect[方形]

roundedRect(圓角矩形)

round((圓形))

condition{菱形}

tag>標簽]

二、連接線樣式

有以下幾種連接線樣式：

連接線樣式

對應的mermaid語法如下：

graph LR

test((指我干啥))

直線 --- test

虛線 -.- test

箭頭 --> test

虛線箭頭 -.-> test

粗直線 === test

粗箭頭 ==> test

雙豎線加標簽 ---|"||加標簽"| test

三、子圖

mermaid支持將圖的一部分包裹起來，形成子圖，效果如下：

子圖

對應的mermaid語法如下：

graph LR

subgraph 第一個子圖

測試數據1 --> 指我干啥

end

subgraph 第二個子圖

測試數據2 --> 你也指我干啥

end

—— 我就是這么寫的，但為啥第二個子圖在第一個子圖上面？？？

—— 算了算了，不求甚解，用到再說。

四、流程圖方向

有以下幾個方向：

從上到下

從左到右

從下到上

從右到左

對應的mermaid語法如下：

graph TB

從上到下 --> 指我干啥

graph LR

從左到右 --> 指我干啥

graph BT

從下到上 --> 指我干啥

graph RL

從右到左 --> 指我干啥

很容易看出規律：T表示Top，B表示Bottom，L表示Left，R表示Right

五、特殊字體

fontAwesome

對應的mermaid語法如下：

graph LR

B["比如：fa:fa-android fa:fa-flag fa:fa-github fa:fa-apple fa:fa-star"]

六、Hey MarkDown

學習了MarkDown的基本語法之后，讓我們來實踐一下。之前我在網上看到過一張“Hey Jude”的歌詞流程圖，還挺有意思的。我們就來試著畫一下，語法如下：

graph TB

heyJude[hey Jude] --> doNot(don't)

doNot --> makeItBad[make it bad]

doNot --> beAfraid[be afraid]

doNot --> letMeDown[let me down]

makeItBad --> takeASadSong[take a sad song and make it better]

beAfraid --> youWereMade[you were made to go out and get her]

letMeDown --> youHaveFound[you have found her, now go and get her]

takeASadSong --> rememberTo[remember to]

youWereMade --> rememberTo

youHaveFound --> rememberTo

rememberTo --> letHerInto[let her into your heart]

rememberTo --> letHerUnder[let her under your skin]

letHerInto --> thenYou[then you]

letHerUnder --> thenYou

thenYou --> canStart[can start]

thenYou --> begin[begin]

canStart --> toMakeItBetter[to make it better]

begin --> toMakeItBetter

toMakeItBetter --> betterbetter[better better better better better waaaaa]

betterbetter --> na((na))

na --> na

效果圖：

hey Jude

Excuse me? 我不是剛學了一樣很厲害的技能嗎？怎么畫出來這個鬼樣子...

好吧，理想和現實是有差距的。MarkDown還支持另一種語法的流程圖，以及時序圖、甘特圖，我們下次再學習。

總結

以上是生活随笔為你收集整理的markdown 流程图js_MarkDown 流程图示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。