Stunned! The original drawing function of markdown is so powerful!

1. introduction

Markdown It's a lightweight markup language , Compared with xml、html And other hypertext markup languages ,Markdown The grammar is simpler , Structure is clearer , Easier to read and use .

As a blogger who often writes notes , Has become markdown The fans of , Even for your own convenience , Many classes have been customized markdown Grammar to form their own personal blog .

However ,markdown This seemingly simple and lightweight markup language , But it supports very powerful drawing function , It's very convenient to use , In this article, we will introduce in detail markdown How language draws flow charts 、 The pie chart 、 Sequence diagram 、 Gantt Chart .

2. markdown Drawing block

Enable markdown Drawing blocks are very similar to code blocks ：

 ```mermaid
   ···  Drawing instructions  ···
 ```

Copy

3. flow chart

3.1 Flowchart statement

The first line of the flowchart is the declaration of the flowchart , Include keywords graph And flow chart direction .

The flow chart direction contains the following identification ：

• 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

T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN

for example ：

 graph *LR;*  
 A-->B  
 B-->C  
 C-->D  
 D-->A

Copy

3.2 Node shape

• Default node A
• Text node B[bname]
• Fillet nodes C(cname)
• Circular nodes D((dname))
• Asymmetric nodes E>ename]
• Diamond nodes F{fname}

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

Copy

3.3 Line shape

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

3.4 example

3.5 Subgraphs

markdown In the grammar of , It also allows users to add subgraphs , The subgraph is subgraph Keyword identification graph, And end ending , But all node names are global , Not isolated , Therefore, subgraphs can be connected with each other .

• example

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

Copy

4. Sequence diagram

The first choice to describe the interaction between two or more modules is the sequence diagram ,markdown It also provides the function of drawing sequence diagram .

The key words for drawing a sequence diagram are sequenceDiagram.

4.1 participants -- Module declaration

As a representation of the interaction process between multiple modules , The first thing to do is to declare which modules are shared .

We need to pass participant Keyword to declare , The order of declaration is the order in which modules are presented from left to right .

for example ：

 sequenceDiagram  
 participant B  
 participant A

Copy

4.2 attachment

markdown The sequence diagram supports the following connection modes ：

• 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  
 participant server  
 participant CA  
 participant client  
 
 server->>CA:  This is my public key   
 CA-->>server:  Issue a certificate   
 server->client:  Establishing a connection   
 client->>server:  I want to  RSA  Algorithm encrypts the public key   
 server-->>client:  Issue certificate and public key   
 client-->>server:  Report the random number encrypted by public key   
 server->>server:  Generate symmetric encryption key   
 client-->server:  Encrypted communication   
 client-->server:  Encrypted communication   
 client-xserver:  Close the connection   

Copy

4.3 Advanced features

In the actual use scenario , It is often not so simple to communicate with each other , It's about branching 、 Special treatment such as circulation ,markdown It can also support .

4.3.1 loop

 loop Loop_text  
  ... statements...  
 end  

Copy

4.3.2 Branch

 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

Copy

4.3.3 notes

Notes or notes , Used to make additional marks on the module .

• Single label

note [right of | left of][Actor]: Text

• Label multiple modules

note over [Actor1, Actor2...]:Text

4.3.4 example

 sequenceDiagram  
 participant Doctor  
 participant Bob  
 
 note right of Bob: Bob is a patient  
 
 loop Look Bob each hour  
 Doctor->>Bob: How are you?  
 alt Bob is sick  
 Bob->>Doctor: Not so good.  
 else  
 Bob->>Doctor: Fine, thank you.  
 end  
 loop Ask about patient  
 Doctor-->Bob: Inquire about the situation  
 end  
 opt Extra response  
 Bob->>Doctor:Thanks for asking  
 end  
 end   
 
 note right of Doctor: hourly ask finished

Copy

5. Gantt Chart

In project management , Gantt'u is a very effective helper , Through the Gantt Chart , We can see the progress of the whole project at a glance .

use markdown Drawing Gantt chart is very simple and fast .

He has the following keywords ：

• dateFormat -- Date format
• section -- Module declaration
• Completed -- Already completed
• Active -- Have in hand
• Future -- To be processed later
• crit -- The critical stage

Here is a complete Gantt chart presentation ：

 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

Copy

appendix -- Reference material

• https://en.wikipedia.org/wiki/Unified_Modeling_Language#Interaction_diagrams