Skip to main content

小书匠语法说明之流程图

概述

流程图使用 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 官网