美文网首页MarkDown
MarkDown 流程图示例

MarkDown 流程图示例

作者: Vic_wkx | 来源:发表于2019-04-22 15:27 被阅读0次

  后知后觉的我,最近才知道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可以使用 fontAwesome 字体,效果如下:

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 流程图示例

    后知后觉的我,最近才知道MarkDown支持mermaid语法,可以用MarkDown画流程图! 犹记得当初做毕业...

  • MarkDown flow流程图示例

    上一篇说到,MarkDown还支持另一种语法的流程图。那么我们一起来学习一下。 效果图 先来看一张效果图: 对应的...

  • 【Markdown】相关参考

    流程图 学习Markdown绘制流程图 Typora流程图代码 测试

  • Markdown

    一篇很详细的 Markdown 语法手册 使用 Markdown 画流程图

  • markdown的语法

    markdown的语法示例,具体看图Markdown——入门指南

  • 使用vscode的markdown插件绘图写文档

    使用Markdown 语法绘制相关的流程图以及其他相关的图 使用Markdown 语法绘制相关的流程图以及其他相关...

  • Markdown示例

    一级标题 二级标题 三级标题 无序列表 无序列表 无序列表 无序列表 有序列表 有序列表 有序列表 有序列表 插入...

  • Markdown示例

    这是常规段落。 这是引用。 这是链接 这是粗体。这是斜体。这是删除线。 分割线为---。 代码块: 列表2级列表 ...

  • Markdown示例

    test 这是三级标题 abc 这是一级标题 平安科技 平安医疗 平安银行 香蕉 苹果 天上白玉京,十二楼五城 脚...

  • Markdown示例

    我们理解您需要更便捷更高效的工具记录思想,整理笔记、知识,并将其中承载的价值传播给他人,Cmd Markdown ...

网友评论

    本文标题:MarkDown 流程图示例

    本文链接:https://www.haomeiwen.com/subject/sjgygqtx.html