Markdown 中的flow语法 flowchart.js 的基础教程

Markdown 中的Flow flowchart.js 的基础教程

JS Markdown 编辑器 https://stackedit.io/


百度了下,看到网上关于 flow 的教程很少好像。写个简短的教程,我也是在使用中学习的。
CSDN中使用 Markdown 编辑器的前提是你打开了 markdown 编辑器

个人非常喜欢Markdown编辑器来写技术博客,很方便,异常方便,看个预览先(右击在新窗口中打开以看大图):

这里写图片描述


基本格式

'''flow     //前面是三个 主键盘区数字1左边那个符号,这里我用单引号代替了。像所有语言块一样。
            //一般上面写结构,下面写流程
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?

st->op->cond
cond(yes)->e
cond(no)->op

'''

输出的样子是这样

Created with Raphaël 2.1.2 开始 我的操作 确认? 结束 yes no

操作块

st=>start: 开始

#st 是变量名,类似php中数组索引,可以用英文,别定义的太离谱就行,如op_this,cond_echo
#start 操作模块名,像数据类型 Int String,如:开始,结束,判断。命名严格,区别大小写。
# : 后面是要显示的文字
!!!!!   注意:冒号后要加空格   !!!!!!

详细说明有哪些可以用的模块 (很容易理解,都是英文直译)

#开始 start
st=>start: 开始

#结束 end
e=>end: 结束

#普通操作块 opration
op1=>opration: 第一个操作块
op2=>opration: 第二个操作块

#判断块 condition
cond1=>condition: 第一个判断
cond2=>condition: 第二个判断

#输入输出块 inputoutput
io1=>inputoutput: 输入输出块1
io2=>inputoutput: 输入输出块2

#子任务块
sub1=>subroutine: 子任务1
sub2=>subroutine: 子任务2

判断和位置控制 (所有符号都用半角:就是在英文状态下输入)

#判断流程控制
cond1(yes)->op1  #yes 的时候回到 op1
cond1(no)->e   #no 的时候 去结束
#位置指定
cond1(no)->op2(right)->op1 #控制 op2 位置置于右边,再由op2 返回 op1 (好像不能向左)
#还可以这样 cond1(no,right)

cond1(yes)->e 

如:

Created with Raphaël 2.1.2 开始 OP1 这是cond 结束 OP2 yes no

流程控制

st->op1->e

# -> 作为控制流程的操作符,就是指向下一步要操作的。
# 每一条都算是一条流程

# 你也可以断开写,怎么方便怎么来,如:下面两个是一样的。

#分着写
st->op1
op1->e

#合着写
st->op1->e
Created with Raphaël 2.1.2 START OP1 END

#判断也是一样:
st->cond
cond(yes)->io
cond(no)->op1
Created with Raphaël 2.1.2 COND IO OP1 yes no

写个微信开发者接入和回复信息合一的流程图

Created with Raphaël 2.1.2 微信验证接入 echostr == null 获取post,解析xml数据 判断信息内容,处理相关操作 post返回数据 END 将token、timestamp、nonce三个参数进行字典序排序 将三个参数字符串拼接成一个字符串进行sha1加密 加密字符串 == signature 返回echostr yes no yes no

代码如下:

st=>start: 微信验证接入
e=>end: END
cond1=>condition: echostr == null

op2_1=>operation: 将token、timestamp、nonce三个参数进行字典序排序
op2_2=>operation: 将三个参数字符串拼接成一个字符串进行sha1加密
cond2=>condition: 加密字符串 == signature
io1=>inputoutput: 返回echostr

op1=>operation: 获取post,解析xml数据
op2=>operation: 判断信息内容,处理相关操作
io2=>inputoutput: post返回数据


st->cond1
cond1(yes)->op1->op2->io2->e
cond1(no)->op2_1(right)->op2_2->cond2
cond2(no)->e
cond2(yes)->io1->e

差不多就这些了,我所知道的,等知道再多的时候再添加吧。我感觉这些已经够用了。
现在可以好好的写博客了。

猜你喜欢

转载自blog.csdn.net/KimBing/article/details/52934959