markdown 流程图js_MarkDown 流程图示例

后知后觉的我，最近才知道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还支持另一种语法的流程图，以及时序图、甘特图，我们下次再学习。