mermaid流程图工具_Markdown高级使用之流程图

文章首发于博客园，转载请注明出处：

Markdown高级使用之流程图 - 小白先生哦 - 博客园

流程图在Markdown中的的表现形式就是代码块，代码块语言标记为mermaid。主要内容大体分为：方向、节点、节点间的连接关系，下面就围绕这三个点来整理。
mermaid支持流程图、甘特图和时序图，但是经过这次尝试，结论就是画图的话还是使用专业的画图工具，这个只能作为一种简单选项用在简单场景下。所以这里就只总结一下流程图的使用，其它两种就没必要了，不是怎么好用。

流程图方向

流程图总体分为横向和纵向两种。总共四个方向：T-上，BD-下；L-左，R-右。使用方式就是横向的两两结合，纵向的两两结合。比如从左到右为LR，从上到下为TB或者TD。

从上到下演示：

~~~mermaid
graph TD
A --> B
~~~

从上到下的展示效果：

从左到右演示：

~~~mermaid
graph LRA --> B
~~~

从左到右展示效果：

流程图节点

下面展示的流程图节点有矩形 '[]'，圆角矩形 '()'，不对称矩形 '>]'，菱形 '{}'，圆形 '(())'。在每个节点前面需要唯一标识该节点ID。如下示例：

~~~mermaid
graph TDa1[带文本矩形]a2(带文本圆角矩形)a3>带文本不对称矩形]b1{带文本菱形}c1((带文本圆形))
~~~

其展示效果如下：

节点间的连接关系

节点之间的连接线分为：实线 '---'、加粗实线 '==='、虚线 '-.-'。
带箭头的连接线分为：带箭头实线 '-->'、带箭头加粗实线 '==>'，带箭头虚线 '-.->'。
如果要在连接线上加上备注，则上面两类加备注的方式如下：
- 实线备注 '--yes---'，加粗实线备注 'yes='，虚线备注 '-.yes.-'。
- 带箭头实线备注 '--yes-->'，带箭头加粗实线备注 'yes>'，带箭头虚线备注 '-.yes.->'

其中，每种连接符号的左边是开始节点，右边是结束节点，可以由同一个节点指向不同节点，也可以由不同节点指向同一个节点，实现各种指向方式都是通过节点ID标注。

示例如下：

~~~mermaid
graph LRA10[A10] --- A11[A11]A20[A20] === A21[A21]A30[A30] -.- A31[A31]B10[B10] --> B11[B11]B20[B20] ==> B21[B21]B30[B30] -.-> B31[B31]C10[C10] --yes--> C11[C11]C20[C20] ==yes==> C21[C21]C30[C30] -.yes.-> C31[C31]
~~~

其展示效果如下：

由同一个节点开始，使用方式如下，对于后面如果使用同一个节点，只用指明ID即可。

~~~mermaid
graph LRA[开始节点] --> B[结束节点1]A --> C[结束节点2]
~~~

冒泡排序流程图

在这里用一个冒泡排序来简单的练习一下上面的几个点，首先将冒泡排序的伪码粘贴上来：

BUBBLESORT(A)for i = 1 to A.length-1for j = A.length downto i + 1if A[j] < A[j - 1]exchange A[j] with A[j - 1]

演示代码如下：

~~~mermaid
graph TDstart([开始]) --> 赋值arr[赋值arr]赋值arr --> 赋值len[len = arr.length]赋值len --> 赋值i[i = 0]赋值i --> 第一层循环{i < len}第一层循环 --yes--> 赋值j[j = 1]赋值j --> 第二层循环{"j < len - i ?"}第二层循环 --yes--> 判断{"arr[j - 1] < arr[j] ?"}判断 --yes--> 定义临时变量["int temp = arr[j - 1]"]定义临时变量 --> 交换aj["arr[j - 1] = arr[j]"]交换aj --> 交换aj-1["arr[j] = temp"]交换aj-1 --> j自增["j++"]j自增 --> 第二层循环判断 --no--> j自增第二层循环 --no--> i自增["i++"]i自增 --> 第一层循环第一层循环 --no--> endd([结束])
~~~

展示效果如下：

mermaid流程图工具_Markdown高级使用之流程图相关推荐

mermaid流程图工具_MarkDown绘图mermaid流程graph
[注]更多详情请参阅mermaid流程图官方文档. 1. 绘图方向命令方向 TB(TD) 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 2. 节点形状命令形状 A[text] 文本 ...
【冷门实用小工具】轻量级流程图工具ClickCharts PRO绿色版，ClickCharts PRO下载【亲测有效】
下载地址:ClickCharts Pro注册版下载地址轻量级流程图工具ClickCharts Pro注册版本,大小总共900多K,功能跟visio一样强大. 一.实用功能: 1.创建图表模板 2.可 ...
github流程图_「强烈推荐」开源的在线流程图工具--draw.io
作为开发者,画流程图是工作中经常遇到的事.你是否也在寻找一个免费的好用的流程图工具? 在线流程图工具,常用的有processon.com. lucidchart.com和我今天要推荐的draw.io. ...
高级流程图_数据收集方法之流程图
流程图又称:工艺流程图,工艺流程图.. 变式:宏观流程图,自上而下的流程图,详细流程图(又称工艺图,微观图,服务图,或符号流程图),部署流程图(又称下跨或跨功能流程图),几级流程图.. 7.2描述 ...
visio wps 流程图_科研必备：几款好用的流程图工具，助力你的论文/科研绘图
写SCI论文常常会遇到一个问题--如何才能让读者通俗易懂地理解自己的研究?如果不能让读者了解研究过程,读者会对研究结果是否合理.如何应用存在疑问:尤其是期刊编辑和审稿人如果不能通过咱们的叙述,清楚地了 ...
visio科学图形包_科学网—科研必备：几款好用的流程图工具，助力你的论文/科研绘图...
写SCI论文常常会遇到一个问题--如何才能让读者通俗易懂地理解自己的研究?如果不能让读者了解研究过程,读者会对研究结果是否合理.如何应用存在疑问:尤其是期刊编辑和审稿人如果不能通过咱们的叙述,清楚地了 ...
常用的画流程图工具和脑图工具
画流程图工具亿图图示(Win/Mac/Linux/网页) 如果你有云同步.多平台使用的需求,我比较推荐你使用亿图图示:https://www.edrawsoft.cn/edrawmax/wb-zhi ...
在线流程图工具推荐免费好用可与语雀联动
https://www.processon.com/i/5b0377c2e4b05615d252db9c 好用的流程图工具,可与语雀联动 processon
流程图工具有哪些？三分钟告诉你流程图如何制作
大家在工作的时候是否会经常绘制流程图呢,流程图可以清晰的表达出一个系统的信息.观点或部件的图形.它不仅可以形象直观的表达出制作者的流程想法,还能让阅读者对各种操作都一目了然,便于理解,减少制作者与观看 ...