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

2024-02-22 06:28

本文主要是介绍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 BA --x B
多方向箭头多方向箭头A o--o BA 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

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(