概述
Mermaid是什么
Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
Mermaid能做什么
Mermaid是一个功能强大的绘图库，可以创建多种类型和样式的图表，包括但不限于：
-
流程图：可以绘制各种类型的流程图，包括标准流程图、过程流程图、判断流程图和循环流程图等。
-
序列图：可以绘制对象之间交互的图，包括控制流和消息等，尤其适用于描述同步和异步操作。
-
实例图：可以绘制类和对象之间实例化和运行时关系的图表，包括属性和方法等，比较适用于系统建模和设计。
-
甘特图：可以绘制项目排期和进度等的图表，包括时间轴、任务和比例等，用于管理大规模项目非常重要。
-
类图：可以绘制类和对象之间的继承、实现、属性、方法和注释等关系，用于表达软件系统的结构和继承体系。
-
状态图：可以绘制状态和条件之间的转换的图表，包括状态、条件、事件和行为等，适用于描述状态机。
-
部署图：可以绘制组件和节点之间的关系和通信的图表，适用于描述系统的分布式和物理结构。
通过Mermaid你还可以定制图表颜色、字体、大小、尺寸等属性，并以HTML、SVG、PNG格式等多种格式输出图表，满足多种输出和展示需求。因此，Mermaid广泛应用于软件开发、项目管理、系统架构、数据可视化等领域，帮助用户绘制高质量的图表，提高工作效率和沟通效果。
Mermaid的优缺点
Mermaid是一个功能强大、易用性较高的绘图库，但是它也有一些优缺点，下面分别列举：
优点：
-
简单易学：Mermaid的语法结构简单易懂，每种图表均有对应的语法，并且支持样式设置。
-
支持多种图表类型：Mermaid可以绘制多种类型的图表，如流程图、序列图、甘特图等，满足不同用户的需求。
-
轻便灵活：Mermaid是一个基于JavaScript的绘图库，可以通过HTML文本直接生成图表，易于嵌入各种场景。
-
可定制性高：Mermaid支持各种样式的配置，可以调整节点、链接、标签、颜色等属性，使图表更具可视化效果。
-
免费：Mermaid是一个免费开源的绘图库，用户无需购买或支付任何费用，即可使用它进行图表绘制。
缺点：
-
格式限制：Mermaid对语法格式有严格的要求，不同类型图表的格式不尽相同，需要用户按照规则书写。
-
功能相对简单：Mermaid虽然支持多种类型图表的绘制，但功能相对于一些商业绘图软件而言还比较简单。
-
引入库的一定量工作：在使用Mermaid绘制图表时，需要先引入其对应的库，有时可能需要一定量的工作。
以上是Mermaid的优缺点，虽然存在一些缺点，但是对于需要用于制作简单的、具有动态感的图表的用户而言，Mermaid是一个非常适用的工具，可以提高工作效率，节约时间和金钱成本。
Mermaid的安装和使用
Mermaid的安装和使用非常简单，以下是一些常用方式：
浏览器使用
Mermaid作为一个JavaScript库，可以在浏览器中直接引入，使用的时候可以在HTML页面中添加以下代码：
<!-- 引入mermaid库-->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<!-- 以后需要的时候再解析文本-->
<script>mermaid.initialize({startOnLoad:true});</script>
在Node.js中使用
如果需要在Node.js中使用Mermaid，可以在命令行中运行以下命令来安装：
npm install mermaid --save
安装成功后，可以使用以下代码来生成一个流程图的HTML：
const mermaid = require('mermaid');
mermaid.initialize({
startOnLoad: true
});
const graphDefinition = 'graph TD\nA-->B';
const html = mermaid.render('graphDiv', graphDefinition);
使用上面的代码，在终端中运行，就会输出一个HTML文档。其中，Mermaid库提供了render函数用于将文本转换为定义好的图表格式。
在markdown中使用
如果需要在markdown中使用Mermaid，可以在markdown页面里添加以下代码：
graph LR
A[开始] --> B(流程)
B --> C{判断}
C -->|结果1| D[结束]
C -->|结果2| E[结束]
简单流程图
定义一个简单流程图：
graph LR
A[开始] --> B[流程1]
B --> C[流程2]
C --> D[结束]
graph：定义流程图，表示图表的类型。可以是graph、pie、classDiagram、stateDiagram等。LR：定义图表的布局，可以是LR、RL、TB、BT。- 用
[ ]中括号来定义节点和它们的标签。 -->：连接两个节点，表示它们的流程顺序。- //
：使用//`可以在节点间添加注释信息。
graph TD
A[开始]-->B(步骤1)
B---->C(步骤2)
B--描述文本-->D(步骤3)
C==>E(步骤4)
D==>E
E--选项1-->F(步骤5)
E-.选项2.->G(步骤6)
G==>H(步骤7)
G-.选项3.->I(步骤8)
I-.确定.->H
subgraph 一组节点
B
C
D
end
这个流程图是一个从 A（开始）到 H（结束）的流程，其中包括以下箭头和括号的定义：
-->：定义一个简单的向右箭头，表示从节点 A 到节点 B。---->：定义一个直线箭头，表示从节点 B 到节点 C。-- 描述文本 -->：定义一个带描述文本的双向箭头，表示从节点 B 到节点 D。==>：定义一个粗箭头，表示从节点 C 到节点 E。-.->：定义一个带有点的线箭头，表示从节点 E 到节点 G。-. 选项3 .->：定义一个带有描述的线箭头，表示从节点 G 到节点 I，并使用花括号来表示选项描述。-. 确定 .->：定义一个带有描述的直线箭头，表示从节点 I 到节点 H，并使用括号来表示箭头的标签。
graph TD
A[开始] -->|初始化| B(设置参数)
B --> C{条件}
C -->|是| D[步骤1]
C -->|否| E[步骤2]
B --> F(调整参数)
E --> F
D --> G((输出结果))
F --> G
G -->|完成| H[结束]
在这个示例中，我们定义了以下几种形状：
A[开始]：定义一个圆角矩形节点，表示流程的开始。B(设置参数)：定义一个菱形节点，表示决策点。C{条件}：定义一个菱形节点，表示具有条件的决策点，并使用花括号来表示节点的形状。D[步骤1]和E[步骤2]：定义一个矩形节点，表示流程中的步骤。F(调整参数)：定义一个矩形节点，表示一个调整参数的步骤。G((输出结果))：定义一个圆形节点，表示流程中的结束点。-->：定义一个简单的向右箭头，表示单向箭头。-->|描述文本|：定义一个带有标签的箭头，表示从一个节点到另一个节点，同时附带关于箭头的描述信息。
复杂流程图
定义一个步骤比较多的流程图：
graph LR
A[开始]-->B[流程1]
B-->C[判断条件]
C-->|条件成立|D[流程2]
D-->E[判断条件]
E--> |条件成立| F[流程3]
F-->|否则|G[流程4]
E-->|条件不成立|G[流程4]
G-->H[结束]
graph LR：定义流程图的类型和布局。-->：定义节点间的流程顺序。|文本|：表示条件分支的判断条件和文本。==>：定义流程，表示在两个节点间连接一个带箭头的圆圈，圆圈中可以填写任何文本信息。--文本-->：定义带有文本的流程，用于表示带有文本标签的流程。点击事件：点击A-->B：执行的函数：定义点击事件，表示点击A节点时触发B节点的函数执行。
子图
定义一个包含子图的流程图：
flowchart LR
subgraph A
物品-->B[计算1]
B-->C(判断1)
C-->|条件1| D[输出结果1]
C-->|条件2| E[计算2]
E-->D
end
subgraph B
客户-->F[计算3]
F-->G(判断2)
G-->|条件3|H[输出结果2]
G-->|条件4|I[计算4]
I-->H
end
A-->B
F-->C
subgraph：定义一个子图，可以用来分组和组织节点。end：标记子图的结束位置。- 可以在子图中使用标准的流程图语法定义节点、流程和条件分支。
- 子图中的节点可以连接到主流程图中的其他节点。
类图
定义一个简单的类图：
classDiagram
class Animal {
+name: String
+eat()
}
classDiagram：定义一个类图。class：定义一个类。+或-：表示类的公共或私有成员。:：定义成员的类型。()：定义一个方法。
状态图
定义一个三种状态之间变化的状态图：
stateDiagram-v2
[*] --> Off
Off --> Starting : Power on
Starting --> On : Start success
On --> Off : Power off
On --> Suspended : Sleep
Suspended --> Off : Power off
On --> Starting : Restart
stateDiagram-v2：定义状态图。[*]：表示默认起始状态。-->：表示状态变化。- 使用
:标记每个状态的名称。 - 可以使用
---定义状态的展示文字。 :表示状态名称的展示文字。extend可以用于表示某个状态的do动作。note可以用于添加注释，例如在某个状态上添加状态详情信息等。
时序图
定义一个简单的时序图：
sequenceDiagram
participant A
participant B
A ->> B : 请求数据
B -->> A : 返回数据
sequenceDiagram：定义时序图。participant：定义参与者的角色，可以在后面的流程步骤中使用它们。->>：表示请求操作。-->>：表示返回操作。alt和else可以用于表示可选的分支。
甘特图
定义一个简单的甘特图：
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 研发
设计 :a1, 2018-01-01, 30d
开发 :a2, 2018-01-03, 60d
测试 :a3, after a2, 20d
section 上线
发布 :b1, after a3, 2d
测试 :b2, after b1, 5d
gantt：定义甘特图。title：设置标题。dateFormat：定义日期格式。section：定义项目的不同阶段，可以在不同的阶段中设置相应的任务。- 使用
:分隔任务名称和 ID。 - 使用
,分隔任务 ID、开始日期和持续天数。 after：定义某个任务在另一个任务之后开始。- 根据起始时间和持续时间，可以计算出任务的结束时间。
树状图
定义一个简单的树状图：
graph TD
A[开始] --> B[分类1]
B --> C[子分类1]
B --> D[子分类2]
C --> E[项目1]
C --> F[项目2]
D --> G[项目3]
D --> H[项目4]
graph TD：定义树状图。- 使用
-->连接父级和子级节点。 - 树状图中的每个节点都代表一个分类或项目。
- 树形结构可以包含任意数量的子树。
矩形图
定义一个简单的矩形图：
graph TD
subgraph 系统
A(用户) -- 输入 --> B(系统)
B -- 处理 --> C{结果正确?}
C -- 是 --> D(输出结果)
C -- 否 --> E(返回错误信息)
end
graph TD：定义矩形图。- 使用
--连接节点。 - 使用
()定义节点类型。 - 使用
{}定义判断条件。 - 使用
subgraph和end来定义一个子集。
异步流程图
定义一个简单的异步流程图：
sequenceDiagram
A->B: 请求A
B->>C: 请求B
B->>D: 请求C
C-->>B: 返回C
D-->>B: 返回D
B-->>A: 返回B
sequenceDiagram：定义异步流程图。->>：表示异步请求。-->>：表示异步返回。- 使用
:分隔消息名称和消息 ID。
流程图
定义一个简单的流程图：
flowchart TD
A[开始] -->|条件1| B[流程1]
B -->|条件2| C[流程2]
C -->|条件3| D[流程3]
D -->|条件4| E[结束]
flowchart TD：定义流程图。- 使用
-->|文本|标记带有文本的流程，表示条件分支操作。 - 使用细长菱形表示条件判断。
状态转换图
定义一个简单的状态转换图：
stateDiagram
[*] --> 状态1
状态1 --> 状态2 : 事件1
状态1 --> 状态3 : 事件2
状态2 --> 状态3 : 事件3
状态3 --> 状态1 : 事件4
state 状态1 {
[*] --> 子状态1
子状态1 --> 子状态2 : 子事件1
subgraph 子状态组
子状态2 --> 子状态3 : 子事件2
end
子状态3 --> 子状态1 : 子事件3
}
stateDiagram：定义状态转换图。[*]：表示默认起始状态。-->：表示状态转换，用于表示状态之间的关系。state：可以用于定义一个新的状态域。subgraph和end：可以用来定义一个子状态组。- 使用
,分隔状态名称和状态 ID。 - 使用
:分隔状态 ID 和展示名称。 - 使用
--->定义箭头的方向。
强调样式
定义一个具有强调样式的流程图：
graph TD
A[开始] -->|条件1| B[流程1]
B -->|条件2| C[流程2]
C -->|条件3| D[流程3]
D -->|条件4| E[结束]
style A fill:#BEE7E9,stroke:#333,stroke-width:4px
style B fill:#BEE7E9,stroke:#333,stroke-width:4px
style D fill:#BEE7E9,stroke:#333,stroke-width:4px
style：用于修改节点样式。fill：填充颜色。stroke：边框颜色。stroke-width：边框宽度。
字体样式
定义一个具有自定义字体样式的流程图：
graph TD
A[开始] -->|条件1| B[流程1]
B -->|条件2| C[流程2]
C -->|条件3| D[流程3]
D -->|条件4| E[结束]
style A font-size:14px,fill:#BEE7E9,stroke:#333,stroke-width:4px
style B font-size:14px,fill:#BEE79,stroke:#333,stroke-width:4px
font-size：定义节点的字体大小。fill：定义填充颜色。stroke：定义边框颜色。stroke-width：定义边框宽度。
样式继承
定义一个具有样式继承的流程图：
graph TD
A[开始] -->|条件1| B[流程1]
B -->|条件2| C[流程2]
C -->|条件3| D[流程3]
D -->|条件4| E[结束]
style B extends A,fill:#BEE7E9,stroke:#333,stroke-width:4px
style C extends B,fill:#E5D7D7
style D extends B,fill:#E5D7D7
extends：用于定义节点的继承关系，使得一些节点可以继承其他节点的样式。fill：定义填充颜色。stroke：定义边框颜色。stroke-width：定义边框宽度。
自定义节点类型
定义一个自定义节点类型的流程图：
classDiagram
class MyNode{
-name : String
-level : Integer
+getName() : String
}
classDiagram：定义一个类图。class：定义一个新的类或类型。-：定义一个私有属性。+：定义一个公共方法。- 使用
:分隔属性和类型。 - 使用
()分隔方法名称和参数。
点击事件
定义一个节点点击事件的流程图：
graph TD
A[开始] -->|条件1| B[流程1]
B -->|条件2| C[流程2]
click C "alert('This is C node')" "点击C节点"
C -->|条件3| D[流程3]
D -->|条件4| E[结束]
click：定义节点的点击事件。"alert(...)"：执行的 JavaScript 代码。"点击C节点"：节点鼠标悬停标签。
非常感谢您的支持，以下是 Mermaid 的其他语法：
容器
定义一个具有容器的流程图：
graph TB
subgraph A
B
end
subgraph：定义一个容器。end：标记容器的结束位置。- 容器可以用来分组和组织节点，使它们易于管理。
Git 图
定义一个 Git 图：
gantt
title Git 进化史
dateFormat YYYY-MM-DD
section 远古时代
创建 Git :a1, 2005-04-12, 15d
section 现代化时代
GitHub 购买 Git :a2, 2018-06-04, 1d
section 近期时
Microsoft 收购 GitHub :a3, 2018-06-04, 1d
title：定义 Git 图的标题。dateFormat：定义日期格式。section：定义不同时间段。- 使用
:分隔任务名称和 ID。 - 使用
,分隔任务 ID、开始日期和持续天数。
用户定义样式
定义具有用户定义样式文件的流程图：
flowchart TD
A[项目] -->|使用存储过程| B((数据库))
B -->|更新数据表| C{数据表}
C -->|检查结果| D[是否满足要求]
style A fill:#BEE7E9,stroke:#333,stroke-width:4px
style B fill:#BEE7E9,stroke:#333,stroke-width:4px,stroke-dasharray: 5, 5
style C fill:#BEE7E9,stroke:#333,stroke-width:4px,stroke-dasharray: 5, 5
style D fill:#BEE7E9,stroke:#333,stroke-width:4px,stroke-dasharray: 5, 5,font-size:14px
style：用于定义节点的样式。fill：表示填充颜色。stroke：指定边框颜色。stroke-width：指定边框宽度。stroke-dasharray：用于定义边框样式，该样式使用一组数字表示边框的线长度和间隔。font-size：用于定义节点标签的字体大小。
数字属性
定义具有数字属性的流程图：
graph TD
A[顶部] ==>|50| B[中部]
B <==>|25| C[底部]
==> |数字|：定义一个带数字属性的箭头。<==>：定义双向箭头。- 使用数字属性来定义箭头长度。
饼图
定义一个饼图表：
pie title 人员构成
"工程师" : 43
"销售" : 20
"市场" : 17
"其他" : 5
"管理" : 15
pie：定义饼图。title：定义饼图的标题。- 使用冒号分隔项目名称和数量。
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
