mermaid-note

mermaid语法

本文关于mermaid语法的介绍并不全面，更多语法可以参考 Mermaid JS 官网：https://mermaid.js.org

Mermaid 简介

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

Mermaid 支持的图表类型

下面列出的图表中有一部分Typora并不支持，请选择网上的在线编译器,如Online FlowChart & Diagrams Editor - Mermaid Live Editor

流程图 (Flowchart) : 用关键词 graph 或 flowchart 表示
顺序图 (Sequence Diagram) : 用关键词 sequenceDiagram 表示
类图 (Class Diagram) : 用关键词 classDiagram 表示
状态图 (State Diagram) : 用关键词 stateDiagram 表示
实体关系图 (Entity Relationship Diagram) : 用关键词 erDiagram 表示
用户旅程图 (User Journey Diagram) : 用关键词 journey 表示
甘特图 (Gantt Diagram) : 用关键词 gantt 表示
饼图 (Pie Chart Diagram) : 用关键词 pie 表示
象限图 (Quadrant Chart) : 用关键词 quadrantChart 表示
需求图 (Requirement Diagram) : 用关键词 requirementDiagram 表示
Gitgraph 图 (Gitgraph Diagram) : 用关键词 gitGraph 表示
思维导图 (Mindmap) : 用关键词 mindmap 表示
时间线图 (Timeline Diagram) : 用关键词 timeline 表示

Typora是支持Mermaid 语法的 Markdown 编辑器，所以我们可以直接在Typora中使用各种mermaid图表

Mermaid 图表语法

这里介绍几种比较常用的图表类型，这部分Typora均支持

流程图

图表方向

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

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

流程图示例

下面这是创造排队论模型的mermaid源码，使用了流程图最常用的几种效果，更多效果见——Flowcharts Syntax | Mermaid

graph RL
A[顾客源]==>|"顾客到达(输入)"|B{"队伍(排队规则)"}-->C("服务机构(服务规则)").->|"顾客离开(输出)"|A

style A fill:#F0F0F0,stroke:#333,stroke-width:2px;
style B fill:#FFF,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5;
style C fill:#FFA500,stroke:#333,stroke-width:2px;

subgraph 服务系统 
B
C
end

graph RL
A[顾客源]==>|"顾客到达(输入)"|B{"队伍(排队规则)"}-->C("服务机构(服务规则)").->|"顾客离开(输出)"|A

style A fill:#F0F0F0,stroke:#333,stroke-width:2px;
style B fill:#FFF,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5;
style C fill:#FFA500,stroke:#333,stroke-width:2px;

subgraph 服务系统 
B
C
end

这个简单的图形有几个注意点——

当符号需要被转义时（如例子中的括号），需要用""将整体包裹起来
由于流程图没有题目，所以有时可以使用subgraph包裹整体图来作为题目使用
通过使用不同类型的括号可以改变边框的形状
使用style语句可以调用节点的修饰函数,对节点进行颜色、边框、虚线等方面的设置
流程图中的节点会被分到不同层级，链接的长度通常基于它跨越的层级，链接可以跨越任意数量的层级。除此之外，你也可以通过增加破折号 - 的数量来加长一个链接。

长度	1	2	3
正常线	`---`	`----`	`-----`
正常线带箭头	`-->`	`--->`	`---->`
粗线	`===`	`====`	`=====`
粗线带箭头	`==>`	`===>`	`====>`
虚线	`-.-`	`-..-`	`-...-`
虚线带箭头	`-.->`	`-..->`	`-...->`

序列图

更多效果见——Sequence diagrams | Mermaid

要创建一个简单的序列图，可以使用以下语法：

sequenceDiagram   
actor User as computer_user    
participant System   
Note right of User: continue asking!
loop ask_loop
	User->>User: ask
end
User->>+System: 发送请求    
System-->-User: 返回响应
User-)System: 持续请求 

sequenceDiagram   
actor User as computer_user    
participant System   
Note right of User: continue asking!
loop ask_loop
	User->>User: ask
end
User->>+System: 发送请求    
System-->-User: 返回响应
User-)System: 持续请求

饼图

Pie Chart,中文也称之为“饼状图”,是一种常用的数据可视化工具,可以用于展示不同部分之间的占比关系。使用Mermaid 绘制饼形图也十分简单,只需要按照以下格式编写即可:

pie
title 数据比例图
"选项1" : 25
"选项2" : 50
"选项3" : 25 

pie
title 数据比例图
"选项1" : 25
"选项2" : 50
"选项3" : 25

其中,title是饼形图的标题,选项1/2/3是各个数据选项的名称,25/50/25则是它们对应的数值。你可以根据需要自行修改数据选项的个数以及对应的数值。

除此之外,还有一些可选的参数可以进行设置:

colors:用于设置各个数据选项对应的颜色。默认情况下,Mermaid会自动为每个数据选项分配一种颜色,也可以手动指定颜色;
labelFormat:用于设置饼形图上的数据标签格式,可以是数字、百分比等。
labelPosition:用于设置数据标签的位置,可以是饼形图内部、外部或者中心位置。

状态图

状态图用于展示对象的状态和状态间的转移过程。在mermaid中,状态图的语法也是非常简单的。状态图可以用于展示对象的生命周期、状态转移等。

stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

stateDiagram-v2
    state fork_state <>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

Charles's Castle