OD(8)之Mermaid流程图(flowcharts)使用详解

2024-02-22 06:28
文章标签 使用 详解 流程图 od mermaid flowcharts

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

OD(8)之Mermaid流程图(flowcharts)使用详解

Author: Once Day Date: 2024年2月20日

漫漫长路才刚刚开始…

全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客

参考文章:

  • 关于 Mermaid | Mermaid 中文网 (nodejs.cn)
  • Mermaid | Diagramming and charting tool
  • ‍‌⁡⁤‍‍⁢‌‬⁡⁤⁢‍‌⁣⁢⁢⁤⁣‌‌⁢⁣⁢⁤⁡‌‌⁤⁤⁢⁡⁡⁢‍⁢⁣⁤‌Mermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)
  • Draw Diagrams With Markdown - Typora Support (typoraio.cn)
  • Mermaid 使用教程：从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)
  • 流程图语法 | Mermaid 中文网 (nodejs.cn)

文章目录

      • OD(8)之Mermaid流程图(flowcharts)使用详解
        • 1. Mermaid介绍
        • 2. 流程图(Flowcharts)
          • 2.1 介绍
          • 2.2 带标题的单节点
          • 2.3 节点方向
          • 2.4 节点形状
          • 2.5 节点链接的形状
          • 2.6 子图(Subgraphs)
          • 2.7 JS动态事件支持
          • 2.8 注释代码
          • 2.9 自定义节点样式
          • 2.10 对fontawesome的支持

1. Mermaid介绍

Mermaid 是一种轻量级的、基于文本的图表绘制语法和工具，它允许开发者和技术专业人员通过简单的文本描述来创建图表，这种方法避开了复杂的图形编辑器，让图表的创建和代码一样容易被版本控制系统管理。Mermaid 由 Knut Sveidqvist 于 2014 年创立，并迅速在技术社区中获得了广泛的认可，因为它解决了在文档中嵌入可维护图表的痛点问题。

Mermaid 支持多种图表类型，包括流程图（Flowchart）、序列图（Sequence Diagram）、甘特图（Gantt Diagram）、类图（Class Diagram）、状态图（State Diagram）等。这些图表广泛应用于软件设计、项目管理、系统建模等领域。例如，开发者可以使用流程图来描述一个算法的执行流程，或者用序列图来展示系统组件间的交互。

使用 Mermaid 的一个典型例子是，在 Markdown 文件中嵌入图表代码。由于 Markdown 本身支持文本格式，结合 Mermaid，用户可以在同一个文件中编写文档和绘制图表，非常适合编写技术文档和手册。此外，Mermaid 的图表代码简洁明了，易于理解和修改，这对于团队协作和文档维护来说是一个巨大的优势。

Mermaid 的另一个亮点是它可以集成到各种文档工具和平台，如 GitLab、GitHub、Confluence 等，这使得在这些平台上直接渲染 Mermaid 图表成为可能。此外，Mermaid 还提供了一个在线编辑器，用户可以在不安装任何工具的情况下快速创建和预览图表。

然而，Mermaid 并不是万能的。它虽然在简单性和易用性方面表现出色，但在复杂图表的定制性和美观性上可能无法与专业的图表绘制工具相媲美。例如，当图表元素特别多或者需要高度定制风格时，Mermaid 的限制可能就会显现出来。

总的来说，Mermaid 为那些希望以代码形式快速生成和维护图表的用户提供了一个非常实用的解决方案。它以其独特的方式降低了制图的门槛，使得不擅长图形设计的技术人员也能轻松创建出清晰的图表来支撑他们的工作。

Mermaid 的语法简单直观，对于熟悉 Markdown 的用户来说，学习成本较低。它支持多种图表类型，每种类型都有其特定的语法规则。例如，流程图（Flowchart）的基本语法如下：

链接
方形
圆形
圆角方形
菱形

Mermaid 的灵活性和易用性使其成为开发者和文档编写者的首选工具之一，特别是在需要频繁更新图表内容的场景中。

2. 流程图(Flowcharts)
2.1 介绍

流程图（Flowchart）是一种广泛使用的图表工具，用于描述各种过程或系统的运作流程。它通过一系列不同形状的图形和箭头来表示步骤、决策点及流向，这些图形按照特定的逻辑顺序连接起来，形成了流程的视觉表现。流程图起源于1920年代，是工业工程领域的产物，如今它已经成为一个跨学科的通用工具，被广泛应用于业务流程管理、程序设计、算法展示等多个领域。

