mermaid 之 (Flowchart) 流程图

(Flowchart) 流程图是一种在Mermaid中常用的图形，用于描述一系列步骤和决策。以下是Mermaid中创建流程图的详细语法介绍：

前言

官网文档

基础语法

图的方向

• graph TD：从上到下 (Top Down)
• graph LR：从左到右 (Left to Right)
• graph RL：从右到左 (Right to Left)
• graph BT：从下到上 (Bottom Top)

节点

为了进一步完善节点描述的部分，我们可以根据每种形状的特点详细解释其用途和视觉表示。以下是各种节点形状的详细描述：

1. 文本框（默认形状）：

   • A[text]：使用方括号 [] 创建的是标准的矩形节点，适用于表示普通步骤或活动。

2. 圆角框：

   • B(text)：使用圆角方括号 () 创建的节点，边缘为圆角，通常用于表示过程或子过程。

3. 体育场型框：

   • C([text])：体育场型框（也称作胶囊形状）是使用方括号 [] 包裹在圆括号 () 内创建的，这种形状用于表示持续的过程或活动。

4. 数据库型框：

   • D[(text)]：数据库型框使用圆括号 () 包裹在方括号 [] 内，其形状类似于数据库符号，适用于表示数据存储或数据库相关操作。

5. 圆形框：

   • E((text))：使用双圆括号 (( )) 创建的节点是完全的圆形，常用来表示终点或起点。

6. 非对称框：

   • F>text]：非对称框使用大于符号 > 开头，方括号 ] 结尾，形状类似于标签页，适用于表示特殊的步骤或重要的决策点。

7. 菱形框：

   • G{text}：使用大括号 {} 创建的节点是菱形，这种形状通常用于表示决策点，如是/否的判断。

8. 六边形框：

   • H{ {text}}：使用双大括号 { { }} 创建的节点是六边形，可以用来表示条件或规则的改变。

9. 平行四边形框：

   • I[/text/] 和 J[\text\]：这两种节点分别使用斜线 / / 和反斜线 \ \ 创建平行四边形，通常用于表示输入或输出。

连接线

连接线在流程图中用以展示不同节点之间的关系与流向。Mermaid 提供多种类型的连接线，以适应不同的展示需求。下面是一些常用的连接线示例和它们的用途：

1. 标准连接线：

   • -->：这是最基本的连接线，带有一个箭头，表示从一个节点流向另一个节点。例如：

2. 无箭头直线：

   • ---：这种连接线没有箭头，用来表示两个节点之间的关系，但不强调特定的流向。例如：

3. 带点的连接线：

   • -.->：这种线是虚线带箭头，用于表示流程中的可选或次要步骤。例如：