Markdow流程图制作教程

Posted 没事就要敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Markdow流程图制作教程相关的知识,希望对你有一定的参考价值。

1 横向流程图

源码:

	```mermaid
	graph LR
	A[方形] -->B(圆角)
	    B --> C条件a
	    C -->|a=1| D[结果1]
	    C -->|a=2| E[结果2]
	    F[横向流程图]
	```

效果:

a=1
a=2
方形
圆角
条件a
结果1
结果2
横向流程图

2 竖向流程图

源码:

	```mermaid
	graph TD
	A[方形] --> B(圆角)
	    B --> C条件a
	    C --> |a=1| D[结果1]
	    C --> |a=2| E[结果2]
	    F[竖向流程图]
	```

效果:

a=1
a=2
方形
圆角
条件a
结果1
结果2
竖向流程图

3 标准流程图

源码:

	```mermaid
	flowchat
	st=>start: 开始框
	op=>operation: 处理框
	cond=>condition: 判断框(是或否?)
	sub1=>subroutine: 子流程
	io=>inputoutput: 输入输出框
	e=>end: 结束框
	st->op->cond
	cond(yes)->io->e
	cond(no)->sub1(right)->op
	```

效果:

Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

4 标准流程图(横向)

源码:

	```mermaid
	flowchat
	st=>start: 开始框
	op=>operation: 处理框
	cond=>condition: 判断框(是或否?)
	sub1=>subroutine: 子流程
	io=>inputoutput: 输入输出框
	e=>end: 结束框
	st(right)->op(right)->cond
	cond(yes)->io(bottom)->e
	cond(no)->sub1(right)->op
	```

效果:

Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 以上是关于Markdow流程图制作教程的主要内容,如果未能解决你的问题,请参考以下文章

vscode编辑器markdow文档导出为pdf

VSCode自定义代码片段——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

Markdow的使用

Markdow常用基础语法