mermaid流程图文档

graph 声明

graph 关键字声明了流程图的走向。

这两种声明了图的方向是从上到下（TD 或 TB）。

graph TD
	start --> stop

graph TD
	start --> stop

这声明了图的方向是从左到右（LR）。

graph LR
    Start --> Stop

graph LR
    Start --> Stop

流程图方向

可选的流程图方向为：

• TB-从上到下
• TD-自顶向下与从上到下相同
• BT-从下到上
• RL-从右到左
• LR-从左到右

节点和形状

节点（默认）

graph LR
    id

注意 默认会将 id 做为框中的内容

带有文本的节点

你也可以为框中设置自定义的内容，只需使用 id[Text] 语法即可：

graph LR
    id1[This is the text in the box]

graph LR
    id1[This is the text in the box]

节点形状

具有圆边的节点

graph LR
    id1(This is the text in the box)

graph LR
    id1(This is the text in the box)

体育场形状的节点

graph LR
    id1([This is the text in the box])

graph LR
    id1([This is the text in the box])

子例程形状的节点

graph LR
    id1[[This is the text in the box]]

本网页暂时不支持此节点

圆柱状的节点

graph LR
    id1[(Database)]

graph LR
    id1[(Database)]

圆形式的节点

graph LR
    id1((This is the text in the circle))

graph LR
    id1((This is the text in the circle))

非对称形状的节点

graph LR
    id1>This is the text in the box]

graph LR
    id1>This is the text in the box]

目前，只有上面的形状是用的，与它对称的图形暂不可用。未来也许可行！

菱形

graph LR
    id1{This is the text in the box}

graph LR
    id1{This is the text in the box}

六角形节点

graph LR
    id1{{This is the text in the box}}

graph LR
    id1{{This is the text in the box}}

平行四边形

graph TD
    id1[\This is the text in the box\]

graph TD
    id1[\This is the text in the box\]

梯形

graph TD
    A[/Christmas\]

graph TD
    A[/Christmas\]

梯形 alt

graph TD
    B[\Go shopping/]

graph TD
    B[\Go shopping/]

节点之间的连接线

节点可以通过连接线连接。可以具有不同类型的连接线，也可以将文本字符串附加到连接线上。

带箭头的直线

graph LR
	A-->B

graph LR
	A-->B

普通直线

graph LR
	A---B

graph LR
	A---B

带文本的直线

graph LR
	A--This is the text---B

graph LR
	A--This is the text---B

或者

graph LR
	A---|This is a text|B

graph LR
	A---|This is a text|B

带箭头和文本的直线

graph LR
	A-->|Text|B

graph LR
	A-->|Text|B

或者

graph LR
	A-- Text-->B

graph LR
	A-- Text-->B

虚线

graph LR
	A-.-B

graph LR
	A-.-B

带文本虚线

graph LR
	A-. text.-B

graph LR
	A-. text.-B

带箭头和文本的虚线

graph LR
	A-.Text.->B

graph LR
	A-.Text.->B

粗直线

graph LR
	A==>B
	B==text===C
	C==Text==>D

graph LR
	A==>B
	B==text===C
	C==Text==>D

多重连线

graph LR
	A--Test-->B--Test-->C

graph LR
	A--Test-->B--Test-->C

也可以按照以下方式在同一行声明多个节点连接：

graph TB
	A-->B & C -->D
	a & b --> c & d

graph TB
	A-->B & C -->D
	a & b --> c & d

箭头样式

当声明为 flowchart 而不是 graph 时，支持如下的新箭头：

flowchart LR
	A --o B
	B --x C
	a o--o b
	b x--x c
	c <--> d

flowchart LR
	A --o B
	B --x C
	a o--o b
	b x--x c
	c <--> d

连接线长度

流程图中的连接线是由 Graph 中的等级决定的，即垂直或水平级别（也就是说它取决于流程图的方向）。默认情况下，连接线可以跨越任意数量的节点的，但是您可以通过在连接线的定义中添加额外的破折号，使得该连接线比其他的连接线更长。

在下面的示例中，在节点 B 到节点 E 的连接线中添加了两个额外的破折号，因此与一般的连接线相比，其跨越的节点更多：

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

本网页暂时不支持此特性

注意渲染引擎可能会调节连接线的长度，以适应其他的节点连接线。

当一个文本写在连接线的中间时，必须在连接线的右侧添加多余的破折号。下面的示例与上一个示例类似：

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

本网页暂时不支持此特性

对于点或粗链接，要添加的字符是等号或点，如下表所示：

长度	1 个	2	3
正常	---	----	-----
普通带箭头	-->	--->	---->
厚	===	====	=====
粗箭头	==>	===>	====>
点缀	-.-	-..-	-...-
点缀箭头	-.->	-..->	-...->

具有特殊意义的字符

双引号

可以将文本放在引号中，用于呈现更麻烦的字符。如下例所示：

graph LR
    id1["This is the (text) in the box"]

graph LR
    id1["This is the (text) in the box"]

转义字符

可以使用此处示例的语法对字符进行转义。

graph LR
       A["A double quote:#quot;"] -->B["A dec char:#9829;"]

graph LR
       A["A double quote:#quot;"] -->B["A dec char:#9829;"]

子图

以下是子图的语法定义：

subgraph title
	graph definition
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

你也可以为子图设置一个明确的 id。

graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

flowcharts 声明

若你使用了 flowcharts 声明，则你可以使子图之间进行连接，例如：

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

本网页暂时不支持此特性

事件绑定

可以将 click 事件绑定到节点上，单击可能导致 javascript 回调或页面跳转，该跳转将在新的浏览器选项卡中打开。注意：使用 securityLevel='strict' 时将禁用此功能，使用时将启用此功能 securityLevel='loose'。

click nodeId callback

• nodeId 是节点 id
• callback 是在显示图形的页面上定义的 JavaScript 函数的名称，该函数会将 nodeId 作为参数回调。

以下是使用示例：

JavaScript：

var callback = function(id){
	alert('A callback was triggered');
}

Mermaid：

graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "https://blog.cikaros.top" "This is a tooltip for a link"

graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "https://blog.cikaros.top" "This is a tooltip for a link"

该功能从 0.5.2 版本开始支持

默认情况下，链接在同一浏览器选项卡/窗口中打开。它可以通过添加链接目标的点击定义来改变这种（_self，_blank，_parent 和 _top 支持）：

graph LR;
    A-->B;
    B-->C;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank

给初学者的提示，一个在 html 上下文中使用交互式链接的完整示例：

<body>
  <div class="mermaid">
    graph LR;
        A-->B;
        click A callback "Tooltip"
        click B "http://www.github.com" "This is a link"
  </div>

  <script>
    var callback = function(){
        alert('A callback was triggered');
    }
    var config = {
        startOnLoad:true,
        flowchart:{
            useMaxWidth:true,
            htmlLabels:true,
            curve:'cardinal',
        },
        securityLevel:'loose',
    };

    mermaid.initialize(config);
  </script>
</body>

注释

可以在流程图中输入注释，解析器将忽略它们。注释必须自己一行，并且必须以 %%（双百分号）开头。注释开始到下一个换行符之后的所有文本都将被视为注释，包括任何流语法

graph LR
	A -- text --> B{node}
%% 	A -- text --> B -- text2 --> C

graph LR
	A -- text --> B{node}
%% 	A -- text --> B -- text2 --> C