10

Markdown绘制流程图的方法

 3 years ago
source link: http://yuanfentiank789.github.io/2017/04/12/flowchart/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Markdown绘制流程图语法

流程图的语法大体分为两部分：

  • 前面部分用来定义流程图元素；
  • 后面部分用来连接流程图元素，指定流程图的执行走向。

定义元素阶段的语法是

tag=>type: content:>url
  • tag 是流程图中的标签，在第二段连接元素时会用到。名称可以任意，一般为流程的英文缩写和数字的组合。
  • type 用来确定标签的类型，=>后面表示类型。由于标签的名称可以任意指定，所以要依赖type来确定标签的类型
  • 标签有6种类型：start end operation subroutine condition inputoutput
  • content 是流程图文本框中的描述内容，: 后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格
  • url是一个连接，与框框中的文本相绑定，:>后面就是对应的 url 链接，点击文本时可以通过链接跳转到 url 指定页面
st=>start: 开始

op1=>operation: 操作、执行说明

cond=>condition: 确认？

e=>end: 结束

URL（貌似 SF 的编辑器不支持）

e=>点击本结束跳转:>http://https://segmentfault.com/blog/ingood

连接流程图元素

示例代码后面部分

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

连接流程图元素阶段的语法就简单多了，直接用->来连接两个元素，几点说明如下：

  • 使用 -> 来连接两个元素
  • 对于condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no)
  • 每个元素可以制定分支走向，默认向下，也可以用right指向右边，如示例中sub1(right)。

更多关于流程图的语法说明，请移步 https://github.com/adrai/flow…

Markdown绘制流程图实例

用Markdown绘制流程图十分简单方便，下面以几个例子来介绍其使用方法

Example1闰年判断

在编辑器中输入如下代码，

   ```flow
   st=>start: Start
   i=>inputoutput: 输入年份n
   cond1=>condition: n能否被4整除？
   cond2=>condition: n能否被100整除？
   cond3=>condition: n能否被400整除？
   o1=>inputoutput: 输出非闰年
   o2=>inputoutput: 输出非闰年
   o3=>inputoutput: 输出闰年
   o4=>inputoutput: 输出闰年
   e=>end
   st->i->cond1
   cond1(no)->o1->e
   cond1(yes)->cond2
   cond2(no)->o3->e
   cond2(yes)->cond3
   cond3(yes)->o2->e
   cond3(no)->o4->e
   ```

即可得到下面的流程图，其中start表示开始，condition表示条件判断，inputoutput表示输入输出，end表示结束。注意声明时，冒号后面必须加空格，如：st=>start: Start

Created with Raphaël 2.1.0Start输入年份nn能否被4整除？n能否被100整除？n能否被400整除？输出非闰年End输出闰年输出闰年输出非闰年yesnoyesnoyesno

Example2子程序

在编辑器中插入代码

```flow
st=>start: start:>http://www.baidu.com
op1=>operation: 操作1
cond1=>condition: YES or NO?
sub=>subroutine: 子程序
e=>end

st->op1->cond1
cond1(yes)->e
cond1(no)->sub(right)->op1  
``` 如上所示，subroutine表示子程序，sub(right)可定义连接点的位置，同时st=>start: start:>http://www.baidu.com 还可以在方块上插入超链接。
Created with Raphaël 2.1.0http://www.baidu.comstarthttp://www.baidu.com操作1YES or NO?End子程序yesno

Example3

在编辑器中插入代码

   ```flow
    st=>start: Start|past:>http://www.baidu.com
    e=>end:  Ende|future:>http://www.baidu.com
    op1=>operation:  My Operation
    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...|future
    st->op1(right)->cond
    cond(yes, right)->c2
    cond(no)->sub1(left)->op1
    c2(yes)->io->e
    c2(no)->op2->e
    ```
Created with Raphaël 2.1.0http://www.baidu.comStarthttp://www.baidu.com My Operationhttp://www.google.com Yes or Nohttp://www.google.com Good idea catch something...http://www.baidu.com Endehttp://www.baidu.com Stuff My Subroutineyesnoyesno

http://blog.csdn.net/ww1473345713/article/details/47620577

https://segmentfault.com/a/1190000006247465


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK