Markdown Flow 画流程图详解

VScode Markdown Flow

安装插件Markdown Preview Enhanced

流程图

有个东西叫做flowchart.js,就是专门用于绘画流程图,节点和连接是分开定义的,这样节点可以重复使用,连接可以快速更改。

参考文档:https://github.com/adrai/flowchart.js

1 节点语法

nodeName=>nodeType: nodeText[|flowstate][:>urlLink]
节点名字 => 节点类型 : 节点内容 [|节点运算符][:> 链接的url]

[]内部的是可选的。

  • nodeName定义流程图文档中的节点变量名称。
  • nodeType定义节点的类型。有关详细信息,请参阅节点类型。
  • nodeText是将插入到节点中的文本。允许换行并将反映在呈现的节点文本中。
  • flowstate是可选的,它使用|为节点指定额外样式的运算符。
  • urlLink是可选的,它使用:>运算符指定要链接到的 url。

Note:冒号与节点内容之间一定要有空格

2 节点类型

2.1 开始

用作流开始的第一个节点。默认是start

Created with Raphaël 2.3.0 start
\```mermaid
flowchat
st=>start: start
\```

Remark:在实际中上面代码的\是不用写的,为了让\```\能写出来,才在本文中加了\。单个节点是不会被显示出来的,只有连接起来才可以,为了显示前面这张图,其实源码加了st->,实际上是不用加的 。后面都是这样子,就不一一赘述。

Remark:在转移到CSDN之后发现代码都改变了,而且不容易改为原来的代码,上面的代码块的mermaid都改为flow,然后把flowchat都删掉。

2.2 结束

用作流结束的最后一个节点。默认是end

Created with Raphaël 2.3.0 end
\```mermaid
flowchat
e=>end: end
\```

2.3 操作

表示需要在流中进行的操作。

Created with Raphaël 2.3.0 operation
\```mermaid
flowchat
op1=>operation: operation
\```

2.4 输入输出

表示在流中发生的输入和输出。

Created with Raphaël 2.3.0 IO
\```mermaid
flowchat
io=>inputoutput: IO
\```

2.5 子程序

表示在流程中发生的子程序,并且应该由另一个流程图来记录该子程序。

Created with Raphaël 2.3.0 subroutine
\```mermaid
flowchat
sub1=>subroutine: subroutine
\```

2.6 判断

允许条件或逻辑语句让流引导到两个路径之一

Created with Raphaël 2.3.0 condition
\```mermaid
flowchat
cond=>condition: condition
\```

2.7 并行

允许同时发生多个流程

Created with Raphaël 2.3.0 parallel
\```mermaid
flowchat
para=>parallel: parallel
\```

3 连接语法

[([, [[([, ]

节点名称[(特殊说明符1[,特殊说明符2])]->节点名称[(特殊说明符1[,特殊说明符2])]->节点名称

特殊说明符有很多属性:

  1. 位置:有四个位置可以选择:top,bottom,left,right,是指出发节点的框的四个位置。

Note: []内部是可选的

4 连接类型

4.1 开始

可以选择方向

startVar()->nextNode

4.2 结束

previousNode->endVar

4.3 操作

可以选择方向

operationVar()->nextNode

4.4 输入输出

可以选择方向

inputoutputVar()->nextNode

4.5 子程序

可以选择方向

subroutineVar()->nextNode

4.6 判断

所需的逻辑规范yes或者no,可以选择方向

conditionalVar(yes, )->nextNode1
conditionalVar(no,  )->nextNode2

4.7 并行

需要规范路径path1path2,可以选择方向

parallelVar(path1, )->nextNode1
parallelVar(path2, )->nextNode2

4.8 链接

可以使用:>操作符来将外部连接添加到节点中。

5 示例

Created with Raphaël 2.3.0 Start My Operation linear or polynomial catch something... End My Subroutine 3 possibilities yes no
\```mermaid
flowchat
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: linear or polynomial :>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: 3 possibilities

st->op1->cond
cond(true)->io->e
cond(false)->sub1(right)
sub1(right)->para
para(path1, top)->cond
para(path2, right)->op1
para(path3, bottom)->e
\```

Succeed!!!

你可能感兴趣的:(写代码啦,流程图,vscode)