Flowchart流程图和 Mermaid流程图的对比

  在CSDN的markdown编辑器里有两种流程图绘制方式，分别是mermaid下的flowchart流程图和graph流程图。两种流程图的语法和绘制效果都有一定区别。本文重点讨论流程图的区别

---

---

flowchart流程图

  flowchart流程图绘制的风格偏传统流程图，优点是显示效果比较朴素并且可以较方便的调节引导线方向和流程图布局。缺点也很明显，那就是语法过分复杂了。

示例代码

```mermaid
flowchat
st=>start: 程序开始
e=>end: 结束
op1=>operation: 随机选取K个样本作为均值向量
oploop1=>operation: 计算样本与各均值向量之间的距离
oploop2=>operation: 根据距离最近的均值向量确定每个样本的簇标记
oploop3=>operation: 将样本划入相应的簇
opstill1=>operation: 继续循环
cond1=>condition: 遍历完成？
op2=>operation: 计算各簇新均值向量μ
cond2=>condition: 遍历完成？
opstill2=>operation: 继续循环
opfinal=>condition: 均值向量是否更新？
opstill3=>operation: 继续循环
 
st->op1->oploop1->oploop2->oploop3->cond1->op2->cond2->opfinal
cond1(no, right)->opstill1(top)->oploop1
cond1(yes, right)->op2
cond2(yes)->opfinal
cond2(no, right)->opstill2(top)->op2
opfinal(yes, bottom)->e
opfinal(no, left)->opstill3(top)->oploop1
```

显示效果

graph流程图

  graph流程图相较前者最大的特点就是语法简单。基本上除了流程图显示语句，语法语句很少，可以很方便的在markdown里绘制。这种简单的语法构建尤其适合日常博客的编写。

示例代码

```mermaid
graph TD;
start(程序开始)
–> 随机选取K个样本作为均值向量
–> id1([划分簇开始])
–> 计算样本与各均值向量之间的距离
–> 根据距离最近的均值向量确定每个样本的簇标记
–> 将样本划入相应的簇
–> id2{遍历完成?}
id2 – NO --> id1
id2 – YES --> id3([更新簇均值向量开始])
–> id4[计算各簇新均值向量μ]
–> id5{所有计算完成?}
id5 – YES --> 保留μ集合为簇新中心点 --> id6{所有μ是否更新?}
id5 – NO --> id3
id6 – NO -->endd(结束, 输出均值向量)
id6 == YES ==>id1
```

显示效果

---

如有疑问或错误，欢迎和我私信交流指正。
版权所有，未经授权，请勿转载！
Copyright © 2021 by YuxiChen. All rights reserved.