The basic syntax of mermaid in typera

1. How to enter the drawing mode ？

Three `( Interval number )+mermaid

```mermaid     // And then go back , Enter the code quickly , Do mind mapping , Flowchart 
graph TB            // Used to describe the direction of a graph ,typora All are downward by default 

2. node

1. Namely graph（ chart ） Each text box in （ Or text block ）, Is the basic composition of a graph .Mermaid Each node in the has a id, And the text of the node .
   . Common are ：

id style	id meaning
id( )	Rounded rectangle node （ It can also be called rounded rectangle ）
id [ ]	Rectangular node ( Default )
id(( ))	Circular nodes
id{ }	l Prismatic node
id > ]	Flag node with opening to the right
id [ <	Flag node with left opening （ Try it and find that it doesn't exist ）

eg:

3. Lines between nodes

The pattern of the line	meaning
–>	A solid line with an arrow （ The more short lines, the longer the line ）
---->	Text can be added in the middle
—	Solid lines without arrows （ The more short lines, the longer the line ）
— ---	Text can be added in the middle
- . -	Dotted line （ The dotted line cannot be extended ）
- . ->	Dotted line （ Can't extend ）
-.- -.->	Text can be added in the middle （ Can't extend ）
==>	Thick line with arrow （ Can be extended ）
===	Thick line （ Can be extended ）
====>	Text can be added in the middle （ Can be extended ）
======	Text can be added in the middle （ Can be extended ）

4. Mind mapping ：

What is? Mind mapping ?

Every node （ title ） It is best to name according to certain rules ：

Property value	effect
LR	Spread the mind map from left to right
RL	Spread the mind map from right to left
TB	Let the mind map be scattered from top to bottom
BT	Let the mind map be scattered from bottom to top

expand ：
LR Namely Left and Right The first letter of
TB Namely Top( Top ) and Bottom( Bottom ) The first letter of
Add subgraph ：

subgraph  Sub chart name 
   Sub graph content 
end

5. flow chart

What is? flow chart ?

• The rounded rectangle represents “ Start ” And “ end ”;
• Input and output are represented by parallelogram ;
• The rectangle represents the action plan 、 For ordinary work links , Procedures to be executed ;
• Diamond indicates problem judgment or judgment （ to examine / The examination and approval / review ） link ;
• The arrow stands for workflow Direction .

---

Using nodes to represent flow charts cannot be standardized , First of all, because it has no parallelogram , Secondly, its typesetting is not standardized . Want to standardize the flow chart , You need to use the standard flow chart source code format

​```mermaid
flowchat

id1=>start:  Start box 

id2=>operation:  Processing box 

id3=>condition:  Judgment box 

id4=>subroutine:  Sub process 

id5=>inputoutput:  I / O box 

id6=>end:  End box 

id1->id2->id3
id3(yes)->id5->id6
//yes\no Is the prescribed writing , Control path 
id3(no)->id4(right)->id2
/*right Control to line from id4 Which direction will you come out to id2（ The default is bottom）,  In addition to the judgment box , Everything else can be used left,right,top,bottom  Four words to control the direction of the line */