Mermaid画图——普通图

简单语法举例

graph TD; %% 图的布局方向
	A-->B; %% 连线有箭头指
	A---C; %% 连线无箭头
    B-->D;
    C-->D;

效果：

graph TD; %% 图的布局方向
	A-->B; %% 连线有箭头指
	A---C; %% 连线无箭头
    B-->D;
    C-->D;

图的方向

• TB/TD - top bottom/top down
• BT - bottom top
• RL - right left
• LR - left right

TB方向：

graph TB
    A --> B --> C

graph TB
    A --> B --> C

LR方向：

graph LR
	A --> B --> C

graph LR
	A --> B --> C

节点的形状

graph LR 
A[锐角矩形]
B(圆角矩形)
C((圆形))
D>不对称节点]
E{菱形}

graph LR 
A[锐角矩形]
B(圆角矩形)
C((圆形))
D>不对称节点]
E{菱形}

连线

graph LR
subgraph 实线有箭头无文字
    A-->B
end 

subgraph 实线无箭头无文字
    C---D
end   

subgraph 实线无箭头有文字
    E-- 文字 ---F
end  

subgraph 实线无箭头有文字2
    G---|文字|H
end   

subgraph 虚线有箭头有文字
    I-.文字.->J
end  
  

subgraph 实粗线有箭头有文字
    K==>|文字|L
end  

graph LR
subgraph 实线有箭头无文字
    A-->B
end 

subgraph 实线无箭头无文字
    C---D
end   

subgraph 实线无箭头有文字
    E-- 文字 ---F
end  

subgraph 实线无箭头有文字2
    G---|文字|H
end   

subgraph 虚线有箭头有文字
    I-.文字.->J
end  
  

subgraph 实粗线有箭头有文字
    K==>|文字|L
end  

子图

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

交互

graph LR;
    A-->B;
	click A interactWithMarkdown "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"

点击节点“B”，会通过浏览器打开URL："www.github.com"。

graph LR;
    A-->B;
    click B "http://www.github.com" "This is a tooltip for a link"