Markdown drawing Mermaid practical tutorial

Mermaid Is a tool for drawing flow charts 、 State diagram 、 Sequence diagram 、 Gantt chart Library , Use JS Render locally , Widely integrated into many Markdown Editor .

Mermaid As a use JS Rendered Library , Generated is not a “ picture ”, It's a piece of HTML Code .

Click to enter the official website
Click to enter Github Project address

1. mermaid Definition

2. flow chart

• The syntax is as follows :

  graph LR; #  among LR Direction 
  	A --> B #  Different arrows indicate 
  

a. Direction and arrow meaning

Diction graph x;	meaning	arrow	meaning
TB	From top to bottom	>	Add tail arrow
BT	From bottom to top	-	Do not add tail arrows
RL	From left to right	--	Single line
LR	From right to left	--text--	Single line plus text
		==	Thick line
		==text==	Bold lines with text
		-.-	Dotted line
		-.text.-	Dotted line with text

b. Node meaning

     Default square 
    id1[ square ]
    id2( Round edged rectangle )
    id3([ Stadium shape ])
    id4[[ Subroutine ]]
    id5[( cylindrical )]
    id6(( circular ))
	id1{
     The diamond }
	id2{
    {
     hexagon }}
	id3[/ parallelogram /]
	id4[\ Inverse parallelogram \]
	id5[/ trapezoid \]
	id6[\ Reverse trapezoid /]

c. Example

graph LR;
	A>"Ubuntu<br>(Linux)"] -.soft.-> C{
    TV}
	B["MAC"] ==> D((ARM64))
	D--> C
	A --> B

graph LR
	a---b
	b-- Text 1!---c
	c---| Text 2|d
	d===e
	e== Text 3===f
	f-.-g
	g-. Text .-h

• Extend the connection ：
  Add corresponding characters , As shown in the figure below B To E, Added a... To the connection - . Characters can be added more than once .

graph LR
    A[Start] --> B{
    Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B --->|No| E[End];

• Multiple chains

graph LR
   a --> b & c--> d
   
   A & B--> C & D
   
    X --> M
    X --> N
    Y --> M
    Y --> N

• notes %% This is a comment , Not visible in rendered view
• Subgraphs

%% This is a comment , Not visible in rendered view 
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2