🚀作者简介

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

专栏：​​技术文档​​

能量：🔋容量已消耗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


​

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