mermaid 之 (Flowchart) 流程图

本文主要是介绍mermaid 之 (Flowchart) 流程图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

前言

官网文档

基础语法

图的方向

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

节点

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

文本框（默认形状）：
- A[text]：使用方括号 [] 创建的是标准的矩形节点，适用于表示普通步骤或活动。
圆角框：
- B(text)：使用圆角方括号 () 创建的节点，边缘为圆角，通常用于表示过程或子过程。
体育场型框：
- C([text])：体育场型框（也称作胶囊形状）是使用方括号 [] 包裹在圆括号 () 内创建的，这种形状用于表示持续的过程或活动。
数据库型框：
- D[(text)]：数据库型框使用圆括号 () 包裹在方括号 [] 内，其形状类似于数据库符号，适用于表示数据存储或数据库相关操作。
圆形框：
- E((text))：使用双圆括号 (( )) 创建的节点是完全的圆形，常用来表示终点或起点。
非对称框：
- F>text]：非对称框使用大于符号 > 开头，方括号 ] 结尾，形状类似于标签页，适用于表示特殊的步骤或重要的决策点。
菱形框：
- G{text}：使用大括号 {} 创建的节点是菱形，这种形状通常用于表示决策点，如是/否的判断。
六边形框：
- H{{text}}：使用双大括号 {{ }} 创建的节点是六边形，可以用来表示条件或规则的改变。
平行四边形框：
- I[/text/] 和 J[\text\]：这两种节点分别使用斜线 / / 和反斜线 \ \ 创建平行四边形，通常用于表示输入或输出。

连接线

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

标准连接线：
- -->：这是最基本的连接线，带有一个箭头，表示从一个节点流向另一个节点。例如：
无箭头直线：
- ---：这种连接线没有箭头，用来表示两个节点之间的关系，但不强调特定的流向。例如：
带点的连接线：
- -.->：这种线是虚线带箭头，用于表示流程中的可选或次要步骤。例如：
粗线：
- ==>：粗线带箭头，用于强调流程中的主要或重要步骤。例如：
标签化的连接线：
- -->|标签|：在连接线上添加文本标签，用于说明这条连接线的作用或条件。例如：
双向箭头：
- <-->：这种连接线带有两个箭头，表示两个节点之间的双向关系。例如：

连接线标签：

在连接线上可以添加文本，例如 A -->|是| B，其中“是”是连接线上的标签。

简单示例

graph TD;A[开始] --> B{这里是否下雨?};B -- 是 --> C[带伞出门];B -- 否 --> D[直接出门];C --> E[到达目的地];D --> E;

高级语法

子图：
- 使用 subgraph 关键字定义子图，这有助于组织复杂流程。
- 子图可以嵌套，并可以有自己的标题。
样式定制：
- 可以对节点和连接线应用CSS样式，例如 classDef 定义样式类，class 应用样式。
链接：
- 节点可以包含链接，点击时可以导航到其他URL或触发动作。

示例

这是一个更复杂的流程图示例，展示了以上语法的应用：

graph TD;A[开始处理] --> B{检查数据};B -- 是 --> C[数据有效];B -- 否 --> D[数据无效];C --> E{需进一步处理?};E -- 是 --> F[进行处理];E -- 否 --> G[完成处理];D --> H[结束并报告错误];subgraph 数据验证B --> CB --> Dendsubgraph 处理阶段E --> FE --> GendclassDef blue fill:#1f77b4,color:#fff;classDef green fill:#2ca02c,color:#fff;class C,D green;class E,F blue;