Markdown 进阶语法:Mermaid 绘图 (一) - 流程图 (Flowchart)

✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。
🍎个人主页:小嗷犬的个人主页
🍊个人网站:小嗷犬的技术小站
🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。


本文目录

    • Mermaid 简介
    • 如何使用 Mermaid
    • Mermaid 语法
      • 流程图 (Flowchart)
        • 节点(默认)
        • 带有文本的节点
          • 包含 Unicode 的文本
        • 方向
        • 节点形状
          • 圆角矩形节点
          • 胶囊形节点
          • 卷轴形节点
          • 圆柱形节点
          • 圆形节点
          • 旗帜形节点
          • 菱形节点
          • 六角形节点
          • 平行四边形节点
          • 梯形节点
          • 双圆节点
        • 节点之间的连接
          • 箭头链接
          • 线链接
          • 带有文本的线链接
          • 带有文本的箭头链接
          • 虚线箭头链接
          • 带有文本的虚线箭头链接
          • 粗线箭头链接
          • 带有文本的粗线箭头链接
          • 链式链接
          • 新的箭头类型
          • 双向箭头
          • 链接长度
        • 破坏语法的特殊字符
          • 转义字符的实体代码
        • 子图
          • 跨越子图的链接
          • 子图的方向
        • 交互
          • 注释
        • 样式和类
        • 对 fontawesome 的基本支持
        • 空格和分号


Mermaid 简介

Mermaid 是一个基于 JavaScript 的图表绘制工具,它使用类似 Markdown 的简单语法来编写,并动态地将它们渲染成图表。

Mermaid 支持的图表类型包括:

  1. 流程图 (Flowchart) : 用关键词 graphflowchart 表示
  2. 顺序图 (Sequence Diagram) : 用关键词 sequenceDiagram 表示
  3. 类图 (Class Diagram) : 用关键词 classDiagram 表示
  4. 状态图 (State Diagram) : 用关键词 stateDiagram 表示
  5. 实体关系图 (Entity Relationship Diagram) : 用关键词 erDiagram 表示
  6. 用户旅程图 (User Journey Diagram) : 用关键词 journey 表示
  7. 甘特图 (Gantt Diagram) : 用关键词 gantt 表示
  8. 饼图 (Pie Chart Diagram) : 用关键词 pie 表示
  9. 象限图 (Quadrant Chart) : 用关键词 quadrantChart 表示
  10. 需求图 (Requirement Diagram) : 用关键词 requirementDiagram 表示
  11. Gitgraph 图 (Gitgraph Diagram) : 用关键词 gitGraph 表示
  12. 思维导图 (Mindmap) : 用关键词 mindmap 表示
  13. 时间线图 (Timeline Diagram) : 用关键词 timeline 表示

丰富的图表类型,可以满足大部分的绘图需求,越来越多的人开始使用 Mermaid 来绘制图表。


如何使用 Mermaid

想要使用 Mermaid 绘制各类图表,可以通过以下方式:

  • 使用专门支持 Mermaid 渲染的在线编辑器,如:Mermaid Live Editor
  • 使用支持 Mermaid 语法的 Markdown 编辑器,如:Typora

通常在专门的 Mermaid 编辑器我们只需要编写 Mermaid 语法,就可以看到图表的渲染效果:

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

但是在支持 Mermaid 的 Markdown 编辑器中,我们需要在 Mermaid 语法前后添加特定的标记,才能看到图表的渲染效果:

```mermaid
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

Mermaid 语法

流程图 (Flowchart)

流程图由节点(几何形状)和边(箭头或线)组成。Mermaid 代码定义了如何创建节点和边,并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。

节点(默认)

代码:

```mermaid
flowchart LR
    id
```

也可以用 graph 代替 flowchart

效果:

id

带有文本的节点

代码:

```mermaid
flowchart
    id[这是一段文本]
```

效果:

这是一段文本
包含 Unicode 的文本

可以使用 "" 将包含 Unicode 的文本括起来。

代码:

```mermaid
flowchart
    id["这是 ❤ Unicode"]
