markdown基本使用
流程图
- 参考
横向流程图
```mermaid
graph LR
A[ods_cart_info_inc] --> B[dwd_trade_cart_add_inc]
```
graph LR
A[ods_cart_info_inc] --> B[dwd_trade_cart_add_inc]
竖向流程图
```mermaid
graph TD
A[ods_cart_info_inc] --> B[dwd_trade_cart_add_inc]
```
graph TD
A[ods_cart_info_inc] --> B[dwd_trade_cart_add_inc]
-
连接，参考 -
虚线
```mermaid
graph LR
A[ods_cart_info_inc] -.-> B[dwd_trade_cart_add_inc] -. 装载 .- C[dwd_trade_cart_full]
```
graph LR
A[ods_cart_info_inc] -.-> B[dwd_trade_cart_add_inc] -. 装载 .- C[dwd_trade_cart_full]
- 实线
```mermaid
graph LR
A[ods_cart_info_inc] ==> B[dwd_trade_cart_add_inc] == 装载 ==> C[dwd_trade_cart_full]
```
graph LR
A[ods_cart_info_inc] ==> B[dwd_trade_cart_add_inc] == 装载 ==> C[dwd_trade_cart_full]
- 写法2
```mermaid
graph LR
A[christmas] -->|One| B(Go shopping)
B -->|Two| D[Laptop]
```
graph LR
A[christmas] -->|One| B(Go shopping)
B -->|Two| D[Laptop]
- 脑图
```mermaid
graph LR
主题--> A(副标题1)
主题--> B(副标题2)
A-->C(副标题3)
A-->D(副标题4)
B-->E(副标题5)
B-->F(副标题6)
```
graph LR
主题--> A(副标题1)
主题--> B(副标题2)
A-->C(副标题3)
A-->D(副标题4)
B-->E(副标题5)
B-->F(副标题6)
分组，参考
```mermaid
graph TB
subgraph 第一组
a1-->a2
end
subgraph 第二组
b1-->b2
end
a1-->b2
```
graph TB
subgraph 第一组
a1-->a2
end
subgraph 第二组
b1-->b2
end
a1-->b2
时序图
```mermaid
sequenceDiagram
participant l as 客户端
participant h as 服务器
l->>h: SYN
h->>l: SYN-ACK
l->>h: ACK
```
sequenceDiagram
participant l as 客户端
participant h as 服务器
l->>h: SYN
h->>l: SYN-ACK
l->>h: ACK
类图
```mermaid
classDiagram
class User
User : Long id
User : String name
User : Integer age
User : Integer sex
User : String email
User : eat()
User : drink()
User : sleep()
```
classDiagram
class User
User : Long id
User : String name
User : Integer age
User : Integer sex
User : String email
User : eat()
User : drink()
User : sleep()
状态图
- 声明状态
```mermaid
stateDiagram
状态1
```
stateDiagram
状态1
- 状态描述
```mermaid
stateDiagram
state "状态描述性文字" as 状态2
```
```mermaid
stateDiagram
状态3 : 状态3的文字描述
```
stateDiagram
state "状态描述性文字" as 状态2
stateDiagram
状态3 : 状态3的文字描述
- 状态转换
```mermaid
stateDiagram
状态1 --> 状态2
```
```mermaid
stateDiagram
状态1 --> 状态2: 优化
```
```mermaid
stateDiagram
[*] --> 状态1
状态1 --> [*]
```
stateDiagram
状态1 --> 状态2
stateDiagram
状态1 --> 状态2: 优化
stateDiagram
[*] --> 状态1
状态1 --> [*]
- 备注
```mermaid
stateDiagram
状态1 : 描述将出现在右侧
note right of 状态1
这里添加描述内容
end note
状态1 --> 状态2
note left of 状态2 : 在节点左侧添加描述
```
stateDiagram
状态1 : 描述将出现在右侧
note right of 状态1
这里添加描述内容
end note
状态1 --> 状态2
note left of 状态2 : 在节点左侧添加描述
点击查看详情
- 案例1
```mermaid
stateDiagram
[*] --> 静止
静止 --> [*]
静止 --> 移动
移动 --> 静止
移动 --> 碰撞
碰撞 --> [*]
```
stateDiagram
[*] --> 静止
静止 --> [*]
静止 --> 移动
移动 --> 静止
移动 --> 碰撞
碰撞 --> [*]
- 案例2
```mermaid
stateDiagram
[*] --> 下单成功
下单成功 --> 备货
state 出货中 <<fork>>
备货 --> 出货中
出货中 --> 出货失败
出货失败 --> [*]
出货中 --> 出货确认
出货确认 --> 出货完毕
出货完毕 --> 订单完成
订单完成 --> [*]
```
stateDiagram
[*] --> 下单成功
下单成功 --> 备货
state 出货中 <<fork>>
备货 --> 出货中
出货中 --> 出货失败
出货失败 --> [*]
出货中 --> 出货确认
出货确认 --> 出货完毕
出货完毕 --> 订单完成
订单完成 --> [*]
甘特图
- 日期格式
点击查看详情
| 表达式 | 取值示例 | 描述 |
|---|---|---|
| YYYY | 2014 | 4 位数年 |
| YY | 14 | 2 位数年 |
| Q | 1…4 | 季度数 |
| M MM | 1…12 | 月份数 |
| MMM MMMM | January…Dec | 月份名称 |
| D DD | 1…31 | 月中天数 |
| Do | 1st…31st | 月中第几天 |
| DDD DDDD | 1…365 | 年中天数 |
| X | 1410715640.579 | Unix 时间戳（秒） |
| x | 1410715640579 | Unix 时间戳（毫秒） |
| H HH | 0…23 | 24 小时制小时数 |
| h hh | 1…12 | 12 小时制小时数 |
| a A | am pm | 上午、下午 |
| m mm | 0…59 | 分钟数 |
| s ss | 0…59 | 秒钟数 |
| S | 0…9 | 十分之一秒 |
| SS | 0…99 | 百分之一秒 |
| SSS | 0…999 | 千分之一秒 |
| Z ZZ | +12:00 | 时区 |
```mermaid
gantt
苹果 :a, 2017-07-20, 1w
香蕉 :crit, b, 2017-07-23, 1d
樱桃 :active, c, after b a, 1d
```
```mermaid
gantt
title 简单的甘特图
dateFormat YYYY-MM-DD
section 分区1
任务1-1 :a1, 2014-01-01, 30d
任务1-2 :after a1 , 20d
section 分区2
任务2-1 :2014-01-12 , 12d
任务2-2 : 24d
```
gantt
苹果 :a, 2017-07-20, 1w
香蕉 :crit, b, 2017-07-23, 1d
樱桃 :active, c, after b a, 1d
gantt
title 简单的甘特图
dateFormat YYYY-MM-DD
section 分区1
任务1-1 :a1, 2014-01-01, 30d
任务1-2 :after a1 , 20d
section 分区2
任务2-1 :2014-01-12 , 12d
任务2-2 : 24d
饼图
```mermaid
pie title 食物的价格
"鸡" : 36
"鸭" : 45
"鹅" : 75
```
pie title 食物的价格
"鸡" : 36
"鸭" : 45
"鹅" : 75
