Mermaid语法大全

概述

Mermaid是什么

​ Mermaid是一个开源的、基于JavaScript的绘图库,它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂,支持针对不同类型图表的定制化设置,可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外,它还支持插件和编辑器的集成,使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具,是众多开发者和作者的首选。

Mermaid能做什么

Mermaid是一个功能强大的绘图库,可以创建多种类型和样式的图表,包括但不限于:

  1. 流程图:可以绘制各种类型的流程图,包括标准流程图、过程流程图、判断流程图和循环流程图等。

  2. 序列图:可以绘制对象之间交互的图,包括控制流和消息等,尤其适用于描述同步和异步操作。

  3. 实例图:可以绘制类和对象之间实例化和运行时关系的图表,包括属性和方法等,比较适用于系统建模和设计。

  4. 甘特图:可以绘制项目排期和进度等的图表,包括时间轴、任务和比例等,用于管理大规模项目非常重要。

  5. 类图:可以绘制类和对象之间的继承、实现、属性、方法和注释等关系,用于表达软件系统的结构和继承体系。

  6. 状态图:可以绘制状态和条件之间的转换的图表,包括状态、条件、事件和行为等,适用于描述状态机。

  7. 部署图:可以绘制组件和节点之间的关系和通信的图表,适用于描述系统的分布式和物理结构。

通过Mermaid你还可以定制图表颜色、字体、大小、尺寸等属性,并以HTML、SVG、PNG格式等多种格式输出图表,满足多种输出和展示需求。因此,Mermaid广泛应用于软件开发、项目管理、系统架构、数据可视化等领域,帮助用户绘制高质量的图表,提高工作效率和沟通效果。

Mermaid的优缺点

Mermaid是一个功能强大、易用性较高的绘图库,但是它也有一些优缺点,下面分别列举:

优点:

  1. 简单易学:Mermaid的语法结构简单易懂,每种图表均有对应的语法,并且支持样式设置。

  2. 支持多种图表类型:Mermaid可以绘制多种类型的图表,如流程图、序列图、甘特图等,满足不同用户的需求。

  3. 轻便灵活:Mermaid是一个基于JavaScript的绘图库,可以通过HTML文本直接生成图表,易于嵌入各种场景。

  4. 可定制性高:Mermaid支持各种样式的配置,可以调整节点、链接、标签、颜色等属性,使图表更具可视化效果。

  5. 免费:Mermaid是一个免费开源的绘图库,用户无需购买或支付任何费用,即可使用它进行图表绘制。

缺点:

  1. 格式限制:Mermaid对语法格式有严格的要求,不同类型图表的格式不尽相同,需要用户按照规则书写。

  2. 功能相对简单:Mermaid虽然支持多种类型图表的绘制,但功能相对于一些商业绘图软件而言还比较简单。

  3. 引入库的一定量工作:在使用Mermaid绘制图表时,需要先引入其对应的库,有时可能需要一定量的工作。

以上是Mermaid的优缺点,虽然存在一些缺点,但是对于需要用于制作简单的、具有动态感的图表的用户而言,Mermaid是一个非常适用的工具,可以提高工作效率,节约时间和金钱成本。

Mermaid的安装和使用

Mermaid的安装和使用非常简单,以下是一些常用方式:

浏览器使用

Mermaid作为一个JavaScript库,可以在浏览器中直接引入,使用的时候可以在HTML页面中添加以下代码:


<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[结束]
结果1
结果2
开始
流程
判断
结束
结束

简单流程图

定义一个简单流程图:

graph LR
  A[开始] --> B[流程1]
  B --> C[流程2]
  C --> D[结束]
开始
流程1
流程2
结束
  1. graph:定义流程图,表示图表的类型。可以是graphpieclassDiagramstateDiagram等。
  2. LR:定义图表的布局,可以是LRRLTBBT
  3. [ ]中括号来定义节点和它们的标签。
  4. -->:连接两个节点,表示它们的流程顺序。
  5. //:使用//`可以在节点间添加注释信息。
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
一组节点
描述文本
选项1
选项2
选项3
确定
步骤1
步骤2
步骤3
开始
步骤4
步骤5
步骤6
步骤7
步骤8

