微博撰写-流程图-序列图-甘特图-mermaid流程图-效果不错

1.流程图

节点名不能与关键字同名，使用引号可以避免一些不必要的麻烦，如避免与关键字同名。关键字graph表示一个流程图的开始，同时需要指定该图的方向。T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN。

TB，从上到下
TD，从上到下
BT，从下到上
RL，从右到左
LR，从左到右

graph LR
    A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
1
2
3
4
5
6

1.1节点的形状

默认节点 A
文本节点 B[bname]
圆角节点 C(cname)
圆形节点 D((dname))
非对称节点 E>ename]
菱形节点 F{fname}
A~F 是当前节点名字，类似于变量名，画图时便于引用

graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{fname}
1
2
3
4
5
6
7

1.2连线

节点间的连接线有多种形状，可以在连接线中加入标签：

箭头连接 A1–->B1
开放连接 A2—B2
标签连接 A3–text—B3
箭头标签连接 A4–text–>B4
虚线开放连接 A5.-B5
虚线箭头连接 A6-.->B6
标签虚线连接 A7-.text.-B7
标签虚线箭头连接 A8-.text.->B8
粗线开放连接 A9 = = =B9
粗线箭头连接 A10==>B10
标签粗线开放连接 A11= =text= = =B11
标签粗线箭头连接 A12 = = text = =>B12

graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A5-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12
1
2
3
4
5
6
7
8
9
10
11
12
13

1.3子图

graph LR
    subgraph g1
        a1-->b1
    end
    subgraph g2
        a2-->b2
    end
    subgraph g3
        a3-->b3
    end
  a3-->a2
1
2
3
4
5
6
7
8
9
10
11

2.序列图

关键词，participant（参与者），note（便签），循环，选择

note [right of | left of][Actor]:Text
给多个模块做标签, 通过逗号分割
note over [Actor1, Actor2…]:Text

loop Loop_text
… statements…
end

alt Describing_text
…statements…
else
…statements…
end

//推荐在没有else的情况下使用 opt(option,选择)
opt Describing_text
…statements…
end

示例

graph LR
    subgraph g1
        a1-->b1
    end
    subgraph g2
        a2-->b2
    end
    subgraph g3
        a3-->b3
    end
  a3-->a2
1
2
3
4
5
6
7
8
9
10
11

2.1连线

无箭头实线 ->
有箭头实线 ->>
无箭头虚线 –>
有箭头虚线 –>>
带x实线 -x
带x虚线 –x

sequenceDiagram
    Note right of A: 倒霉, 碰到B了
    A->B:   Hello B, how are you ?
    note left of B: 倒霉,碰到A了
    B-->A:  Fine, thx, and you?
    note over A,B: 快点溜，太麻烦了
    A->>B:  I'm fine too.
    note left of B: 快点打发了A
    B-->>A: Great!
    note right of A: 溜之大吉
    A-xB:   Wait a moment
    loop Look B every minute
        A->>B: look B, go?
        B->>A: let me go?
    end
    B--xA: I'm off, byte 　
    note right of A: 太好了, 他走了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---

改变AB顺序

---

sequenceDiagram
  # 通过设定参与者(participants)的顺序控制展示模块顺序
  participant Alice
　participant Bob
　participant John
　Alice->John:Hello John, how are you?
　loop Healthcheck
　  John->John:Fight against hypochondria
　end
　Note right of John:Rational thoughts <br/>prevail...
　John-->Alice:Great!
　John->Bob: How about you?
　Bob-->John: good!
1
2
3
4
5
6
7
8
9
10
11
12
13

3.甘特图

甘特图是一类条形图，通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

3.1关键字

例如：

gantt
    dateFormat YYYY-MM-DD
    section S1
        T1: 2014-01-01, 9d
    section S2
        T2: 2014-01-11, 9d
    section S3
        T3: 2014-01-02, 9d
1
2
3
4
5
6
7
8

---

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

  合理的脚本代码可以有效的提高工作效率，减少重复劳动。