Markdown Graph 图表语法mermaid

UML图

代码

```mermaid
sequenceDiagram    
participant User    
participant System    
User->>System: 发送请求    
System->>User: 返回响应
``

图例

---

代码

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了不适合放在一行
李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?

图例

---

Mermaid流程图

代码

```mermaid
      flowchart TB
        subgraph 从左到右
          direction LR
          声明图像类型1 --> 声明排列方向1 --> 声明图像内容1
        end
        subgraph 从右到左
          direction RL
          声明图像类型2 --> 声明排列方向2 --> 声明图像内容2
        end
        subgraph 上下分明
          direction LR
          subgraph 从上到下
            direction TB
            声明图像类型3 --> 声明排列方向3 --> 声明图像内容3
          end
          subgraph 从下到上
            direction BT
            声明图像类型4 --> 声明排列方向4 --> 声明图像内容4
          end
          从上到下 --> 从下到上
        end
        从左到右 --> 从右到左 --> 上下分明

图例

代码

```mermaid
graph LR

A[长方形] -- 链接 --> B((圆))

A --> C(圆角长方形)

B --> D{菱形}

C --> D

图例

---

代码

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

图例

---

代码

```mermaid
graph LR
A1-1(Graph Type)-->A2-1(1:Round Rectangle)
A2-1-.-A3-1[表示程序的开始或者结束]

A1-1-->A2-2[2:Rectangle]
A2-2-.-A3-2[一般用作要执行的处理]

A1-1-->A2-3{3:菱形}
A2-3-.-A3-3[表示决策或判断]

A1-1-->A2-4>Particular shape]
A2-4-.-A3-4[Unknown]

A1-1-->A2-5((圆形))
A2-5---A3-5[Usecase]
A2-5---A4-5[Usecase]

图例

---

代码

```mermaid
graph TB
A-->B0
A---B1
A-.-B2
A-->|Link1|B3
A---|Link2|B4
A==>B5
A===B6

图例

---

样式填充
代码

```mermaid
graph LR
style A fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
style B fill:#ccf,stroke:#333,stroke-width:2px,fill-opacity:1,stroke-dasharray:5,5

A-->B

图例

---

Flowchart流程图

代码

```mermaid

flowchat

st=>start: 开始

e=>end: 结束

op=>operation: 我的操作

cond=>condition: 确认？

st->op->cond

cond(yes)->e

cond(no)->op

图例

---

甘特图

代码

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

图例

---

代码

```mermaid
gantt
dateFormat YYYY-MM-DD
title 甘特图示例
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划中 : des3, after des2, 5d

图例

类图

代码

```mermaid
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
pie
title 数据比例图
"选项1" : 25
"选项2" : 50
"选项3" : 25 

图例

---

旅程图

代码

```mermaid
journey
title 用户旅程图
section 登录
已有账号         : 已有账号页面
点击登录         : 登录操作
登录成功         : 登录成功页面
section 注册
没有账号         : 注册页面
点击注册         : 注册操作
注册成功         : 注册成功页面

图例

---

markdown表格

代码

项目 | Value
-------- | -----
电脑 | $1600
手机 | $12
导管 | $1

| Column 1 | Column 2 |
|:--------:| -------------:|
| centered 文本居中 | right-aligned 文本居右 |自定义列表

图例

项目	Value
电脑	$1600
手机	$12
导管	$1

Column 1	Column 2
centered 文本居中	right-aligned 文本居右