Mermaid语法使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Mermaid语法使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

支持图标类型

定义	说明
pie	饼状图
graph	流程图
sequenceDiagram	时序图
stateDiagram	状态图
gantt	甘特图
classDiagram	类图

1. 基础类

1.1 流程图

graph TB

    id1(圆角矩形)--普通线-->id2[矩形];
    subgraph 子图
        id2==粗线==>id3{菱形}
        id3-. 虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

Mermaid语法使用,流程图,笔记

方向定义

用词	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

节点定义

描述	说明
id[文字]	矩形节点
id(文字)	圆角矩形节点
id((文字))	圆形节点
id>文字]	右向旗帜状节点
id{文字}	菱形节点

节点连线

描述	说明
–>	单线带箭头
–text–>	单线加文字带箭头
==>	粗线带箭头
text>	粗线加文字带箭头
-.->	虚线带箭头
-.text.->	虚线加文字带箭头

1.2 时序图

sequenceDiagram

Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob : How about you?
Bob-->>John : Jolly good!

Mermaid语法使用,流程图,笔记

关键词	说明
sequenceDiagram	定义时序图
participant	定义参与者
->>	发送异步消息
–>>	发送同步消息
note	添加注释

2. 工程图

2.1 类图

classDiagram
class Animal {
        +name: string
        +age: int
        +eat(food: string): void
    }

class Dog {
        +sound: string
        +bark(): void
    }

class Cat {
        +climb(): void
    }

    Animal <|-- Dog
    Animal <|-- Cat

Mermaid语法使用,流程图,笔记

关键词	说明
classDiagram	定义类图
class	定义一个类
+	public
-	private
方法名(参数):返回值	定义方法
<I–	继承
*–	组合
o–	聚合
–>	关联
–	实线连接
…>	依赖
…I>	实现

类的注解: 对类进行文本识别元信息,使用功能<<接口>>

interface 接口
abstract 抽象类
service 业务类
enumeration 枚举类

2.2 Git图

gitGraph:
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout main
    commit
    commit
    merge newbranch

Mermaid语法使用,流程图,笔记

2.3 状态图

stateDiagram
[*] --> 暂停
    暂停 --> 播放
    暂停 --> 停止
    播放 --> 暂停
    播放 --> 停止
    停止 --> [*]

Mermaid语法使用,流程图,笔记

关键词	说明
stateDiagram	定义状态图
[*]	表示初始状态
–>	状态转移

2.4 甘特图

gantt
  title 甘特图示例
  dateFormat  YYYY-MM-DD
  section 项目A
    任务1           :a1, 2023-05-15, 6d
    任务2           :after a1  , 10d
  section 项目B
    任务3           :2023-05-20  , 8d
    任务4           :2023-05-25  , 5d

Mermaid语法使用,流程图,笔记文章来源地址https://www.toymoban.com/news/detail-636038.html