long blogs

进一步有进一步惊喜


  • Home
  • Archive
  • Tags
  •  

© 2025 long

Theme Typography by Makito

Proudly published with Hexo

markdown画图

Posted at 2020-07-29 笔记 markdown 

绘制图关系

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

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

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

1
2
3
4
graph TB
A-->B
B-->A
A-->C
1
2
3
graph LR
A-->B
B-->C

绘制流程图

1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
  participant z as 张三
  participant l as 李四
  z-->>l:吃饭没?
  l-->>z:没吃。
  
  loop 每天
    z-->>l:又是无聊的一天
    l-->>z:是啊,又是无聊的一天
    activate z
  end

绘制时序图

参与者

  • 代码-需要设置语言为mermaid
1
2
3
4
sequenceDiagram
participant 参与者 as P1
participant 参与者2 as P2

  • 效果
1
2
3
sequenceDiagram
participant 参与者 as P1
participant 参与者2 as P2

消息

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

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

末尾带x表示异步消息

  • 代码
1
2
3
4
5
6
sequenceDiagram
participant Boss as 老总
participant 工具人 as 员工
Boss ->> 工具人: “我们都是兄弟”
Boss -x工具人: 马上上市，准备财富自由了
工具人-->>Boss: 鼓掌
  • 效果
1
2
3
4
5
6
sequenceDiagram
participant Boss as 老总
participant 工具人 as 员工
Boss ->> 工具人: “我们都是兄弟”
Boss -x工具人: 马上上市，准备财富自由了
工具人-->>Boss: 鼓掌

激活框

  • 代码
1
2
3
4
5
6
7
sequenceDiagram
participant Boss as 老板
participant Staff as 员工
Boss ->>+ Staff: 我对钱不感兴趣
Staff-->>- Boss: 鼓掌
Boss->>+ Staff: 你们要快速成长
Staff-->>- Boss: 今晚月亮不睡我不睡
  • 效果
1
2
3
4
5
6
7
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都是福报
  • 效果
1
2
3
4
sequenceDiagram
Note left of  BossA : 不知妻美
Note right of BossB: 没见过钱
Note over BossA,BossB: 996都是福报

循环

  • 代码
1
2
3
4
5
6
sequenceDiagram
loop 无限循环 
我->>+csgo: rushB
csgo-->>-我:白给
end

  • 效果
1
2
3
4
5
sequenceDiagram
loop 无限循环 
我->>+csgo: rushB
csgo-->>-我:白给
end

选择框

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
alt 运行成功
    我->>代码:小样,随便就解决
    代码-->>我:????
else 运行失败
   代码-->>我: 小样，这种弱智问题竟然解决不了
else 结果不一致
   我->>+ 代码: ???
   代码-->>- 我: ？？？
end


  • 效果
1
2
3
4
5
6
7
8
9
10
sequenceDiagram
alt 运行成功
    我->>代码:小样,随便就解决
    代码-->>我:????
else 运行失败
   代码-->>我: 小样，这种弱智问题竟然解决不了
else 结果不一致
   我->>+ 代码: ???
   代码-->>- 我: ？？？
end

可选

  • 代码
1
2
3
4
5
6
sequenceDiagram
老板->>工具人: 我没挣过钱
opt 是否鼓掌
工具人-->>老板:拍拍 
end

  • 效果
1
2
3
4
5
sequenceDiagram
老板->>工具人: 我没挣过钱
opt 是否鼓掌
工具人-->>老板:拍拍 
end

并行

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
sequenceDiagram
    老板 ->> 员工 : 开始实行996
    
    par 并行
        员工 ->> 员工 : 刷知乎
    and
        员工->>员工:上厕所
    and
        员工 ->> 员工 : 工作
    and
        员工 ->> 员工:逛淘宝 
    end
   
    员工-->> 老板 : 9点下班

  • 效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
sequenceDiagram
    老板 ->> 员工 : 开始实行996
    
    par 并行
        员工 ->> 员工 : 刷知乎
    and
        员工->>员工:上厕所
    and
        员工 ->> 员工 : 工作
    and
        员工 ->> 员工:逛淘宝 
    end
   
    员工-->> 老板 : 9点下班
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

绘制分割线:

-----------

Share 

 Previous post: go-gorm Next post: go-gin-请求处理 

© 2025 long

Theme Typography by Makito

Proudly published with Hexo