流程图最基本的组成元素包括矩形（表示一个处理步骤），菱形（表示一个决策点），椭圆形（通常用于表示起始和结束点），以及箭头（表示流程的方向）。此外，还有一些其他的符号用于表示数据的输入输出、预定义的处理过程、并行操作等。流程图的语言和规则非常简单，使得它非常容易被人们理解和采用。

在软件开发领域，流程图特别有用，因为它可以帮助开发者在编写代码之前理清逻辑，确保算法的正确性。同时，它也是沟通和文档化复杂过程的有效工具。当一个过程需要多人协作或者向客户展示时，流程图可以提供一个清晰、易于理解的视图。

尽管流程图对于描述简单和中等复杂度的过程非常有效，但在面对非常复杂或者含有大量重复元素的系统时，流程图可能会变得难以管理和阅读。在这些情况下，可能需要辅以其他类型的图表或文档来降低复杂性。

现如今，很多软件和在线工具都支持流程图的绘制，如 Microsoft Visio、Lucidchart 和前文提到的 Mermaid。这些工具通过提供丰富的模板和图形元素，进一步简化了流程图的创建过程。尽管流程图的绘制已经变得越来越容易，但是创建一个既准确又有效的流程图仍然需要清晰的思路和对过程深刻的理解。

流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid 代码定义了如何制作节点和边，并适应不同的箭头类型、多方向箭头以及任何与子图的链接。

2.2 带标题的单节点

下面是一个简单的带文本节点:

---
title: Flowcharts simple example
---
flowchart LRid1["❤ Once day"]

在这里插入图片描述

使用 "❤"可以将 unicode 文本括起来，从而支持该编码格式:

  • --- 和 title: Flowcharts simple example ，这些行代表Markdown中的前言部分，用于为文档定义元数据。在这里设置了标题为"Node with text"。
  • flowchart LR — 这指明了要创建一个流程图，并且图的流向是从左到右（Left to Right）。
  • id1["❤ Once day"] — 这定义了流程图中的一个节点，节点的ID是id1。方括号中的文本"❤ Once day"是节点的显示内容，其中包括了文本和一个Unicode字符（心形符号）。

使用双引号和反引号可以将 Markdown 文本括起来。

flowchart LRmarkdown["`This **is** _Markdown_`"]newLines["`Line1Line 2Line 3`"]markdown --> newLines
`This **is** _Markdown_`
`Line1
Line 2
Line 3`

如果有一些破坏语法的特殊字符，可以放在引号内渲染，如果有一些字符需要进行转义，如下:

flowchart LRA["A double quote:#quot;"] --> B["A dec char:#9829;"]
A double quote:"
A dec char:♥
2.3 节点方向
缩写描述英文描述
TB从上到下Top to bottom
TD自上而下/与自上而下相同Top-down/ same as top to bottom
BT从下到上Bottom to top
RL右到左Right to left
LR左到右Left to right

使用示例:

flowchart TDA[上面] --> B[下面]
上面
下面
2.4 节点形状
节点形状示例代码
默认矩形节点A--B/A[rectangle]
圆边矩形节点A(Node with round edges)
体育场形状节点A([Stadium-shaped node])
子程序形状节点A[[Subroutine node]]
圆柱形节点A[(Cylindrical node)]
圆形节点A((Circle node))
不对称节点A>asymmetric shape]
菱形节点A{Rhombus node}
六边形节点A{{Hexagon node}}
平行四边形A[/Parallelogram/]/A[\Parallelogram alt\]
梯形A[/Trapezoid\]/A[\Trapezoid alt/]
双圈节点A(((Double circle node)))

使用示例:

flowchart LRA[(Cylindrical node)] --> B([Stadium-shaped node]) --> C[[Subroutine node]]D[rectangle] --> E(Node with round edges) --> F((Circle node))H>asymmetric shape] --> I{Rhombus node} --> J{{Hexagon node}}K[/Parallelogram/] --> L[\Parallelogram alt\] --> M(((Double circle node)))T[/Trapezoid\] --> R[\Trapezoid alt/]

在这里插入图片描述