```

效果:

这是 ❤ Unicode

方向

可在图表关键词后添加方向关键词来控制图表方向,流程图可用的方向关键词有以下几种:

  • TB (Top to bottom) : 从上到下
  • TD (Top-down) : 同 TB,从上到下
  • BT (Bottom to top) : 从下到上
  • RL (Right to left) : 从右到左
  • LR (Left to right) : 从左到右

代码:

```mermaid
flowchart TD
    开始 --> 结束
```

```mermaid
flowchart LR
    开始 --> 结束
```

效果:

开始
结束
开始
结束

节点形状

节点的默认形状为矩形,我们可以通过改变包裹文本的符号来改变节点的形状。

圆角矩形节点
```mermaid
flowchart LR
    id1(这是一段文本)
```

效果:

这是一段文本
胶囊形节点
```mermaid
flowchart LR
    id1([这是一段文本])
```

效果:

这是一段文本
卷轴形节点
```mermaid
flowchart LR
    id1[[这是一段文本]]
```

效果:

这是一段文本
圆柱形节点
```mermaid
flowchart LR
    id1[(这是一段文本)]
```

效果:

这是一段文本
圆形节点
```mermaid
flowchart LR
    id1((这是一段文本))
```

效果:

这是一段文本
旗帜形节点
```mermaid
flowchart LR
    id1>这是一段文本]
```

效果:

这是一段文本

试试看,反过来写会怎样?

菱形节点
```mermaid
flowchart LR
    id1{这是一段文本}
```

效果:

这是一段文本
六角形节点
```mermaid
flowchart LR
    id1{{这是一段文本}}
```

效果:

这是一段文本
平行四边形节点
```mermaid
flowchart LR
    id1[/这是一段文本/]
```

```mermaid
flowchart LR
    id1[\这是一段文本\]
```

效果:

这是一段文本
这是一段文本
梯形节点
```mermaid
flowchart LR
    id1[/这是一段文本\]
```

```mermaid
flowchart LR
    id1[\这是一段文本/]
```

效果:

这是一段文本
这是一段文本
双圆节点
```mermaid
flowchart LR
    id1(((这是一段文本)))
```

效果:

flowchart LR
    id1(((这是一段文本)))

节点之间的连接

节点之间可用箭头或者线连接,箭头或线的类型可通过关键词来指定。可以有不同类型的链接或将文本字符串附加到链接上。

箭头链接
```mermaid
flowchart LR
    A-->B
```

效果:

A
B
线链接
```mermaid
flowchart LR
    A---B
```

效果:

A
B
带有文本的线链接
```mermaid
flowchart LR
    A-- 这是一段文本 ---B
```
或者
```mermaid
flowchart LR
    A---|这是一段文本|B
```

效果:

这是一段文本
A
B
带有文本的箭头链接
```mermaid
flowchart LR
    A-- 这是一段文本 -->B
```
或者
```mermaid
flowchart LR
    A-->|这是一段文本|B
```

效果:

这是一段文本
A
B
虚线箭头链接
```mermaid
flowchart LR
   A-.->B
```

效果:

A
B
带有文本的虚线箭头链接
```mermaid
flowchart LR
   A-. 文本 .-> B
```

效果:

文本
A
B
粗线箭头链接
```mermaid
flowchart LR
   A ==> B
```

效果:

A
B
带有文本的粗线箭头链接
```mermaid
flowchart LR
   A == 文本 ==> B
```

效果:

文本
A
B
链式链接

可以在一行声明多个链接:

```mermaid
flowchart LR
   A -- 文本1 --> B -- 文本2 --> C
```

效果:

文本1
文本2
A
B
C

也可以在一行声明多个节点链接:

```mermaid
flowchart LR
   a --> b & c--> d
```

效果:

a
b
c
d

然后,我们可以以一种非常富有表现力的方式描述依赖关系,只用下面一行:

```mermaid
flowchart TB
    A & B--> C & D