这个流程图是一个从 A(开始)到 H(结束)的流程,其中包括以下箭头和括号的定义:

  1. -->:定义一个简单的向右箭头,表示从节点 A 到节点 B。
  2. ---->:定义一个直线箭头,表示从节点 B 到节点 C。
  3. -- 描述文本 -->:定义一个带描述文本的双向箭头,表示从节点 B 到节点 D。
  4. ==> :定义一个粗箭头,表示从节点 C 到节点 E。
  5. -.->:定义一个带有点的线箭头,表示从节点 E 到节点 G。
  6. -. 选项3 .->:定义一个带有描述的线箭头,表示从节点 G 到节点 I,并使用花括号来表示选项描述。
  7. -. 确定 .->:定义一个带有描述的直线箭头,表示从节点 I 到节点 H,并使用括号来表示箭头的标签。
graph TD
    A[开始] -->|初始化| B(设置参数)
    B --> C{条件}
    C -->|是| D[步骤1]
    C -->|否| E[步骤2]
    B --> F(调整参数)
    E --> F
    D --> G((输出结果))
    F --> G
    G -->|完成| H[结束]
初始化
完成
开始
设置参数
条件
步骤1
步骤2
调整参数
输出结果
结束

在这个示例中,我们定义了以下几种形状:

  1. A[开始]:定义一个圆角矩形节点,表示流程的开始。
  2. B(设置参数):定义一个菱形节点,表示决策点。
  3. C{条件}:定义一个菱形节点,表示具有条件的决策点,并使用花括号来表示节点的形状。
  4. D[步骤1]E[步骤2]:定义一个矩形节点,表示流程中的步骤。
  5. F(调整参数):定义一个矩形节点,表示一个调整参数的步骤。
  6. G((输出结果)):定义一个圆形节点,表示流程中的结束点。
  7. -->:定义一个简单的向右箭头,表示单向箭头。
  8. -->|描述文本|:定义一个带有标签的箭头,表示从一个节点到另一个节点,同时附带关于箭头的描述信息。

复杂流程图

定义一个步骤比较多的流程图:

graph LR
  A[开始]-->B[流程1]
  B-->C[判断条件]
  C-->|条件成立|D[流程2]
  D-->E[判断条件]
  E--> |条件成立| F[流程3]
  F-->|否则|G[流程4]
  E-->|条件不成立|G[流程4]
  G-->H[结束]
条件成立
条件成立
否则
条件不成立
开始
流程1
判断条件
流程2
判断条件
流程3
流程4
结束
  1. graph LR:定义流程图的类型和布局。
  2. -->:定义节点间的流程顺序。
  3. |文本|:表示条件分支的判断条件和文本。
  4. ==>:定义流程,表示在两个节点间连接一个带箭头的圆圈,圆圈中可以填写任何文本信息。
  5. --文本-->:定义带有文本的流程,用于表示带有文本标签的流程。
  6. 点击事件:点击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
A
B
条件1
条件2
条件3
条件4
计算3
判断1
输出结果1
计算2
客户
判断2
输出结果2
计算4
物品
  1. subgraph:定义一个子图,可以用来分组和组织节点。
  2. end:标记子图的结束位置。
  3. 可以在子图中使用标准的流程图语法定义节点、流程和条件分支。
  4. 子图中的节点可以连接到主流程图中的其他节点。

类图

定义一个简单的类图:

classDiagram
  class Animal {
    +name: String
    +eat()
  }
Animal
+name: String
+eat()
  1. classDiagram:定义一个类图。
  2. class:定义一个类。
  3. +-:表示类的公共或私有成员。
  4. ::定义成员的类型。
  5. ():定义一个方法。

状态图

