流程图高级用法【Markdown进阶篇】

🚀作者简介

主页：水香木鱼的博客

专栏：技术文档

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

（一）插入时序图

语法：

sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
1
2
3

效果：

（二）mermaid通过设定参与者(participants)的顺序控制二者的顺序

语法：

sequenceDiagram
　　participant John
　　participant Alice
　　Alice->>John:Hello John,how are you?
　　John-->>Alice:Great!
     Alice->>John: dont borther me ! 
     John-->>Alice:Great! 
     Alice-xJohn: wait! 
     John--xAlice: Ok!
1
2
3
4
5
6
7
8
9

效果：

（三）便签

语法：

sequenceDiagram
participant John
Note left of John:左边的文本
 
Alice->>John:Hello John, how are you?
Note over Alice,John:跨越两个Actor的便签
1
2
3
4
5
6

效果：

（四）循环Loops

语法：

sequenceDiagram
    Alice->>John: Hello!
    loop Reply every minute
        John->>Alice: Great!
    end
1
2
3
4
5

效果：

（五）选择ALT与OPT

语法：

sequenceDiagram
    Alice->>Bob: Hello Bob, How are you?
    alt is sick
        Bob->>Alice: not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy :)
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
1
2
3
4
5
6
7
8
9
10

效果：

（六）时序图demo

语法：

graph TB
    sq[Square shape] --> ci((Circle shape))
 
    subgraph A subgraph
        di{Diamond with  line break} -.-> ro(Rounded)
        di==>ro2(Rounded square shape)
    end
 
    e --> od3>Really long text with linebreak
in an Odd shape]
 
    cyr[Cyrillic]-->cyr2((Circle shape Начало));
 
    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:4px;
    class sq,e green
    class di orange
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果：

（七）插入甘特图

一个section和另一个section之间要空行

语法：

gantt
title 甘特图
dateFormat YYYY-MM-DD
 
section 项目A
任务1 :a1, 2018-06-06, 30d
任务2 :after a1 , 20d
 
section 项目B
任务3 :2018-06-12 , 12d
任务4 : 24d
1
2
3
4
5
6
7
8
9
10
11

效果：

语法说明

（八）甘特图demo

• section 项目名称
• 分任务名称 : [状态], [当前节点名称], [开始时间], 结束时间/持续时间

语法：

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
 
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
 
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
 
    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h
 
    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果：

---

📓精品推荐

🔋流程图的魅力【在markdown中使用mermaid格式制作流程图】

🔋你不知道的产品体验设计【五层设计模式】

🔋npm常用命令操作手册【程序员必备】

🔋UI设计师(界面设计)面试题

🔋设计师设计相关图表时，如何运用设计技巧与合理的用户体验？【大屏可视化（PC端、移动端）】

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。