流程圖進階用法【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