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.0start

\```mermaid
flowchat
st=>start: start
\```

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

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

2.2 结束

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

Created with Raphaël 2.3.0end

\```mermaid
flowchat
e=>end: end
\```

2.3 操作

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

Created with Raphaël 2.3.0operation

\```mermaid
flowchat
op1=>operation: operation
\```

2.4 输入输出

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

Created with Raphaël 2.3.0IO

\```mermaid
flowchat
io=>inputoutput: IO
\```

2.5 子程序

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

Created with Raphaël 2.3.0subroutine

\```mermaid
flowchat
sub1=>subroutine: subroutine
\```

2.6 判断

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

Created with Raphaël 2.3.0condition

\```mermaid
flowchat
cond=>condition: condition
\```

2.7 并行

允许同时发生多个流程

Created with Raphaël 2.3.0parallel

\```mermaid
flowchat
para=>parallel: parallel
\```

3 连接语法

<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]节点名称[(特殊说明符1[,特殊说明符2])]->节点名称[(特殊说明符1[,特殊说明符2])]->节点名称

特殊说明符有很多属性：

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

Note: []内部是可选的

4 连接类型

4.1 开始

可以选择方向

startVar(<direction>)->nextNode

4.2 结束

previousNode->endVar

4.3 操作

可以选择方向

operationVar(<direction>)->nextNode

4.4 输入输出

可以选择方向

inputoutputVar(<direction>)->nextNode

4.5 子程序

可以选择方向

subroutineVar(<direction>)->nextNode

4.6 判断

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

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

4.7 并行

需要规范路径path1和path2，可以选择方向

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

4.8 链接

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

5 示例

Created with Raphaël 2.3.0StartMy Operationlinear or polynomial catch something...EndMy Subroutine3 possibilitiesyesno

\```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 possibilitiesst->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!!!

Markdown Flow 画流程图详解相关推荐

应用架构、业务架构、技术架构和业务流程图详解「建议收藏」
应用架构.业务架构.技术架构和业务流程图详解「建议收藏」应用架构(ApplicationArchitecture)是描述了IT系统功能和技术实现的内容.应用架构分为以下两个不同的层次:企业级的应用架 ...
ppt如何旋转流程图_几种流程图详解.ppt
几种流程图详解业务流程图数据流程图功能结构图信息系统流程图系统分析 --管理业务流程图系统分析 --管理业务流程图例:招生业务流程图示例例:招生录取业务流程图示例系统分析 --数据流 ...
markdown 流程图js_如何在Markdown中画流程图
如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用(现在 ...
smt工艺制作流程图详解
smt工艺制作流程图详解 SMT(Surface Mounted Technology)是一项综合的系统工程技术,其涉及范围包括基板.设计.设备.元器件.组装工艺.生产辅料和管理等.随着SMT技术的产 ...
php js实现流程图,详解js中构造流程图的核心技术JsPlumb（2）_javascript技巧
前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式 ...
svg画半圆详解（L指令、M指令、A指令）
svg画半圆了解画半圆的各个指令 L指令 M指令 A指令画整半圆推荐:svg画整圆详解推荐:svg的text标签字体.颜色.样式.大小.居中详解接到需求,要求做出一个这样的活动转盘,,,,, ...
python循环嵌套流程图,详解Python 循环嵌套
Python 语言允许在一个循环体里面嵌入另一个循环. Python for 循环嵌套语法: for iterating_var in sequence: for iterating_var in s ...
神器——写Markdown来画流程图、时序图
目录 typora 流程图例子: 2.亿图图示-画产品架构图 typora 流程图例子: sequence: 标准流程图 flow 语法: https://www.jianshu.com/p/af ...
GitHub牛逼开源项目！像写 Markdown 一样画流程图
点击上方"Github爱好者社区",选择星标回复"资料",获取小编整理的一份资料文章转载于:GitHub黑板报今天推荐的这个项目是「mermaid」,一 ...

Markdown Flow 画流程图详解

流程图

1 节点语法

2 节点类型

2.1 开始

2.2 结束

2.3 操作

2.4 输入输出

2.5 子程序

2.6 判断

2.7 并行

3 连接语法

4 连接类型

4.1 开始

4.2 结束

4.3 操作

4.4 输入输出

4.5 子程序

4.6 判断

4.7 并行

4.8 链接

5 示例

Markdown Flow 画流程图详解相关推荐

最新文章

热门文章