```

效果:

A
B
C
D

使用基础的代码来描述这样的关系至少需要 4 行代码:

```mermaid
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
```

一行的写法虽然简洁,但会使得代码难以阅读,所以建议不要过度使用这样的写法。

新的箭头类型

除了一般的箭头外,Mermaid 还支持以下 2 种箭头类型:

```mermaid
flowchart LR
    A --o B
    B --x C
```
A
B
C
双向箭头

箭头可以是双向的:

```mermaid
flowchart LR
    A o--o B
    B <--> C
    C x--x D
```
A
B
C
D
链接长度

流程图中的节点会被分到不同层级,链接的长度通常基于它跨越的层级,链接可以跨越任意数量的层级。除此之外,你也可以通过 增加破折号 - 的数量来加长一个链接。

```mermaid
flowchart LR
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```
Yes
No
Start
Is it?
OK
Rethink
End

链接的长度可能超过总的层级数

当链接标签写在链接中间时,必须在链接的右侧添加额外的破折号 -

```mermaid
flowchart LR
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
```
Yes
No
Start
Is it?
OK
Rethink
End

对于虚线或粗线,需要添加的是等号 = 或 点号 .,如下表所示:

长度123
正常线------------
正常线带箭头-->--->---->
粗线============
粗线带箭头==>===>====>
虚线-.--..--...-
虚线带箭头-.->-..->-...->

破坏语法的特殊字符

为了呈现更多可能的字符,我们可以将文本放在引号 "" 内:

```mermaid
flowchart LR
    id1["这是一段(文本)"]
```
这是一段(文本)
转义字符的实体代码

可以使用字符的实体代码来表示一个字符:

```mermaid
flowchart LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
A double quote:"
A dec char:♥

子图

语法如下:

```mermaid
subgraph title
    graph definition
end
```

例:

```mermaid
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```
three
one
c2
c1
two
b2
b1
a2
a1

我们也可以为子图设置显式 ID:

```mermaid
flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
```
one
a2
a1
c1
跨越子图的链接

可以为流程图添加跨越子图的链接:

```mermaid
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
```
three
one
c2
c1
two
b2
b1
a2
a1
子图的方向

子图的方向可以通过添加 direction 和方向关键词来指定:

```mermaid
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
```
TOP
B1
f1
i1
B2
f2
i2
A
B

交互

我们可以为节点绑定 JavaScript 函数或是 URL 链接,当用户点击节点时,会触发绑定的函数或是打开链接。

<script>
  const callback = function () {
    alert('A callback was triggered');
  };
</script>

```mermaid
flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.github.com" "This is a tooltip for a link"
    click A call callback() "Tooltip for a callback"
    click B href "https://www.github.com" "This is a tooltip for a link"
```
A
B
C
D
注释

使用 %% 可为 Mermaid 代码添加注释,注释不会被渲染。

```mermaid
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```
text
text2
A
B
C

样式和类

Mermaid 中的节点和链接都可以自定义样式:

```mermaid
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
Start
Stop

还可以构造类来为一类节点或链接添加样式:

```mermaid
flowchart LR
    A:::someclass --> B --> C:::someclass
    classDef someclass fill:#f96
```
A
B
C

对 fontawesome 的基本支持

当环境中引入了 fontawesome 时,Mermaid 也能很好地支持这些图标:

```mermaid
flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
```
for peace
forbidden
A perhaps?

空格和分号

  • 分号在早期版本中用于标记图形声明的结束,现在不使用分号也可以渲染,当然如果你加入了分号,也不会影响图表渲染。
  • 在顶点和链接之间只允许有一个空格。但是,顶点和它的文本之间以及链接和它的文本之间不应该有任何空格。不加入空格也可以正常渲染,加入的空格是为了更好的可读性。
```mermaid
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

瑞吉外卖-Day02

