VScode Markdown Flow
安装插件Markdown Preview Enhanced
有个东西叫做flowchart.js
,就是专门用于绘画流程图,节点和连接是分开定义的,这样节点可以重复使用,连接可以快速更改。
参考文档:https://github.com/adrai/flowchart.js
nodeName=>nodeType: nodeText[|flowstate][:>urlLink]
节点名字 => 节点类型 : 节点内容 [|节点运算符][:> 链接的url]
[]内部的是可选的。
nodeName
定义流程图文档中的节点变量名称。nodeType
定义节点的类型。有关详细信息,请参阅节点类型。nodeText
是将插入到节点中的文本。允许换行并将反映在呈现的节点文本中。flowstate
是可选的,它使用|为节点指定额外样式的运算符。urlLink
是可选的,它使用:>运算符指定要链接到的 url。Note:冒号与节点内容之间一定要有空格
用作流开始的第一个节点。默认是start
\```mermaid
flowchat
st=>start: start
\```
Remark:在实际中上面代码的\
是不用写的,为了让\```\
能写出来,才在本文中加了\
。单个节点是不会被显示出来的,只有连接起来才可以,为了显示前面这张图,其实源码加了st->
,实际上是不用加的 。后面都是这样子,就不一一赘述。
Remark:在转移到CSDN之后发现代码都改变了,而且不容易改为原来的代码,上面的代码块的mermaid
都改为flow
,然后把flowchat
都删掉。
用作流结束的最后一个节点。默认是end
\```mermaid
flowchat
e=>end: end
\```
表示需要在流中进行的操作。
\```mermaid
flowchat
op1=>operation: operation
\```
表示在流中发生的输入和输出。
\```mermaid
flowchat
io=>inputoutput: IO
\```
表示在流程中发生的子程序,并且应该由另一个流程图来记录该子程序。
\```mermaid
flowchat
sub1=>subroutine: subroutine
\```
允许条件或逻辑语句让流引导到两个路径之一
\```mermaid
flowchat
cond=>condition: condition
\```
允许同时发生多个流程
\```mermaid
flowchat
para=>parallel: parallel
\```
[([, [[([, ]
节点名称[(特殊说明符1[,特殊说明符2])]->节点名称[(特殊说明符1[,特殊说明符2])]->节点名称
特殊说明符有很多属性:
top
,bottom
,left
,right
,是指出发节点的框的四个位置。Note: []内部是可选的
可以选择方向
startVar()->nextNode
previousNode->endVar
可以选择方向
operationVar()->nextNode
可以选择方向
inputoutputVar()->nextNode
可以选择方向
subroutineVar()->nextNode
所需的逻辑规范yes
或者no
,可以选择方向
conditionalVar(yes, )->nextNode1
conditionalVar(no, )->nextNode2
需要规范路径path1
和path2
,可以选择方向
parallelVar(path1, )->nextNode1
parallelVar(path2, )->nextNode2
可以使用:>
操作符来将外部连接添加到节点中。
\```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!!!