2.5 节点链接的形状
链接方式描述示例代码
带箭头的链接带有箭头的直线链接A --> B
打开的链接没有箭头的直线链接A --- B
链接上的文本在链接上添加文本`A -->
带有箭头和文本的链接在带箭头的链接上添加文本`A -->
虚线链接虚线链接A -.-> B
带文本的虚线链接在虚线上添加文本A -. Text .-> B
粗链接加粗的链接A == B
带文本的粗链接在粗线上添加文本A == Text == B
看不见的链接不可见的链接A ~~~ B
链接的链接同一行多个链接A -- text --> B -- text2 --> C
节点多个链接同一个节点多个链接a --> b & c--> d（a分别到b和c，再到d)
新的箭头类型新的箭头类型，如圆边和交叉边缘A --o B 或 A --x B
多方向箭头多方向箭头A o--o B 或 A x--x D
最小链接长度设置链接的最小长度(破折号越多越长)A ------ B

流程图中的每个节点最终根据其链接到的节点分配给渲染图中的一个等级，即垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的等级，但你可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。

下面是各种形状点链接加长的方式(对于点链接或粗链接，要添加的字符是等号或点):

长度123
普通的------------
正常带箭头-->--->---->
厚的============
粗带箭头==>===>====>
点状-.--..--...-
带有箭头的虚线-.->-..->-...->

示例展示(在同一行中声明多个节点链接，这不是推荐做法，最好的方式是逐条写出，易于理解和阅读):

flowchart TBA & B--> C & D
A
B
C
D

当链接标签写在链接中间时，必须在链接右侧添加额外的破折号来提高链接长度:

flowchart LRA[Start] --> B{Is it?}B -- Yes --> C[OK]C --x D[Rethink]D -.-> BB == No ====> E[End]
Yes
No
Start
Is it?
OK
Rethink
End
2.6 子图(Subgraphs)

Mermaid的子图（Subgraphs）功能允许用户在流程图中创建一个独立的图表区域，这个区域可以包含自己的节点和链接，同时保持与主流程图的连接。以下是子图功能的详细描述：

  1. 子图定义：
    子图可以通过subgraph关键字定义，后面跟着子图的标题和end内的节点定义。例如：

    flowchart LRsubgraph "Title" A --> Bend
    Title
    B
    A

    这将在流程图中创建一个名为“Title”的子图，包含节点A和B。

  2. 子图方向：
    子图可以有自己的方向设置，如自上而下（TB）或自左到右（LR）。这可以通过在子图定义中添加方向声明来实现：

    flowchart LRsubgraph "Title"direction RLA --> Bend
    Title
    B
    A

    这将使得子图内的节点按照自上而下的方向排列。

  3. 子图ID：
    子图可以被赋予一个ID，这在需要引用或操作特定子图时非常有用。例如：

    flowchart LRsubgraph id1 [one]A --> Bend
    one
    B
    A

    这里，子图被赋予了ID“id1”。

  4. 子图内部链接：
    在子图内部，可以定义节点之间的链接，就像在主流程图中一样。例如：

    flowchart LRsubgraph "Title"A --> BA --> Cend
    Title
    B
    A
    C

    这将在子图中创建从A到B和从A到C的链接。

  5. 子图与外部链接：
    子图的节点可以与外部节点链接，这允许在子图和主流程图之间建立连接。例如：

    flowchart LRsubgraph "Title"A --> BendA --> D
    Title
    B
    A
    D

    这里，子图中的节点A同时链接到子图内部的B和外部的D。

  6. 子图方向继承：
    如果子图的节点链接到外部节点，子图将继承父图的方向。这意味着子图的方向声明将被忽略。例如：

    flowchart LRC ===> Asubgraph "Title"direction TBA --> Bendsubgraph "Another Title"A --> Dend
    Another Title
    Title
    D
    B
    A
    C

    在这个例子中，尽管“Title”子图有自己的方向声明，但由于A同时链接到外部的C和子图内部的D，所以子图将继承父图的方向。

子图功能为Mermaid流程图提供了额外的组织和结构化能力，使得复杂的流程可以被分解为更易于理解和管理的部分。

下面是一个复杂的实例用于展示子图嵌套的效果，如下:

flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2
TOP
B1
f1
i1
B2
f2
i2
A
B
2.7 JS动态事件支持

Mermaid 提供了一个功能，允许在流程图中创建可点击的节点，这些节点可以链接到其他页面或触发页面上的行为。通过在流程图的定义中添加点击事件，可以指定节点的点击行为。此外，Mermaid 还允许通过添加链接目标来指定链接是如何在浏览器中打开的。

以下是一个包含点击功能的 Mermaid 流程图的例子：

graph LRA[开始] --> B[某步骤]B --> C[另一步骤]C --> D[结束]click A href "http://example.com/#开始" _blankclick B href "http://example.com/#某步骤" _selfclick C href "http://example.com/#另一步骤" _parentclick D href "http://example.com/#结束" _top
开始
某步骤
另一步骤
结束

