markdown中condition两个分支yes和no的位置控制

如何用markdown画流程图，可以参考网址：https://segmentfault.com/a/1190000006247465

在连接流程图的时候，对于condition类型，有yes和no两个分支，那么如何控制yes和no的位置呢？

markdown中的condition默认的是：将yes放在下面，no放在右面。并且condition的两个分支也只有下和右这两个方向。前者用left表示，后者用right表示。

1个condition不具有普遍性，要求至少2个才有研究价值。下面以2个condition为例。

如图1所示，只标出yes和no，但不标记left和right，默认是yes在下面，no在右面。

Created with Raphaël 2.1.0开始Yes or No?My operation1结束Yes or No?My operation2yesnoyesno

图1 condition中yes和no默认显示位置

图1的代码如下：

st=>start: 开始
e=>end: 结束
cond1=>condition: Yes or No?
op1=>operation: My operation1
cond2=>condition: Yes or No?
op2=>operation: My operation2

st->cond1(no)->cond2(no)->e
cond1(yes)->op1->e
cond2(yes)->op2->e

如果同时限制left和right，那么将按照默认的位置显示。

例如：尝试将yes在右面显示，no在下面显示。在代码中标记出left和right。具体如下：

st=>start: 开始
e=>end: 结束
cond1=>condition: Yes or No?
op1=>operation: My operation1
cond2=>condition: Yes or No?
op2=>operation: My operation2

st->cond1(no,left)->cond2(no,left)->e
cond1(yes,right)->op1->e
cond2(yes,right)->op2->e

实际效果如图2所示.

Created with Raphaël 2.1.0开始Yes or No?My operation1结束Yes or No?My operation2yesnoyesno

图2 同时限制left和right的显示结果

对比图1和图2可以很明显的看出两张图是一模一样的，进一步说明同时限制left和right，那么将按照默认的位置显示。

若只限制一个方向。

例如：尝试将yes在右面显示，no在下面显示。

代码1：限定no

st=>start: 开始
e=>end: 结束
cond1=>condition: Yes or No?
op1=>operation: My operation1
cond2=>condition: Yes or No?
op2=>operation: My operation2

st->cond1(no,left)->cond2(no,left)->e
cond1(yes)->op1->e
cond2(yes)->op2->e

结果如图3所示。

Created with Raphaël 2.1.0开始Yes or No?My operation1结束Yes or No?My operation2yesnoyesno

图3 限定no

代码2：限定yes

st=>start: 开始
e=>end: 结束
cond1=>condition: Yes or No?
op1=>operation: My operation1
cond2=>condition: Yes or No?
op2=>operation: My operation2

st->cond1(no)->cond2(no)->e
cond1(yes,right)->op1->e
cond2(yes,right)->op2->e

结果如图3所示。

Created with Raphaël 2.1.0开始Yes or No?My operation1结束Yes or No?My operation2yesnoyesno

图3 限定yes

总结

在连接流程图的时候，对于condition类型，有yes和no两个分支，默认情况下，yes在下面显示，right在右面显示。如果同时限制left和right，那么将按照默认的位置显示；如果只限制其中一个，那么另一个也自动限定，则可以按照设定的进行显示。