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])]->节点名称
特殊说明符有很多属性：
- 位置：有四个位置可以选择：
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 并行
需要规范路径path1和path2，可以选择方向
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!!!