mermaid与flowchart.js绘制流程图分支结构试验

mermaid与flowchart.js绘制流程图分支结构试验

近日绘制流程图时对不断修改调整流程图中节点位置感到很厌烦，想要改用代码方式来写流程图。以下试验均基于CSDN编辑器的的mermaid和flowchat支持。

用解一元二次方程的流程图做试验

• mermaid流程图：判断后的流程线应该是从菱形的顶点处出发，这里居然是从菱形的边上出发，而且流程线不是走直角弯，不完全符合程序设计流程图的标准，没有找到如何解决。

yes

no

yes

no

开始

结束

输入方程ax^2+bx+c=0的系数a,b,c

d=b^2-4ac

delta<0

delta=0?

输出无解

x=-b/a/2

delta_sqrt=sqrt(delta)

x1=(-b-delta_sqrt)/a/2

x2=(-b+delta_sqrt)/a/2

输出x

输出x1,x2

• flowchart.js：默认情况下，在yes分支比no分支短时，会有流程线交叉(交叉处会有不连接的弯，这还能接受)，甚至流程线穿过节点(这就不能接受了)

Created with Raphaël 2.3.0 开始 输入方程ax^2+bx+c=0的系数a,b,c d=b^2-4ac delta<0? 输出无解 结束 delta=0? x=-b/a/2 输出x delta_sqrt=sqrt(delta) x1=(-b-delta_sqrt)/a/2 x2=(-b+delta_sqrt)/a/2 输出x1,x2 yes no yes no

• flowchart.js解决流程线交叉的方法一：将分支条件修改为yes分支比no分支长，可以解决流程线交叉问题，但是不符合先解决简单问题再解决的复杂问题的思路

Created with Raphaël 2.3.0 开始 输入方程ax^2+bx+c=0的系数a,b,c delta=b^2-4ac delta>0? delta_sqrt=sqrt(delta) x1=(-b-delta_sqrt)/a/2 x2=(-b+delta_sqrt)/a/2 输出x1,x2 结束 delta=0? x=-b/a/2 输出x 输出无解 yes no yes no

• flowchart.js解决流程线交叉的方法二：在yes分支添加冗余节点，图看起来有点怪。而且flowchart.js没有用于连接流程图的不同部分的节点类型，这里用end节点其实时不规范的，希望flowchart.js能增加用于连接流程图的不同部分的节点类型。

Created with Raphaël 2.3.0 开始 输入方程ax^2+bx+c=0的系数a,b,c d=b^2-4ac delta<0? 输出无解 ^.^ ^.^ 结束 delta=0? x=-b/a/2 输出x ^.^ delta_sqrt=sqrt(delta) x1=(-b-delta_sqrt)/a/2 x2=(-b+delta_sqrt)/a/2 输出x1,x2 yes no yes no

• 解决上面问题方法三：改变yes和no的默认方向，可以避免流程线交叉，只是与一般习惯的坐yes右no的分支方向相反，读图时需要注意不搞错方向。

Created with Raphaël 2.3.0 开始 输入方程ax^2+bx+c=0的系数a,b,c d=b^2-4ac delta<0? 输出无解 结束 delta=0? x=-b/a/2 输出x delta_sqrt=sqrt(delta) x1=(-b-delta_sqrt)/a/2 x2=(-b+delta_sqrt)/a/2 输出x1,x2 yes no yes no

结论：绘制程序设计的流程图还是使用flowchart.js更合适，mermaid更适合一般流程图。

用flowchart.js绘制分支结构需要注意分支的长短，如果yes分支比no分支短，应该更改分支的方向以避免流程线交叉甚至穿过节点。