title: 瑞吉外卖-Day02 abbrlink: ‘1’ date: 2023-04-1 19:30:00 瑞吉外卖-Day02 课程内容 完善登录功能新增员工员工信息分页查询启用/禁用员工账号编辑员工信息 分析前端页面效果是如何实现的 为什么点击左边 右边会根着变化 [外链图片转存失败,源站可能有防盗链机制…

Neo4J 特性CQL语句,函数,Springboot集成

Neo4J Neo4J Neo4J一、Neo4J相关介绍1.为什么需要图数据库方案1&#xff1a;Google方案2&#xff1a;Facebook 2.特性和优势3.什么是Neo4j4.Neo4j数据模型图论基础属性图模型Neo4j的构建元素 5.软件安装 二、CQL语句1.CQL简介2.CREATE 命令3.MATCH 命令4.RETURN 子句5.MATCH和R…

FastDFS【FastDFS环境搭建_Linux、FastDFS指令、复习】(二)-全面详解(学习总结---从入门到深化)

目录 FastDFS环境搭建_Linux FastDFS指令 复习&#xff1a; FastDFS环境搭建_Linux 下载安装gcc 安装方式为yum安装&#xff08;需网络&#xff09;&#xff1a; yum install gcc-c perl-devel pcre-devel openssl-devel zlib-devel wget 下载安装FastDFS wget https:/…

vue3 异步组件

vue3中使用异步组件 vue3中使用异步组件可以解决两个问题&#xff1a; 1.提升性能&#xff08;类似于懒加载&#xff09; 2.分包 下载插件 npm i vueuse/core -S 1.提升性能&#xff08;懒加载&#xff09; 父组件 <template><div><h1>异步组件</h1&g…

【计算机视觉】对比学习综述(自己的一些理解)

对比loss 对比学习的 loss&#xff08;InfoNCE&#xff09;即以最 大化互信息为目标推导而来。其核心是通过计算样本表示间的距离&#xff0c;拉近正样本&#xff0c; 拉远负样本&#xff0c;因而训练得到的模型能够区分正负例。 具体做法为&#xff1a;对一个 batch 输入的图…

Matlab绘图系列教程-Matlab 34 种绘图函数示例(上)

Matlab绘图系列教程&#xff1a;揭秘高质量科学图表的绘制与优化 文章目录 Matlab绘图系列教程&#xff1a;揭秘高质量科学图表的绘制与优化第一部分&#xff1a;入门指南1.1 简介关于本教程的目的与范围Matlab绘图在科学研究中的重要性 1.2 准备工作安装Matlab及其工具箱 1.3 …

探索Python条件语句的奇妙世界:解密逻辑与控制流

文章目录 前言if 语句if ... else ...多重判断&#xff08;if ... elif ... else...&#xff09;if 嵌套猜数字游戏三目运算符 前言 Python的条件语句用来根据特定的条件决定程序的执行流程。它允许程序根据条件的真假执行不同的代码块&#xff0c;从而实现不同情况下的不同操…

ES6: 模版字符串

前言: ES5 中我们表示字符串的时候使用 或者 "" 作用: 在 ES6 中&#xff0c;我们还有一个东西可以表示字符串&#xff0c;就是 &#xff08;反引号&#xff09; let str hello worldconsole.log(typeof str) // string和单引号还有双引号的区别: 反引号可以换行…

《面向分布式云的直播及点播云技术创新方案》获中国信通院“分布式云技术创新先锋案例”

由中国信息通信研究院、中国通信标准化协会主办的第三届“云边协同大会”于 6 月 30 日在京举办。阿里云视频云团队凭借 《面向分布式云的直播及点播云技术创新方案》 在一众产品服务中脱颖而出&#xff0c;荣获「分布式云技术创新先锋案例」。 面向分布式云技术的直播及点播云…

83、基于STM32单片机录音机录音笔语音存储回放TF卡TFT屏系统设计(程序+原理图+PCB源文件+参考论文+硬件设计资料+元器件清单等)

单片机主芯片选择方案 方案一&#xff1a;AT89C51是美国ATMEL公司生产的低电压&#xff0c;高性能CMOS型8位单片机&#xff0c;器件采用ATMEL公司的高密度、非易失性存储技术生产&#xff0c;兼容标准MCS-51指令系统&#xff0c;片内置通用8位中央处理器(CPU)和Flash存储单元&a…

git介绍和使用

目录 一、git概述 1、简介 2、下载安装 二、git代码托管服务 1、常用的 Git 代码托管服务 2、使用码云代码托管服务 三、git常用命令 1、git全局设置 2、获取git仓库 3、工作区、暂存区、版本库 概念 4、Git工作区中文件的状态 5、本地仓库操作 6、远程仓库操作 …

python简单实现人脸检测/跟随

import cv2# 加载人脸识别器的模型 face_cascade cv2.CascadeClassifier(cv2.data.haarcascades haarcascade_frontalface_default.xml)# 打开摄像头 cap cv2.VideoCapture(0)# 初始化人脸框位置 prev_faces []# 定义绘制带圆角矩形边框的函数 def draw_rounded_rectangle(…

pip安装opencv-python不成功

一个比较笨但还算有效的方法&#xff1a;如果你的python版本较低&#xff0c;如现在2023-07-04使用python3.6环境&#xff0c;使用pip默认安装会是最新的4.8.0.7版本&#xff0c;但事实上这个版本不支持py3.6环境&#xff0c;所以你需要去这里查支持py3.6的最近的一个版本是什么…

从 AI 增强到大模型,企业使用数据的方式又将如何变化?

AI&#xff08;Artificial Intelligence&#xff0c;人工智能&#xff09;的发展不过百年&#xff0c;却已经深刻影响着人们的思维和见解&#xff0c;并逐渐关联到每个人生活和工作的方方面面。从最初的规则引擎和引入统计学方法&#xff0c;到基于知识表示和推理机制的专家系统…

VScode中的插件

开启VScode中最简单的内部浏览器 - 可以访问外网 - Browser Preview 插件安装&#xff1a; 插件使用&#xff1a;由下角 - 状态栏 - VS Browser按钮 live sass compiler-vscode插件将scss编译为css live sass compiler是VSCode扩展&#xff0c;可以实时地将SASS / SCSS文件…

POSTGRESQL SQL 执行用 IN 还是 EXISTS 还是 ANY

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到3群&#xff08;共…

【youcans动手学模型】MobileNet 模型-CIFAR10图像分类

欢迎关注『youcans动手学模型』系列 本专栏内容和资源同步到 GitHub/youcans 【youcans动手学模型】MobileNet 模型-CIFAR10图像分类 1. MobileNet 卷积神经网络模型1.1 模型简介1.2 论文介绍 2. 在 PyTorch 中定义 MobileNet V1 模型类2.1 深度可分离卷积&#xff08;DSC&…

转换流~~

乱码如何解决&#xff1a; 使用字符输入转换流可以提取文件&#xff08;GBK&#xff09;的原始字节流&#xff0c;原始字节不会存在问题然后把字节流以指定编码转换成字符输入流&#xff0c;这样字符输入流中的字符就不乱码了 1&#xff1a;字符输入转换流 字符转换输入流&a…

uni-App踩坑记录

​ 1、uni自己封装的axios在真机中失效&#xff0c;发不出请求 uniapp中使用axios 需要配置适配器 (添加适配器有点费劲&#xff0c;直接封装uni自带请求也可以) axios-adapter-uniapp传送门 axios.defaults.adapter function(config) { //自己定义个适配器&#xff0c;用来…

2023年生猪行业研究报告

第一章 行业概况 生猪是指猪类动物中未经加工的、原始的、活体的猪&#xff0c;通常是指用于肉类生产的猪。生猪在全球范围内都是主要的肉类来源之一。它们的肉质丰富&#xff0c;营养价值高&#xff0c;同时还能用来制作各种加工肉类产品&#xff0c;如火腿、香肠等。 生猪养…