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

🚀作者简介

主页：​​水香木鱼的博客​​

专栏：​​技术文档​​

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

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

📒技术聊斋

（一）插入时序图

语法：

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

效果：

A

B

是否已收到消息？

已收到消息

A

B

（二）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!      

效果：

John

Alice

Hello John,how are you?

Great!

dont borther me !

Great!

wait!

Ok!

John

Alice

（三）便签

语法：

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

效果：

John

Alice

左边的文本

Hello John, how are you?

跨越两个Actor的便签

John

Alice

（四）循环Loops

语法：

sequenceDiagram
    Alice->>John: Hello!
    loop Reply every minute
        John->>Alice: Great!
    end      

效果：

Alice

John

Hello!

Great!

loop

[Reply every

minute]

Alice

John

（五）选择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      

效果：

Alice

Bob

Hello Bob, How are you?

not so good :(

Feeling fresh like a daisy :)

alt

[is sick]

[is well]

Thanks for asking

opt

[Extra response]

Alice

Bob

（六）时序图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<br>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      

效果：

A subgraph

Rounded

Diamond with line break

Rounded square shape

Square shape

Circle shape

e

Really long text with linebreak

in an Odd shape

Cyrillic

Circle shape Начало

（七）插入甘特图

一个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      

效果：

Mon 11

Mon 18

Mon 25

Mon 02

Mon 09

Mon 16

Mon 23

任务1

任务2

任务3

任务4

项目A

项目B

甘特图

语法说明

语法	功能
title	标题
dateFormat	日期格式
section	模块
done	已经完成
active	当前正在进行
crit	关键阶段
日期缺失	默认从上一项完成后

（八）甘特图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      

效果：

Mon 06

Mon 13

Mon 20

Completed task

Active task

Future task

Future task2

Completed task in the critical line

Implement parser and jison

Create tests for parser

Future task in critical line

Create tests for renderer

Add to mermaid

Describe gantt syntax

Add gantt diagram to demo page

Add another diagram to demo page

Describe gantt syntax

Add gantt diagram to demo page

Add another diagram to demo page

A section

Critical tasks

Documentation

Last section

Adding GANTT diagram functionality to mermaid