Skip to main content
xx

小书匠语法说明之流程图

概述

流程图使用 flowchartjs 插件实现

使用

元数据: grammar_flow

想要使用该语法,需要在设置>扩展语法 里把流程图选项打开。或者在每篇文章的元数据里通过 grammar_flow 进行控制

示例

  1. 1```flow 

  2. 2st=>start: 开始 

  3. 3e=>end: 结束 

  4. 4op=>operation: 操作步骤 

  5. 5cond=>condition: 是 或者 否? 

  6. 6 

  7. 7st->op->cond 

  8. 8cond(yes)->e 

  9. 9cond(no)->op 

  10. 10``` 

效果

Created with Raphaël 2.2.0开始操作步骤是 或者 否?结束yesno
Created with Raphaël 2.2.0StartMy OperationYesor No?Good ideacatch something...EndStuffMy Subroutineyesnoyesno

流程图

流程图语法主要分为两部份,一个是结点定义,一个是流程定义。结点定义设置各个结点类型,及显示文字。流程定义是使用结点定义时定义的各结点

  1. 1结点定义 

  2. 2结点名称=>结点类型:结点说明 

  3. 3 

  4. 4流程定义 

  5. 5结点名称->结点名称 

不同的结点

主要结点有

类型 名称
start 起始结点
end 结束结点
operation 处理结点
subroutine 子路由结点
condition 条件结点
inputoutput 输入输出结点
parallel 并行结点

示例

  1. 1```flow! 

  2. 2st=>start: Start:>http://www.google.com[blank] 

  3. 3e=>end:>http://www.google.com 

  4. 4op1=>operation: My Operation 

  5. 5sub1=>subroutine: My Subroutine 

  6. 6cond=>condition: Yes 

  7. 7or No?:>http://www.google.com 

  8. 8io=>inputoutput: catch something... 

  9. 9para=>parallel: parallel tasks 

  10. 10 

  11. 11st->op1->cond 

  12. 12cond(yes)->io->e 

  13. 13cond(no)->para 

  14. 14para(path1, bottom)->sub1(right)->op1 

  15. 15para(path2, top)->op1 

  16. 16``` 

Created with Raphaël 2.2.0StartMy OperationYesor No?catch something...Endparallel tasksMy Subroutineyesno

可点击的结点

在结点定义阶段,想要可点击的结点结尾添加 :> ,并带上要跳转的地址。

  1. 1结点定义 

  2. 2结点名称=>结点类型:结点说明:>链接地址 

默认是在本页进行跳转,可以在链接地址后面添加 [blank], 用来在新窗口打开

  1. 1结点定义 

  2. 2结点名称=>结点类型:结点说明:>链接地址[blank] 

条件结点

定义为条件结点后,在流程定义阶段,可以对条件结点进行 yesno 参数的传递

  1. 1流程定义 

  2. 2条件结点名称(yes)->结点名称 

  3. 3条件结点名称(no)->结点名称 

并行结点

在流程定义阶段,可以对并行结点进行不同的参数设置

疑问

相关

  1. flowchart 官网
Design by xsj 京ICP备13031371号