markdown流程图的使用在editormd中

------------

> ### markdown流程图的使用

> ### [参考文档](http://flowchart.js.org/ "参考文档")
> 流程图使用 SVG 来完成渲染

[TOC]
## 一、我们需要开启什么？
	 sequenceDiagram : true

> 并且根据文档引入 flowCharts.js 等有关文件

## 二、流程图的基本使用语法

> 使用 flow 标签来包围住，并且用 -> 符号来指向实体

> 下面这个图形代码, 下面反引号我转义了一下

```markdown
	st=>start: 用户登陆
	op=>operation: 登陆操作
	cond=>condition: 登陆成功 Yes or No?
	e=>end: 进入后台

st->op->cond
	cond(yes)->e
	cond(no)->op

```

> ### 通过官方给出的实例和说我们总结一下

> 我们可以用 => 来表示一个流程图的框， 框有很多类型我们认识一下。 我们知道流程图最小的单位是两个流程之间的一个联系，中间用一个箭头来表示两者之间的关系

| 中文 | 英文 | 符号 |
| ------------ | ------------ | ------------ |
| 箭头符号 | Arrowhead | => |
| 起点 | Terminal | start |
| 结束 | end | end |
| 程序 | Process | operation |
| 决策判断 | Decision | condition: Yes or No? |
| 输入/输出 | Input/Output | inputoutput |
| 已定义流程 (子程序) | Predefined Process | subroutine |
| 平行框 | parallel | parallel |

------------

```flow
	st=>start: 用户登陆
	op=>operation: 登陆操作
	cond=>condition: 登陆成功 Yes or No?
	e=>end: 进入后台

st->op->cond
	cond(yes)->e
	cond(no)->op
	```

> #### 上面的是目前 flowChart.js 目前已经实现的功能， 后续会更新其他更多的

```flow
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
```

------------

## 三、 具体用法

> #### 例如我们考中成绩合格的判断如何表示呢 ?

> ##### 我们把 flow 程序分成两部分

1. 第一部分定义其使用的框图
2. 第二部分用于指示其流程的流向

> #### 在整个框图中要有始有终

st=>start: 成绩
	cond=>condition: 大于60 Yes or No ?
	yes=>end: 合格
	no=>end: 不合格

st->cond
	cond(yes)->yes
	cond(no)->no

```flow
st=>start: 成绩
cond=>condition: 大于60 Yes or No ?
yes=>end: 合格
no=>end: 不合格

st->cond
cond(yes)->yes
cond(no)->no

```

------------

## 四、 如何在流程图中使用颜色？

> 其实很简单, 我们规定了几种颜色分别如下所示

------------

1. approved 标准色, 嗯大概是这种颜色
2. invalid 无效表示 (黑字)
3. rejected 拒绝表示
4. request 请求表示
5. current 当前表示 （白字黑底）

------------

> ### 颜色的使用方法直接在后面加 | 加上其颜色表示就行了

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

```

> ### 再一个我们可以在名称后面定义其地址 比如 
	end:>http://www.google.com

## 五、Directions 方向的使用

> ### 关于箭头方向的定义, 我们这里重新写一个流程。比如一个斐波那契数列非递归的实例

> 实例代码

```c
int fib(int i)
{
 if (i <= 2)//当求前两个数时，直接返回1；
 		return 1;
 int a = 1;
 int b = 1;
 int c = 0;
 while (i-2>0)//循环的条件，注意我们已经把前两个都算上了，所以循环条件一定要 -2；
 {
	 c = a + b;
 a = b;
	 b = c;
	 i--;
 }
 return c;
 }

```

> 实例流程图走向

```flow
fib=>start: fib(i) 程序开始
cond1=>condition: i <= 2
dif=>operation: a=1,b=1,c=0
cond2=>condition: (i-2) > 0 ?
dif2=>operation: c=a+b,a=b
dif3=>operation: i=i-1
return1=>end: return 1
return2=>end: return c

fib->cond1
cond1(yes)->return1
cond1(no)->dif
dif->cond2
cond2(yes)->dif2
dif2->dif3
dif3(left)->cond2
cond2(no)->return2

```

------------

> #### 那么我们可以看到我们在 dif3(left)->cond2 使用了 left, 表示它连接到 cond2 的方向是左边， 默认是右边。如果是 right 就是下面这种情况了

<center>
![图片alt](/media/editor/1595144801984_20200719154642514082.png ''图片title'')
</center>

> #### 那么这种情况肯定不是我们想看到的，其实在连接方面我们可以一直去连接这个箭头知道我们最终的目的, 例如 A->B->C- , 其实三个够多了如果还想要更多看看官方的文档有没有语法错误

> #### 方向其实很好理解， Directions 一共四个方向，矩形框分别也是四个方向

<center>
![图片alt](/media/editor/1595145352361_20200719155552640397.png ''图片title'')
</center>

语法如下
> -  top
> -  bottom
> -  left
> -  right

> 流程图代码

```flow
	fib=>start: fib(i) 程序开始
	cond1=>condition: i <= 2
	dif=>operation: a=1,b=1,c=0
	cond2=>condition: (i-2) > 0 ?
	dif2=>operation: c=a+b,a=b
	dif3=>operation: i=i-1
	return1=>end: return 1
	return2=>end: return c

fib->cond1
	cond1(yes)->return1
	cond1(no)->dif
	dif->cond2
	cond2(yes)->dif2
	dif2->dif3
	dif3(left)->cond2
	cond2(no)->return2

```

## 六、那么最后我们总结一下

> #### 在 editor.md 中划出流程图的过程其实很简单，我们需要明确两大部分定义， 连线定义以及记住几种标识。最后这个文章也是一个学习的总结如果对您有帮助可以东东手指，

> #### 为什么我用斐波那契数列来举例说明， 或许是冥冥之中的巧合？ 斐波那契数列可以构成黄金矩形

> #### 其实官方还有一个实例，就是给箭头增加颜色. 我没有成功 语法应该是这样的

st@>cond({"stroke":"Blue"})

<center>
[![黄金矩形](https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/34%2A21-FibonacciBlocks.png/400px-34%2A21-FibonacciBlocks.png "黄金矩形")](https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/34%2A21-FibonacciBlocks.png/400px-34%2A21-FibonacciBlocks.png "黄金矩形")
</center>

CXX1.COM专注内容视图分离

您还没有登录，请您登录后发表评论。

搜索：

TAG cloud