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. 带点的连接线

    • -.->:这种线是虚线带箭头,用于表示流程中的可选或次要步骤。例如:
      开始
      可选步骤
  4. 粗线

    • ==>:粗线带箭头,用于强调流程中的主要或重要步骤。例如:
      重要开始
      关键步骤
  5. 标签化的连接线

    • -->|标签|:在连接线上添加文本标签,用于说明这条连接线的作用或条件。例如:
      判断点
      执行操作
      跳过
  6. 双向箭头

    • <-->:这种连接线带有两个箭头,表示两个节点之间的双向关系。例如:
      协作
      反馈

连接线标签

  • 在连接线上可以添加文本,例如 A -->|是| B,其中“是”是连接线上的标签。
  1. 简单示例
graph TD;A[开始] --> B{这里是否下雨?};B -- 是 --> C[带伞出门];B -- 否 --> D[直接出门];C --> E[到达目的地];D --> E;
开始
这里是否下雨?
带伞出门
直接出门
到达目的地

高级语法

  1. 子图

    • 使用 subgraph 关键字定义子图,这有助于组织复杂流程。
    • 子图可以嵌套,并可以有自己的标题。
  2. 样式定制

    • 可以对节点和连接线应用CSS样式,例如 classDef 定义样式类,class 应用样式。
  3. 链接

    • 节点可以包含链接,点击时可以导航到其他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;
处理阶段
数据验证
进行处理
需进一步处理?
完成处理
数据有效
检查数据
数据无效
开始处理
结束并报告错误

接着前面的内容,我们可以进一步探讨和补充Mermaid流程图的基础语法和高级语法,让您能够更加全面地掌握创建复杂流程图的技巧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/2969.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java23种设计模式-创建型模式之抽象工厂模式

抽象工厂模式(Abstract Factory Pattern)是一种创建型设计模式&#xff0c;它用于创建相关或相互依赖对象的一组&#xff0c;而无需指定其具体的类。这种模式特别适用于产品族的情况&#xff0c;即一组相互关联的产品对象。 存在四种角色&#xff1a; 角色1&#xff1a;抽象工…

Tiny11作者开源:利用微软官方镜像制作独属于你的Tiny11镜像

微软对Windows 11的最低硬件要求包括至少4GB的内存、双核处理器和64GB的SSD存储。然而&#xff0c;这些基本要求仅仅能保证用户启动和运行系统&#xff0c;而非流畅使用 为了提升体验&#xff0c;不少用户选择通过精简系统来减轻硬件负担&#xff0c;我们熟知的Tiny11便是其中…

【简单介绍下机器学习之sklearn基础】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

【机器学习】深度神经网络(DNN):原理、应用与代码实践

深度神经网络&#xff08;DNN&#xff09;&#xff1a;原理、应用与代码实践 一、深度神经网络&#xff08;DNN&#xff09;的基本原理二、DNN的优缺点分析三、DNN的代码实践四、总结与展望 在人工智能与机器学习的浪潮中&#xff0c;深度神经网络&#xff08;Deep Neural Netw…

演示在一台Windows主机上运行两个Mysql服务器(端口号3306 和 3307),安装步骤详解

目录 在一台Windows主机上运行两个Mysql服务器&#xff0c;安装步骤详解因为演示需要两个 MySQL 服务器终端&#xff0c;我只有一个 3306 端口号的 MySQL 服务器&#xff0c;所以需要再创建一个 3307 的。创建一个3307端口号的MySQL服务器1、复制 mysql 的安装目录2、修改my.in…

安全开发实战(4)--whois与子域名爆破

目录 安全开发专栏 前言 whois查询 子域名 子域名爆破 1.4 whois查询 方式1: 方式2: 1.5 子域名查询 方式1:子域名爆破 1.5.1 One 1.5.2 Two 方式2:其他方式 总结 安全开发专栏 安全开发实战​​http://t.csdnimg.cn/25N7H 前言 whois查询 Whois 查询是一种用…

MCU功耗测量

功耗测量 一、相关概念二、功耗的需求三、测量仪器仪表测量连接SMU功能SMU性能指标 四、功耗测量注意点板子部分存在功耗MCU方面&#xff0c;可能存在干扰项仪器仪表方面 一、相关概念 静态功耗和动态功耗&#xff1a;动态功耗为运行功耗&#xff0c;功耗测量注重每MHz下的功耗…

DevOps文化对团队有何影响?

DevOps文化对团队有很多积极影响&#xff0c;包括提高团队效率、促进沟通与协作、提高产品质量和推动创新等方面。然而&#xff0c;实施DevOps文化也需要一定的挑战&#xff0c;如改变团队成员的观念、引入新的工具和流程等。因此&#xff0c;团队需要充分了解DevOps文化的价值…

【深度学习】图像修复的一些模型

