Flow流程图：语法

flow 是标准流程图。mermaid是样式流程图，不是一个标准。
请注意，如果不是标准化代码，则无是去显示预览。


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

[]内部的是可选的。
nodeName定义流程图文档中的节点变量名称。

nodeType定义节点的类型。有关详细信息，请参阅节点类型。
nodeText是将插入到节点中的文本。允许换行并将反映在呈现的节点文本中。
flowstate是可选的，它使用|为节点指定额外样式的运算符。
urlLink是可选的，它使用:>运算符指定要链接到的 url。
Note:冒号与节点内容之间一定要有空格

2 节点类型
2.1 开始
用作流开始的第一个节点。默认是start
st=>start: start



2.2 结束
用作流结束的最后一个节点。默认是end
e=>end: end


2.3 操作
表示需要在流中进行的操作。
op1=>operation: operation


2.4 输入输出
表示在流中发生的输入和输出。
io=>inputoutput: IO


2.5 子程序

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


2.6 判断

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


2.7 并行
允许同时发生多个流程
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 链接
可以使用:>操作符来将外部连接添加到节点中。
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com

微信扫二维码转发分享

MarkDown流程图全指导

by Zoomla!逐浪CMS发哥 2020-09-11 18:03:32

准备工作

Markdown是一个轻量级的标记语言，使用普通文本编辑器就能快速编写，不仅显示格式丰富，功能也毫不含糊，分享一个md格式的API请求流程图。

在使用Markdown图表前，你首先需要有解析工具，在本地开发，用vs code再加Markdown preview插件，显然是可以胜任。

由于有些浏览器渲染不出来，所以少数样式流程图带用了图片插入，在强解析下会呈现出相同的两个效果。

基本原理

Markdown图表支持类型包括：

• 流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言
• 时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言
• 甘特图：指定 mermaid 解析语言
  

这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。

一、流程图
详解标准流程图

基本语法：

• 定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格）
• 关键字：
  
  
  • start 流程开始，以圆角矩形绘制
  • opearation 操作，以直角矩形绘制
  • condition 判断，以菱形绘制
  • subroutine 子流程，以左右带空白框的矩形绘制
  • inputoutput 输入输出，以平行四边形绘制
  • end 流程结束，以圆角矩形绘制
    
  
  

• 定义模块间的流向：
  
  
  • 模块1 id->模块2 id ：一般的箭头指向
  • 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向
    

注意，每个形状都是有各自含义的：

• 圆角矩形：表示开始和结束
• 矩形：表示过程，也就是整个流程中的一个环节
• 菱形：表示判断、决策
• 圆形：表示连接。为避免流程过长或有线段交叉，可将流程切开，圆形即相当于切口处的连接头（成对出现）