markdown画图

2020-07-29

绘制图关系

选择mermaid，在里面选择graph。有下列选项方向选择

类型	说明
TB	Top->Bottom
BT	Bottom->Top
LR	Left->Right
RL	Right->Left

使用-->连接两个节点，名称一致为一个节点.-->中间不能有空格

graph TB
A-->B
B-->A
A-->C

graph LR
A-->B
B-->C

绘制流程图

sequenceDiagram
  participant z as 张三
  participant l as 李四
  z-->>l:吃饭没?
  l-->>z:没吃。

  loop 每天
    z-->>l:又是无聊的一天
    l-->>z:是啊,又是无聊的一天
    activate z
  end

绘制时序图

参与者

代码-需要设置语言为mermaid

sequenceDiagram
participant 参与者 as P1
participant 参与者2 as P2

效果

sequenceDiagram
participant 参与者 as P1
participant 参与者2 as P2

消息

实线表示主动发消息A->>B

虚线代表响应B-->>A

末尾带x表示异步消息

代码

sequenceDiagram
participant Boss as 老总
participant 工具人 as 员工
Boss ->> 工具人: “我们都是兄弟”
Boss -x工具人: 马上上市，准备财富自由了
工具人-->>Boss: 鼓掌

效果

sequenceDiagram
participant Boss as 老总
participant 工具人 as 员工
Boss ->> 工具人: “我们都是兄弟”
Boss -x工具人: 马上上市，准备财富自由了
工具人-->>Boss: 鼓掌

激活框

代码

sequenceDiagram
participant Boss as 老板
participant Staff as 员工
Boss ->>+ Staff: 我对钱不感兴趣
Staff-->>- Boss: 鼓掌
Boss->>+ Staff: 你们要快速成长
Staff-->>- Boss: 今晚月亮不睡我不睡

效果

sequenceDiagram
participant Boss as 老板
participant Staff as 员工
Boss ->>+ Staff: 我对钱不感兴趣
Staff-->>- Boss: 鼓掌
Boss->>+ Staff: 你们要快速成长
Staff-->>- Boss: 今晚月亮不睡我不睡

注解

代码

1
2
3

Note left of  BossA : 不知妻美
Note right of BossB: 没见过钱
Note over BossA,BossB: 996都是福报

效果

sequenceDiagram
Note left of  BossA : 不知妻美
Note right of BossB: 没见过钱
Note over BossA,BossB: 996都是福报

循环

代码

sequenceDiagram
loop 无限循环 
我->>+csgo: rushB
csgo-->>-我:白给
end

效果

sequenceDiagram
loop 无限循环 
我->>+csgo: rushB
csgo-->>-我:白给
end

选择框

代码

sequenceDiagram
alt 运行成功
    我->>代码:小样,随便就解决
    代码-->>我:????
else 运行失败
   代码-->>我: 小样，这种弱智问题竟然解决不了
else 结果不一致
   我->>+ 代码: ???
   代码-->>- 我: ？？？
end

效果

sequenceDiagram
alt 运行成功
    我->>代码:小样,随便就解决
    代码-->>我:????
else 运行失败
   代码-->>我: 小样，这种弱智问题竟然解决不了
else 结果不一致
   我->>+ 代码: ???
   代码-->>- 我: ？？？
end

可选

代码

sequenceDiagram
老板->>工具人: 我没挣过钱
opt 是否鼓掌
工具人-->>老板:拍拍 
end

效果

sequenceDiagram
老板->>工具人: 我没挣过钱
opt 是否鼓掌
工具人-->>老板:拍拍 
end

并行

代码

sequenceDiagram
    老板 ->> 员工 : 开始实行996
    
    par 并行
        员工 ->> 员工 : 刷知乎
    and
        员工->>员工:上厕所
    and
        员工 ->> 员工 : 工作
    and
        员工 ->> 员工:逛淘宝 
    end
   
    员工-->> 老板 : 9点下班

效果

sequenceDiagram
    老板 ->> 员工 : 开始实行996

    par 并行
        员工 ->> 员工 : 刷知乎
    and
        员工->>员工:上厕所
    and
        员工 ->> 员工 : 工作
    and
        员工 ->> 员工:逛淘宝 
    end

    员工-->> 老板 : 9点下班

gantt
dateFormat YYYY-MM-DD
title 甘特图
 section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

gantt
dateFormat YYYY-MM-DD
title 甘特图
 section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

绘制分割线:

-----------