定义一个三种状态之间变化的状态图:

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
Power on
Start success
Power off
Sleep
Power off
Restart
Off
Starting
On
Suspended
  1. stateDiagram-v2:定义状态图。
  2. [*]:表示默认起始状态。
  3. -->:表示状态变化。
  4. 使用 : 标记每个状态的名称。
  5. 可以使用---定义状态的展示文字。
  6. : 表示状态名称的展示文字。
  7. extend 可以用于表示某个状态的 do 动作。
  8. note 可以用于添加注释,例如在某个状态上添加状态详情信息等。

时序图

定义一个简单的时序图:

sequenceDiagram
  participant A
  participant B
  A ->> B : 请求数据
  B -->> A : 返回数据
A B 请求数据 返回数据 A B
  1. sequenceDiagram:定义时序图。
  2. participant:定义参与者的角色,可以在后面的流程步骤中使用它们。
  3. ->>:表示请求操作。
  4. -->>:表示返回操作。
  5. altelse 可以用于表示可选的分支。

甘特图

定义一个简单的甘特图:

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
2018-01-07 2018-01-14 2018-01-21 2018-01-28 2018-02-04 2018-02-11 2018-02-18 2018-02-25 2018-03-04 2018-03-11 2018-03-18 2018-03-25 设计 开发 测试 发布 测试 研发 上线 项目计划
  1. gantt:定义甘特图。
  2. title:设置标题。
  3. dateFormat:定义日期格式。
  4. section:定义项目的不同阶段,可以在不同的阶段中设置相应的任务。
  5. 使用 : 分隔任务名称和 ID。
  6. 使用 , 分隔任务 ID、开始日期和持续天数。
  7. after:定义某个任务在另一个任务之后开始。
  8. 根据起始时间和持续时间,可以计算出任务的结束时间。

树状图

定义一个简单的树状图:

graph TD
  A[开始] --> B[分类1]
  B --> C[子分类1]
  B --> D[子分类2]
  C --> E[项目1]
  C --> F[项目2]
  D --> G[项目3]
  D --> H[项目4]
开始
分类1
子分类1
子分类2
项目1
项目2
项目3
项目4
  1. graph TD:定义树状图。
  2. 使用-->连接父级和子级节点。
  3. 树状图中的每个节点都代表一个分类或项目。
  4. 树形结构可以包含任意数量的子树。

矩形图

定义一个简单的矩形图:

graph TD
  subgraph 系统
    A(用户) -- 输入 --> B(系统)
    B -- 处理 --> C{结果正确?}
    C -- 是 --> D(输出结果)
    C -- 否 --> E(返回错误信息)
  end
系统
输入
处理
系统
用户
结果正确?
输出结果
返回错误信息
  1. graph TD:定义矩形图。
  2. 使用--连接节点。
  3. 使用()定义节点类型。
  4. 使用{}定义判断条件。
  5. 使用subgraphend来定义一个子集。

异步流程图

定义一个简单的异步流程图:

sequenceDiagram
  A->B: 请求A
  B->>C: 请求B
  B->>D: 请求C
  C-->>B: 返回C
  D-->>B: 返回D
  B-->>A: 返回B
A B C D 请求A 请求B 请求C 返回C 返回D 返回B A B C D
  1. sequenceDiagram:定义异步流程图。
  2. ->>:表示异步请求。
  3. -->>:表示异步返回。
  4. 使用 : 分隔消息名称和消息 ID。

流程图

定义一个简单的流程图:

flowchart TD
  A[开始] -->|条件1| B[流程1]
  B -->|条件2| C[流程2]
  C -->|条件3| D[流程3]
  D -->|条件4| E[结束]
条件1
条件2
条件3
条件4
开始
流程1
流程2
流程3
结束
  1. flowchart TD:定义流程图。
  2. 使用 -->|文本| 标记带有文本的流程,表示条件分支操作。
  3. 使用细长菱形表示条件判断。

状态转换图

定义一个简单的状态转换图:

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
  }