在这个例子中：

  • 节点 A 的点击会在新选项卡中打开链接 http://example.com/#开始。
  • 节点 B 的点击会在当前选项卡中打开链接 http://example.com/#某步骤。
  • 节点 C 的点击会在父框架中打开链接 http://example.com/#另一步骤，如果适用的话。
  • 节点 D 的点击会在当前浏览器窗口的顶级框架中打开链接 http://example.com/#结束。

链接目标可以是以下之一：

  • _blank: 在新窗口或标签页中打开链接。
  • _self: 在相同的框架或窗口中打开链接（默认行为）。
  • _parent: 在父框架中打开链接，如果当前框架嵌套在另一个框架中。
  • _top: 在整个浏览器窗口的顶部框架中打开链接，这将取消所有框架。
2.8 注释代码

在Mermaid中，注释以两个百分号 %% 开头。Mermaid将忽略从 %% 到行尾的所有内容。这用于对特定的行或者部分进行注释。例如：

%% 这是一个单行注释
graph LRA[Square Rect] -- Link text --> B((Circle))B --> C{Decision}%% 这里的注释不会显示在图中C -->|One| D[Result one]C -->|Two| E[Result two]
Link text
One
Two
Square Rect
Circle
Decision
Result one
Result two

在Mermaid中，注释不会出现在渲染的图表中，并且是不会被解析的，这使得它们非常适用于添加说明、描述意图或者暂时移除某些元素，而不用实际地从代码中删除它们。

2.9 自定义节点样式

Mermaid 流程图提供了自定义节点样式的功能，允许用户修改节点的外观以符合特定的需求或偏好。这些自定义样式可以直接在Mermaid图的定义中指定，或者通过引用CSS类来实现。

这里是一些自定义节点样式的方法：

(1) 可以直接在节点定义中应用样式。例如：

graph LRstyle A fill:#f9f,stroke:#333,stroke-width:4pxA --> B
A
B

在上面的例子中，节点A的填充色被设置为浅紫色 #f9f，边框颜色为深色 #333，且边框宽度为 4px。

(2) 可以为节点定义CSS类，然后在流程图中引用这些类。例如：

graph LRclassDef someclass fill:#f9f,stroke:#333,stroke-width:4px;class A someclass;A --> B
A
B

在这个例子中，我们首先定义了一个类 someclass，该类包含了和之前例子中相同的样式定义。然后，我们通过 class A someclass; 将这个类应用到节点A上。

添加类的一种较短形式是使用 ::: 运算符将类名附加到节点，如下所示：

flowchart LRA:::someclass --> BclassDef someclass fill:#f96
2.10 对fontawesome的支持

Mermaid 流程图支持集成 FontAwesome 图标，这使得你可以在节点内使用这些图标来丰富流程图的视觉表示。FontAwesome 是一套流行的图标库，包含了多种用于网页设计的矢量图标。

要在 Mermaid 流程图中使用 FontAwesome 图标，你需要使用 FontAwesome 的类名。在 Mermaid 图表中，这通常是通过文字标签来完成的。以下是一个基本的示例，展示了如何在 Mermaid 流程图中使用 FontAwesome 图标：

graph LRA[fa:fa-check Square Rect] --> B(fa:fa-ban Circle)B --> C{fa:fa-rocket Decision}C -->|fa:fa-thumbs-up: One| D[fa:fa-battery-half Result one]C -->|fa:fa-thumbs-down Two| E[fa:fa-battery-full Result two]

在这个例子中，每个节点的文本标签前缀为 fa:fa-，后面跟着 FontAwesome 的图标类名。例如，fa:fa-check 会显示一个勾选图标， fa:fa-rocket 会显示一个火箭图标等。

注意事项：

  • 需要确保在渲染 Mermaid 图表的环境中包含了 FontAwesome 库，否则图标将无法正确显示。
  • 由于 Mermaid 和 FontAwesome 都可能更新其语法和可用图标，确保你查阅了正确版本的文档来获取最新的信息。
  • 在某些环境中（如某些Markdown编辑器或特定的网页平台），直接嵌入 FontAwesome 图标可能不被支持。在这种情况下，可以尝试在本地环境或支持 FontAwesome 的在线 Mermaid 编辑器中预览和导出图表。

这个大概率不支持，如果是自行建站，可以尝试用用。

这篇关于OD(8)之Mermaid流程图(flowcharts)使用详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/734387。

相关文章

Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2