Mask-Aware Transformer 大空洞修复。 1、图像修复 Introduction 定义 图像修复&#xff08;Image inpainting、Image completion、image hole-filling&#xff09;指的是合成图像中缺失区域的过程&#xff0c;可以帮助恢复被遮挡或降质的部分。 在下图中&#xff0c;左图是…

【重磅开源】MapleBoot项目开发规范

基于SpringBootVue3开发的轻量级快速开发脚手架 &#x1f341;项目简介 一个通用的前、后端项目模板 一个快速开发管理系统的项目 一个可以生成SpringBootVue代码的项目 一个持续迭代的开源项目 一个程序员的心血合集 度过严寒&#xff0c;终有春日&#xff…

身份证实名认证接口的三种方式、C#实名认证接口

第一种是身份证号实名认证&#xff0c;主要针对证件的二要素信息进行核验&#xff0c;判断姓名和身份证号是否一致&#xff1b;第二种是身份证实名认证&#xff0c;在身份证号实名认证的基础上&#xff0c;增加了身份证头像真伪查验的功能&#xff1b;第三种是身份实名认证&…

macOS - 处理系统更新红点

文章目录 AttentionPrefBundleIDs 是一个字典 <key>AttentionPrefBundleIDs</key><dict><key>com.apple.preferences.softwareupdate</key><integer>1</integer></dict>首先在系统偏好设置中将软件更新中“自动保持我的Mac运行…

计算机网络-IS-IS基础配置实验

前面我们了解了IS-IS的一些基础理论&#xff0c;从建立邻接、链路状态数据库同步以及路由计算&#xff0c;现在开始学习下配置操作。 一、IS-IS配置 网络拓扑图&#xff1a; 拓扑图 IS-IS有Level级别的区分&#xff0c;Level-1可以是性能较低的设备只维护区域内的LSDB&#xff…

设置Mac上Git的多账户配置,用于同时访问GitLab和Gitee

在 Mac 上配置 Git 多账户&#xff08;比如 GitLab 和 Gitee&#xff09;的步骤如下&#xff1a; 1. 生成 SSH 密钥 首先&#xff0c;你需要为每个 Git 服务生成一个 SSH 密钥。在终端中运行以下命令&#xff0c;然后按照提示操作&#xff1a; ssh-keygen -t rsa -C "y…

vue - 路由守卫

Vue路由守卫是一种机制&#xff0c;用于在导航过程中对路由进行监控和控制。Vue Router提供了三种类型的路由守卫&#xff1a; 1. 全局前置守卫&#xff1a;router.beforeEach 2. 全局解析守卫&#xff1a;router.beforeResolve 3. 全局后置守卫&#xff1a;router.afterEac…

远程仓库.github/workflow的 yml如何配置

git 远程仓库.github/workflow的 yml如何配置 关于远程仓库 GitHub 的协作开发方法取决于将本地存储库中的提交发布到 GitHub 以便其他人查看、获取和更新。 远程 URL 是 Git 表达“代码存储位置”的奇特方式。该 URL 可以是您在 GitHub 上的存储库&#xff0c;也可以是其他用…

深入探索CSS3多列布局:重构文本流与网页排版的艺术

在网页设计领域&#xff0c;CSS3的多列布局&#xff08;Multicolumn Layout&#xff09;是一项革命性的改进&#xff0c;它赋予了设计师们创作类似报纸或杂志般的多栏布局的能力。本文将全面解析CSS3中与多列布局相关的属性&#xff0c;深入探讨其工作原理&#xff0c;并结合实…

Mybatis入门,day2,动态SQL

Mybatis入门&#xff0c;day2&#xff0c;动态SQL 文章目录 Mybatis入门&#xff0c;day2&#xff0c;动态SQL前言一、为什么要实现动态SQL二、使用步骤1.where和if2.set和if3.foreach方法 前言 动态 SQL 是 MyBatis 的强大特性之一。在 JDBC 或其它类似的框架中&#xff0c;开…

《R语言与农业数据统计分析及建模》学习——描述性统计分析

一、描述性统计概念和方法 1、概念和作用 描述性统计是对数据进行概括和描述&#xff0c;便于理解数据的特征、趋势和分布&#xff0c;帮助我们了解数据基本情况和总体特征&#xff0c;为后续更深入的数据分析和建模提供基础。 2、基础方法 &#xff08;1&#xff09;中心趋…

npm、yarn与pnpm详解

&#x1f525; npm、yarn与pnpm详解 &#x1f516; 一、npm &#x1f50d; 简介&#xff1a; npm是随Node.js一起安装的官方包管理工具&#xff0c;它为开发者搭建了一个庞大的资源库&#xff0c;允许他们在这个平台上搜索、安装和管理项目所必需的各种代码库或模块。 &#…