Markdown流程图绘制

最新推荐文章于 2025-06-19 14:09:17 发布

原创最新推荐文章于 2025-06-19 14:09:17 发布 · 6.3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#markdown

本文介绍了如何在Markdown中使用flowchart.js和mermaid.js绘制流程图，包括标准流程图和简约流程图的语法，以及相关注意事项。建议使用ProcessOn等工具绘制流程图，对于简单流程图可直接在Markdown编辑器中绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、语法

流程图的绘制主要基于flowchart.js和mermaid.js。当需要在Markdown中绘制流程图时，需要把相关代码放在如下框架中。

```mermaid
category
语句
```

其中category根据流程图的种类不同而不同，其取值如下表所示。

流程图种类	取值
标准流程图	flowchart
简约流程图	graph LR/TD
UML图	sequenceDiagram
甘特图	gantt
类图	classDiagram

由于前两种使用较为广泛，故只介绍flowchart和graph LR/TD。各种类流程图范例如下所示：

标准流程图

简约流程图

UML图

甘特图

类图

1. 标准流程图

1）定义元素

需要定义元素名称、元素类型及元素内容。基本语法：name=>type: content，如st=>start: 开始,注意冒号后一定要有空格。其中 name 主要用于连接，type 确定框的形状与含义，content 即框中表达的文本内容。元素类型(type)如下表所示：

类型	表示
开始/结束框（圆角框）	start/end
运算框（方形框）	operation
输入输出框（平行四边形框）	inputoutput
判断框（菱形框）	condition
子流程（特殊方框）	subroutine

2）建立连接

当只定义元素而没有连接时，画面会显示一片空白，算是预留的画布。当存在连接时，画布上才会显示图像。使用 -> 来表示连接。

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？
st->op->cond
cond(yes)->e
cond(no)->op
```

注意：

condition元素使用时要在后面用()括起条件结果，必须是yes/no，即cond(yes)，cond(no)。
除type:后，不要在语句中出现空白字符（空格、制表符等）。
直接输入```flow可以快速创建标准流程图框架。

2. 简约流程图

简约流程图对标准流程图的语法进行了简化，将定义与连接结合起来，更易理解和使用。通过基本框架中的graph LR/graph TD来确定其为横向/纵向。其使用 - -> 来连接不同元素，使用字符定义元素名，括号类型定义元素形状，括号里的文本定义元素内容。不同括号类型如下所示：

括号类型	含义	举例
[ ]	表示方形框（即标准流程图中的运算框）,默认值	A[a=1]
( )	表示圆角框（即标准流程图中的开始/结束框）	B(结束)
{ }	表示菱形框（即标准流程图中的判断框）	C{a>2?}
\| \|	表示条件结果之一，其后要加上对应执行结果，一般前面与判断框相连	C–>\|真\|a=a+1，C–>\|假\|a=a-1