小鱼儿在上一篇文章：《小鱼儿教你上手Markdown》教大家基础的流程图，现在给大家介绍点新鲜的~~ 流程图 流程图跟时序图差不多，遵循先定义再写流程图即可，掌握四种表示类型：start,end,condition,operation 你需要做的就是在 “` 后面添加 flow 来表示这段代码是一个流程图即可！ 上代码： start=>start: 开始
isLogin=>condition: 是否登录
login=>operation: 登录
view=>operation: 浏览
end=>end: 结束start->isLogin
isLogin(no)->login->view
isLogin(yes)->view
view->end 显示： 学习了Markdown的流程图之后，总觉得少点什么，但是百度之后的各种介绍文章也都大同小异，于是直接找上了老外的github地址 flowchart.js，Markdown的流程图就是基于这个开源的js实现的，奈何实在是英文水平有限，又懒的看js内部的各种火星文，偷瞄了一眼作者在example 中的例子，发现了不少新东西，于是明白了一个道理，学东西都要学源头的，看国内文章都是管中窥豹，不能学的全部 OK，以下结合这个例子来说明下： st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something…|requestst->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e 上面的这段Markdown流程图代码可以看做是一种进阶版流程图 type类型由原来的四种增加到了六种，这六种分别是 start 表示开始，以椭圆形表示 condition 表示条件，以菱形四边形表示 operation 表示操作，以矩形形表示 subroutine 表示子程序，以三格矩形表示，这个就是多任务分支的一种形式 inputoutput 表示输入输出流，以平行四边形形表示 end 表示结束，以椭圆形表示 然后各个类型的type都可以用()来表示流程的走向 right 向右 left 向左 up 向上 down 向下，这个是默认选项 元素样式：使用| type来表示，目前有七种样式 ‘past’ : { ‘fill’ : ‘#CCCCCC’, ‘font-size’ : 12}, ‘current’ : {‘fill’ : ‘yellow’, ‘font-color’ : ‘red’, ‘font-weight’ : ‘bold’}, ‘future’ : { ‘fill’ : ‘#FFFF99’}, ‘request’ : { ‘fill’ : ‘blue’}, ‘invalid’: {‘fill’ : ‘#444444’}, ‘approved’ : { ‘fill’ : ‘#58C4A3’, ‘font-size’ : 12, ‘yes-text’ : ‘APPROVED’, ‘no-text’ : ‘n/a’ }, ‘rejected’ : { ‘fill’ : ‘#C45879’, ‘font-size’ : 12, ‘yes-text’ : ‘n/a’, ‘no-text’ : ‘REJECTED’ } 使用:>地址[打开方式]来跟流块内的文字绑上链接,打开方式跟HTML中一致，如下： _blank — 在新窗口中打开链接 _parent — 在父窗体中打开链接 _self — 在当前窗体打开链接,此为默认值 _top — 在当前窗体打开链接，并替换当前的整个窗体(框架页) 这个是实现效果，快上手试试吧：