Microblog writing - flow chart - sequence chart - Gantt chart - Mermaid flow chart - good results

1. flow chart

The node name cannot have the same name as the keyword , Using quotation marks can avoid unnecessary trouble , For example, avoid having the same name as the keyword . keyword graph Represents the beginning of a flowchart , At the same time, you need to specify the direction of the figure .T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN.

TB, From top to bottom
TD, From top to bottom
BT, From bottom to top
RL, From right to left
LR, From left to right

graph LR
    A[ square ] -->B( Round corners )
    B --> C{
     Conditions a}
    C -->|a=1| D[ result 1]
    C -->|a=2| E[ result 2]
    F[ Horizontal flow chart ]

1.1 The shape of the node

Default node A
Text node B[bname]
Fillet nodes C(cname)
Circular nodes D((dname))
Asymmetric nodes E>ename]
Diamond nodes F{fname}
A~F Is the name of the current node , Similar to variable name , Easy to quote when drawing

graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{
    fname}

1.2 attachment

There are many shapes of connecting lines between nodes , You can add labels to the connecting line ：

Arrow connection A1–->B1
Open connection A2—B2
Tag connection A3–text—B3
Arrow label connection A4–text–>B4
Dashed open connection A5.-B5
Dashed arrow connection A6-.->B6
The label is connected by dotted lines A7-.text.-B7
Labels are connected by dashed arrows A8-.text.->B8
Thick line open connection A9 = = =B9
Thick line arrow connection A10==>B10
Label bold line open connection A11= =text= = =B11
Labels are connected by thick lines and arrows 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.3 Subgraphs

graph LR
    subgraph g1
        a1-->b1
    end
    subgraph g2
        a2-->b2
    end
    subgraph g3
        a3-->b3
    end
  a3-->a2

2. Sequence diagram

key word ,participant（ participants ）,note（ Sticky notes ）, loop , choice

note [right of | left of][Actor]:Text
Label multiple modules , Separated by commas
note over [Actor1, Actor2…]:Text

loop Loop_text
… statements…
end

alt Describing_text
…statements…
else
…statements…
end

// It is recommended not to else In case of use opt(option, choice )
opt Describing_text
…statements…
end

Example

graph LR
    subgraph g1
        a1-->b1
    end
    subgraph g2
        a2-->b2
    end
    subgraph g3
        a3-->b3
    end
  a3-->a2

2.1 attachment

Solid line without arrow ->
Solid lines with arrows ->>
Dashed line without arrow –>
Dotted line with arrow –>>
belt x Solid line -x
belt x Dotted line –x

sequenceDiagram
    Note right of A:  shit ,  meet B 了 
    A->B:   Hello B, how are you ?
    note left of B:  shit , meet A 了 
    B-->A:  Fine, thx, and you?
    note over A,B:  Get out of here , It's too troublesome 
    A->>B:  I'm fine too. note left of B:  Hurry up A B-->>A: Great! note right of A:  seek safety in flight  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:  Great ,  He's gone 

---

change AB The order

---

sequenceDiagram
  #  By setting up participants (participants) The sequence of control display modules 
  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!

3. Gantt Chart

Gantt chart is a kind of bar chart , It is usually used to describe the start and completion time of project terminal elements and summary elements .

3.1 keyword

title	title
dateFormat	Date format
section	modular
Completed	Already completed
Active	Currently in progress
Future	Follow up to be handled
crit	The critical stage
Date missing	By default, after the previous item is completed

for example ：

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

---

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

   Reasonable script code can effectively improve work efficiency , Reduce repetitive labor .