markdown基本使用

流程图

• 参考
• 横向流程图

    ```mermaid
    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]
    ```                                                         

• 连接，参考

• 虚线

    ```mermaid
    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]
    ```

• 写法2

    ```mermaid
    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)
    ```

• 分组，参考

    ```mermaid
    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
    ```

类图

    ```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()
    ```

状态图

• 声明状态

    ```mermaid
    stateDiagram
        状态1
    ```

• 状态描述

    ```mermaid
    stateDiagram
        state "状态描述性文字" as 状态2
    ```
 
    ```mermaid
    stateDiagram
        状态3 : 状态3的文字描述
    ```

• 状态转换

    ```mermaid
    stateDiagram
        状态1 --> 状态2
    ```
 
    ```mermaid
    stateDiagram
        状态1 --> 状态2: 优化
    ```
 
    ```mermaid
    stateDiagram
        [*] --> 状态1
        状态1 --> [*]
    ```

• 备注

    ```mermaid
    stateDiagram
        状态1 : 描述将出现在右侧
        note right of 状态1
            这里添加描述内容
        end note
        状态1 --> 状态2
        note left of 状态2 : 在节点左侧添加描述
    ```

点击查看详情

• 案例1

    ```mermaid
    stateDiagram
    [*] --> 静止
    静止 --> [*]
    静止 --> 移动
    移动 --> 静止
    移动 --> 碰撞
    碰撞 --> [*]
    ```

• 案例2

    ```mermaid
    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
    ```

饼图

    ```mermaid
    pie title 食物的价格
        "鸡" : 36
        "鸭" : 45
        "鹅" : 75 
    ```