Mermaid：流程图结点形状

结点定义

通过指定一个 id 来定义一个结点，一个 id 对应一个结点，对同一个 id 进行改变将会改变所有结点的内容或者替代之前的定义，通过id_name[text] 这样的语法来创建一个结点，然后再通过使用已经定义的结点 id 来定义相应的关系：

%% graph is the key word which defines the orientation of flowchart with
%% 		LR - Left to Right
%%		
graph LR
	id1[This is the first node in this mermaid graph]
	id2[This is the second node]
	%% And after defining nodes, we are going to define relationship
	%% between nodes with following syntax
	id1-->id2

1. Node Shape 结点形状

通过括号类型可以指定不同结点的边框样式，常用边框类型：

• 默认正方形边框
• 圆形边框
• 子程序边框
• 运动场形状边框
• 标签形状
• 菱形
• 六边形
• 平行四边形
• 梯形

1.1 square-edge and round-edge 默认边框和圆形边框

graph LR
	id3[node default with square-edge 默认为方形边框]
	%% also you can define a new node with round-edge by using 
	%% parenthesis instead of brackets
	id4(round-edge 圆边框)

1.2 Stadium 运动场形状

	id5([stadium-shaped])

1.3 Subroutine 子程序边框

	id6[[suroutine shape]]

1.4 圆柱体形状 Clindrical shape

	id7[(Clindrical shape 圆柱体形状)]
	style id7 fill:#CCCCFF,strode:#000000, stroke-width:4px

1.5圆形 Circle

	id8((circle 圆形))

1.6 标签形状

	id9>asymetric shape 非对称形状标签形状]

1.7 菱形 Rhombus

	id10{rhombus 菱形}

1.8 六边形 Hexagon

	id11{{hexagon 六边形}}

1.9 平行四边形 Parallelogram

	id12[/parallelogram 平行四边形/]
	
	id13[\parallelogram alt 相反方向的平行四边形\]

1.10 梯形 Typezoid

	id14[/typezoid 正梯形\]
	id15[\typezoid 倒梯形/]

风格化

此外，Mermaid 还可以自定义结点的风格，例如前面的圆柱体形状：

	id7[(Clindrical shape 圆柱体形状)]
	style id7 fill:#CCCCFF,strode:#000000, stroke-width:4px

通过对应结点的 id 对该结点进行风格化处理：

style id fill:[fill-color], stroke[stroke-color], stroke-width: [value]px, stroke-dasharray: [dash-width] [dash-stride]

其中：

• fill：设置结点的填充颜色
• stroke：设置边缘绘制颜色
• stroke-width：设置边缘绘制的粗细
• stroke-dasharray：设置如何绘制虚线边框，第一个参数描述的是虚线中线段的长度，第二个参数描述的是每个线段之间的间隔

Mermaid 还允许你直接定义一个描述某一种 style 的 class：

classDef [classname] fill:[fill-color], stroke[stroke-color], stroke-width: [value]px

可以通过 ::: 将设置对应结点的风格类，或者是通过指定对应的风格类来实现：

class nodeId className

nodeId1:::classname --> nodeId2

则圆柱体形状结点的风格定义可以是：

graph LR
	%% 定义风格
	classDef style1 fill:#CCCCFF,strode:#000000, stroke-width:4px
	%% 创建结点
	id7[(Clindrical shape 圆柱体形状)]
	%% 指定风格
	class id7 style1