mermaid 之 (Flowchart) 流程图

HaSaKing_721

已于 2024-04-28 10:36:01 修改

阅读量1.4k

点赞数 28

分类专栏： MarkDown 文章标签： oracle 数据库 MarkDown

于 2024-04-24 19:16:03 首次发布

本文链接：https://blog.csdn.net/qq_28369007/article/details/138166855

版权

MarkDown 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(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 --> C
        B --> D
    end

    subgraph 处理阶段
        E --> F
        E --> G
    end

    classDef blue fill:#1f77b4,color:#fff;
    classDef green fill:#2ca02c,color:#fff;
    class C,D green;
    class E,F blue;