事件3
事件1
事件2
事件4
状态1
子事件1
子事件2
子事件3
子状态1
子状态2
子状态3
subgraph
子状态组
end
状态2
状态3
  1. stateDiagram:定义状态转换图。
  2. [*]:表示默认起始状态。
  3. -->:表示状态转换,用于表示状态之间的关系。
  4. state:可以用于定义一个新的状态域。
  5. subgraphend:可以用来定义一个子状态组。
  6. 使用 , 分隔状态名称和状态 ID。
  7. 使用 : 分隔状态 ID 和展示名称。
  8. 使用 ---> 定义箭头的方向。

强调样式

定义一个具有强调样式的流程图:

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
条件1
条件2
条件3
条件4
开始
流程1
流程2
流程3
结束
  1. style:用于修改节点样式。
  2. fill:填充颜色。
  3. stroke:边框颜色。
  4. 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
条件1
条件2
条件3
条件4
开始
流程1
流程2
流程3
结束
  1. font-size:定义节点的字体大小。
  2. fill:定义填充颜色。
  3. stroke:定义边框颜色。
  4. 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
条件1
条件2
条件3
条件4
开始
流程1
流程2
流程3
结束
  1. extends:用于定义节点的继承关系,使得一些节点可以继承其他节点的样式。
  2. fill:定义填充颜色。
  3. stroke:定义边框颜色。
  4. stroke-width:定义边框宽度。

自定义节点类型

定义一个自定义节点类型的流程图:

classDiagram
  class MyNode{
    -name : String
    -level : Integer
    +getName() : String
  }
MyNode
-name : String
-level : Integer
+getName()
  1. classDiagram:定义一个类图。
  2. class:定义一个新的类或类型。
  3. -:定义一个私有属性。
  4. +:定义一个公共方法。
  5. 使用 : 分隔属性和类型。
  6. 使用 () 分隔方法名称和参数。

点击事件

定义一个节点点击事件的流程图:

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[结束]
条件1
条件2
条件3
条件4
开始
流程1
流程2
流程3
结束
  1. click:定义节点的点击事件。
  2. "alert(...)":执行的 JavaScript 代码。
  3. "点击C节点":节点鼠标悬停标签。

非常感谢您的支持,以下是 Mermaid 的其他语法:

容器

定义一个具有容器的流程图:

graph TB
  subgraph A
  B
  end
A
B
  1. subgraph:定义一个容器。
  2. end:标记容器的结束位置。
  3. 容器可以用来分组和组织节点,使它们易于管理。

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
2006-01-01 2007-01-01 2008-01-01 2009-01-01 2010-01-01 2011-01-01 2012-01-01 2013-01-01 2014-01-01 2015-01-01 2016-01-01 2017-01-01 2018-01-01 创建 Git GitHub 购买 Git Microsoft 收购 GitHub 远古时代 现代化时代 近期时 Git 进化史
  1. title:定义 Git 图的标题。
  2. dateFormat:定义日期格式。
  3. section:定义不同时间段。
  4. 使用 : 分隔任务名称和 ID。
  5. 使用 , 分隔任务 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
使用存储过程
更新数据表
检查结果
项目
数据库
数据表
是否满足要求
  1. style:用于定义节点的样式。
  2. fill:表示填充颜色。
  3. stroke:指定边框颜色。
  4. stroke-width:指定边框宽度。
  5. stroke-dasharray:用于定义边框样式,该样式使用一组数字表示边框的线长度和间隔。
  6. font-size:用于定义节点标签的字体大小。

数字属性

定义具有数字属性的流程图:

graph TD
  A[顶部] ==>|50| B[中部]
  B <==>|25| C[底部]
50
25
顶部
中部
底部
  1. ==> |数字|:定义一个带数字属性的箭头。
  2. <==>:定义双向箭头。
  3. 使用数字属性来定义箭头长度。

饼图

定义一个饼图表:

pie title 人员构成
  "工程师" : 43
  "销售" : 20
  "市场" : 17
  "其他" : 5
  "管理" : 15
43% 20% 17% 5% 15% 人员构成 工程师 销售 市场 其他 管理
  1. pie:定义饼图。
  2. title:定义饼图的标题。
  3. 使用冒号分隔项目名称和数量。

你可能感兴趣的:(其他,javascript,前端)