mermaid图详解（一）流程图｜超详细的代码解释

本文参考Github项目

https://github.com/mermaid-js/mermaid/

前言

那么这里博主先安利一些干货满满的专栏了！

首先是博主的高质量博客的汇总，这个专栏里面的博客，都是博主最最用心写的一部分，干货满满，希望对大家有帮助。

高质量博客汇总

然后就是博主最近最花时间的一个专栏《mermaid图详解》希望大家多多关注！

http://t.csdnimg.cn/pX1jB

Mermaid流程图

1. 节点

1.1 默认的节点

flowchart LR

	id

#mermaid-svg-xHQ4I0SZJC67y6Rz {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .error-icon{fill:#552222;}#mermaid-svg-xHQ4I0SZJC67y6Rz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xHQ4I0SZJC67y6Rz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .marker.cross{stroke:#333333;}#mermaid-svg-xHQ4I0SZJC67y6Rz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xHQ4I0SZJC67y6Rz .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .cluster-label text{fill:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .cluster-label span{color:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .label text,#mermaid-svg-xHQ4I0SZJC67y6Rz span{fill:#333;color:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .node rect,#mermaid-svg-xHQ4I0SZJC67y6Rz .node circle,#mermaid-svg-xHQ4I0SZJC67y6Rz .node ellipse,#mermaid-svg-xHQ4I0SZJC67y6Rz .node polygon,#mermaid-svg-xHQ4I0SZJC67y6Rz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xHQ4I0SZJC67y6Rz .node .label{text-align:center;}#mermaid-svg-xHQ4I0SZJC67y6Rz .node.clickable{cursor:pointer;}#mermaid-svg-xHQ4I0SZJC67y6Rz .arrowheadPath{fill:#333333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xHQ4I0SZJC67y6Rz .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-xHQ4I0SZJC67y6Rz .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-xHQ4I0SZJC67y6Rz .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xHQ4I0SZJC67y6Rz .cluster text{fill:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz .cluster span{color:#333;}#mermaid-svg-xHQ4I0SZJC67y6Rz div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-xHQ4I0SZJC67y6Rz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

也可以在框中设置与id不同的文本。如果多次这样做，则为将使用的节点找到的最后一个文本。此外，如果以后为节点定义边，则可以省略文本定义。渲染长方体时将使用先前定义的长方体。

1.2 节点带文字

flowchart LR

	id1[This is the text ]

	%% id1-->id1

flowchart LR

	id1[This is the text ]

	%% id1-->id1

我们可以设置文字的格式，通过把文字用"``"包括起来就行了，然后就是.md的格式。

%%{init: {"flowchart": {"htmlLabels": false}} }%%

flowchart LR

    markdown["`This **is** _Markdown_`"]

    newLines["`Line1

    Line 2

    Line 3`"]

    markdown --> newLines

#mermaid-svg-ByT89MivLq5bEh3u {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ByT89MivLq5bEh3u .error-icon{fill:#552222;}#mermaid-svg-ByT89MivLq5bEh3u .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ByT89MivLq5bEh3u .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ByT89MivLq5bEh3u .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ByT89MivLq5bEh3u .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ByT89MivLq5bEh3u .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ByT89MivLq5bEh3u .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ByT89MivLq5bEh3u .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ByT89MivLq5bEh3u .marker.cross{stroke:#333333;}#mermaid-svg-ByT89MivLq5bEh3u svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ByT89MivLq5bEh3u .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ByT89MivLq5bEh3u .cluster-label text{fill:#333;}#mermaid-svg-ByT89MivLq5bEh3u .cluster-label span{color:#333;}#mermaid-svg-ByT89MivLq5bEh3u .label text,#mermaid-svg-ByT89MivLq5bEh3u span{fill:#333;color:#333;}#mermaid-svg-ByT89MivLq5bEh3u .node rect,#mermaid-svg-ByT89MivLq5bEh3u .node circle,#mermaid-svg-ByT89MivLq5bEh3u .node ellipse,#mermaid-svg-ByT89MivLq5bEh3u .node polygon,#mermaid-svg-ByT89MivLq5bEh3u .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ByT89MivLq5bEh3u .node .label{text-align:center;}#mermaid-svg-ByT89MivLq5bEh3u .node.clickable{cursor:pointer;}#mermaid-svg-ByT89MivLq5bEh3u .arrowheadPath{fill:#333333;}#mermaid-svg-ByT89MivLq5bEh3u .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ByT89MivLq5bEh3u .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ByT89MivLq5bEh3u .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ByT89MivLq5bEh3u .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ByT89MivLq5bEh3u .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ByT89MivLq5bEh3u .cluster text{fill:#333;}#mermaid-svg-ByT89MivLq5bEh3u .cluster span{color:#333;}#mermaid-svg-ByT89MivLq5bEh3u div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ByT89MivLq5bEh3u :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

`This **is** _Markdown_`

`Line1

Line 2

Line 3`

1.3 节点间指向的方向

TB - Top to bottom
TD - Top-down/ same as top to bottom
BT - Bottom to top
RL - Right to left
LR - Left to right

flowchart LR

    Start --> Stop

#mermaid-svg-BoClEWxd8mfy70yf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-BoClEWxd8mfy70yf .error-icon{fill:#552222;}#mermaid-svg-BoClEWxd8mfy70yf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BoClEWxd8mfy70yf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-BoClEWxd8mfy70yf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BoClEWxd8mfy70yf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BoClEWxd8mfy70yf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BoClEWxd8mfy70yf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BoClEWxd8mfy70yf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BoClEWxd8mfy70yf .marker.cross{stroke:#333333;}#mermaid-svg-BoClEWxd8mfy70yf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BoClEWxd8mfy70yf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-BoClEWxd8mfy70yf .cluster-label text{fill:#333;}#mermaid-svg-BoClEWxd8mfy70yf .cluster-label span{color:#333;}#mermaid-svg-BoClEWxd8mfy70yf .label text,#mermaid-svg-BoClEWxd8mfy70yf span{fill:#333;color:#333;}#mermaid-svg-BoClEWxd8mfy70yf .node rect,#mermaid-svg-BoClEWxd8mfy70yf .node circle,#mermaid-svg-BoClEWxd8mfy70yf .node ellipse,#mermaid-svg-BoClEWxd8mfy70yf .node polygon,#mermaid-svg-BoClEWxd8mfy70yf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-BoClEWxd8mfy70yf .node .label{text-align:center;}#mermaid-svg-BoClEWxd8mfy70yf .node.clickable{cursor:pointer;}#mermaid-svg-BoClEWxd8mfy70yf .arrowheadPath{fill:#333333;}#mermaid-svg-BoClEWxd8mfy70yf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-BoClEWxd8mfy70yf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-BoClEWxd8mfy70yf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-BoClEWxd8mfy70yf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-BoClEWxd8mfy70yf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-BoClEWxd8mfy70yf .cluster text{fill:#333;}#mermaid-svg-BoClEWxd8mfy70yf .cluster span{color:#333;}#mermaid-svg-BoClEWxd8mfy70yf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-BoClEWxd8mfy70yf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

Start

Stop

1.4 节点的形状

1.4.1 圆角

flowchart LR

	id1(hello world)

#mermaid-svg-1PJ0vmd9Ikbahqxl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .error-icon{fill:#552222;}#mermaid-svg-1PJ0vmd9Ikbahqxl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1PJ0vmd9Ikbahqxl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .marker.cross{stroke:#333333;}#mermaid-svg-1PJ0vmd9Ikbahqxl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1PJ0vmd9Ikbahqxl .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .cluster-label text{fill:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .cluster-label span{color:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .label text,#mermaid-svg-1PJ0vmd9Ikbahqxl span{fill:#333;color:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .node rect,#mermaid-svg-1PJ0vmd9Ikbahqxl .node circle,#mermaid-svg-1PJ0vmd9Ikbahqxl .node ellipse,#mermaid-svg-1PJ0vmd9Ikbahqxl .node polygon,#mermaid-svg-1PJ0vmd9Ikbahqxl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-1PJ0vmd9Ikbahqxl .node .label{text-align:center;}#mermaid-svg-1PJ0vmd9Ikbahqxl .node.clickable{cursor:pointer;}#mermaid-svg-1PJ0vmd9Ikbahqxl .arrowheadPath{fill:#333333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-1PJ0vmd9Ikbahqxl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-1PJ0vmd9Ikbahqxl .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-1PJ0vmd9Ikbahqxl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-1PJ0vmd9Ikbahqxl .cluster text{fill:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl .cluster span{color:#333;}#mermaid-svg-1PJ0vmd9Ikbahqxl div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-1PJ0vmd9Ikbahqxl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

hello world

1.4.2 更圆的圆角

flowchart LR

	id1([hello world])

#mermaid-svg-ZjNjBkscnSCNASbg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZjNjBkscnSCNASbg .error-icon{fill:#552222;}#mermaid-svg-ZjNjBkscnSCNASbg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZjNjBkscnSCNASbg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ZjNjBkscnSCNASbg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZjNjBkscnSCNASbg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZjNjBkscnSCNASbg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZjNjBkscnSCNASbg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZjNjBkscnSCNASbg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZjNjBkscnSCNASbg .marker.cross{stroke:#333333;}#mermaid-svg-ZjNjBkscnSCNASbg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZjNjBkscnSCNASbg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ZjNjBkscnSCNASbg .cluster-label text{fill:#333;}#mermaid-svg-ZjNjBkscnSCNASbg .cluster-label span{color:#333;}#mermaid-svg-ZjNjBkscnSCNASbg .label text,#mermaid-svg-ZjNjBkscnSCNASbg span{fill:#333;color:#333;}#mermaid-svg-ZjNjBkscnSCNASbg .node rect,#mermaid-svg-ZjNjBkscnSCNASbg .node circle,#mermaid-svg-ZjNjBkscnSCNASbg .node ellipse,#mermaid-svg-ZjNjBkscnSCNASbg .node polygon,#mermaid-svg-ZjNjBkscnSCNASbg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZjNjBkscnSCNASbg .node .label{text-align:center;}#mermaid-svg-ZjNjBkscnSCNASbg .node.clickable{cursor:pointer;}#mermaid-svg-ZjNjBkscnSCNASbg .arrowheadPath{fill:#333333;}#mermaid-svg-ZjNjBkscnSCNASbg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ZjNjBkscnSCNASbg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ZjNjBkscnSCNASbg .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ZjNjBkscnSCNASbg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ZjNjBkscnSCNASbg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ZjNjBkscnSCNASbg .cluster text{fill:#333;}#mermaid-svg-ZjNjBkscnSCNASbg .cluster span{color:#333;}#mermaid-svg-ZjNjBkscnSCNASbg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ZjNjBkscnSCNASbg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

hello world

1.4.3 子例程形状中的节点

flowchart LR

    id1[[hello linux]]

#mermaid-svg-q7Ug9zW76MNWjMog {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-q7Ug9zW76MNWjMog .error-icon{fill:#552222;}#mermaid-svg-q7Ug9zW76MNWjMog .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-q7Ug9zW76MNWjMog .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-q7Ug9zW76MNWjMog .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-q7Ug9zW76MNWjMog .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-q7Ug9zW76MNWjMog .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-q7Ug9zW76MNWjMog .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-q7Ug9zW76MNWjMog .marker{fill:#333333;stroke:#333333;}#mermaid-svg-q7Ug9zW76MNWjMog .marker.cross{stroke:#333333;}#mermaid-svg-q7Ug9zW76MNWjMog svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-q7Ug9zW76MNWjMog .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-q7Ug9zW76MNWjMog .cluster-label text{fill:#333;}#mermaid-svg-q7Ug9zW76MNWjMog .cluster-label span{color:#333;}#mermaid-svg-q7Ug9zW76MNWjMog .label text,#mermaid-svg-q7Ug9zW76MNWjMog span{fill:#333;color:#333;}#mermaid-svg-q7Ug9zW76MNWjMog .node rect,#mermaid-svg-q7Ug9zW76MNWjMog .node circle,#mermaid-svg-q7Ug9zW76MNWjMog .node ellipse,#mermaid-svg-q7Ug9zW76MNWjMog .node polygon,#mermaid-svg-q7Ug9zW76MNWjMog .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-q7Ug9zW76MNWjMog .node .label{text-align:center;}#mermaid-svg-q7Ug9zW76MNWjMog .node.clickable{cursor:pointer;}#mermaid-svg-q7Ug9zW76MNWjMog .arrowheadPath{fill:#333333;}#mermaid-svg-q7Ug9zW76MNWjMog .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-q7Ug9zW76MNWjMog .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-q7Ug9zW76MNWjMog .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-q7Ug9zW76MNWjMog .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-q7Ug9zW76MNWjMog .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-q7Ug9zW76MNWjMog .cluster text{fill:#333;}#mermaid-svg-q7Ug9zW76MNWjMog .cluster span{color:#333;}#mermaid-svg-q7Ug9zW76MNWjMog div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-q7Ug9zW76MNWjMog :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

hello linux

1.4.4 圆柱体形状

flowchart LR

    id1[(mysql)]

#mermaid-svg-H77Rs9LEUU3MayWL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-H77Rs9LEUU3MayWL .error-icon{fill:#552222;}#mermaid-svg-H77Rs9LEUU3MayWL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-H77Rs9LEUU3MayWL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-H77Rs9LEUU3MayWL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-H77Rs9LEUU3MayWL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-H77Rs9LEUU3MayWL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-H77Rs9LEUU3MayWL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-H77Rs9LEUU3MayWL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-H77Rs9LEUU3MayWL .marker.cross{stroke:#333333;}#mermaid-svg-H77Rs9LEUU3MayWL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-H77Rs9LEUU3MayWL .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-H77Rs9LEUU3MayWL .cluster-label text{fill:#333;}#mermaid-svg-H77Rs9LEUU3MayWL .cluster-label span{color:#333;}#mermaid-svg-H77Rs9LEUU3MayWL .label text,#mermaid-svg-H77Rs9LEUU3MayWL span{fill:#333;color:#333;}#mermaid-svg-H77Rs9LEUU3MayWL .node rect,#mermaid-svg-H77Rs9LEUU3MayWL .node circle,#mermaid-svg-H77Rs9LEUU3MayWL .node ellipse,#mermaid-svg-H77Rs9LEUU3MayWL .node polygon,#mermaid-svg-H77Rs9LEUU3MayWL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-H77Rs9LEUU3MayWL .node .label{text-align:center;}#mermaid-svg-H77Rs9LEUU3MayWL .node.clickable{cursor:pointer;}#mermaid-svg-H77Rs9LEUU3MayWL .arrowheadPath{fill:#333333;}#mermaid-svg-H77Rs9LEUU3MayWL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-H77Rs9LEUU3MayWL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-H77Rs9LEUU3MayWL .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-H77Rs9LEUU3MayWL .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-H77Rs9LEUU3MayWL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-H77Rs9LEUU3MayWL .cluster text{fill:#333;}#mermaid-svg-H77Rs9LEUU3MayWL .cluster span{color:#333;}#mermaid-svg-H77Rs9LEUU3MayWL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-H77Rs9LEUU3MayWL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

mysql

1.4.5 圆形

flowchart LR

    id1((I am in a circle))

#mermaid-svg-8onUflNF5tNoVdBs {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8onUflNF5tNoVdBs .error-icon{fill:#552222;}#mermaid-svg-8onUflNF5tNoVdBs .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8onUflNF5tNoVdBs .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8onUflNF5tNoVdBs .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8onUflNF5tNoVdBs .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8onUflNF5tNoVdBs .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8onUflNF5tNoVdBs .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8onUflNF5tNoVdBs .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8onUflNF5tNoVdBs .marker.cross{stroke:#333333;}#mermaid-svg-8onUflNF5tNoVdBs svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8onUflNF5tNoVdBs .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8onUflNF5tNoVdBs .cluster-label text{fill:#333;}#mermaid-svg-8onUflNF5tNoVdBs .cluster-label span{color:#333;}#mermaid-svg-8onUflNF5tNoVdBs .label text,#mermaid-svg-8onUflNF5tNoVdBs span{fill:#333;color:#333;}#mermaid-svg-8onUflNF5tNoVdBs .node rect,#mermaid-svg-8onUflNF5tNoVdBs .node circle,#mermaid-svg-8onUflNF5tNoVdBs .node ellipse,#mermaid-svg-8onUflNF5tNoVdBs .node polygon,#mermaid-svg-8onUflNF5tNoVdBs .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8onUflNF5tNoVdBs .node .label{text-align:center;}#mermaid-svg-8onUflNF5tNoVdBs .node.clickable{cursor:pointer;}#mermaid-svg-8onUflNF5tNoVdBs .arrowheadPath{fill:#333333;}#mermaid-svg-8onUflNF5tNoVdBs .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8onUflNF5tNoVdBs .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8onUflNF5tNoVdBs .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-8onUflNF5tNoVdBs .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-8onUflNF5tNoVdBs .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8onUflNF5tNoVdBs .cluster text{fill:#333;}#mermaid-svg-8onUflNF5tNoVdBs .cluster span{color:#333;}#mermaid-svg-8onUflNF5tNoVdBs div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8onUflNF5tNoVdBs :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

I am in a circle

1.4.6 不对称形状的节点

flowchart LR

    id1>This is the text in the box]

#mermaid-svg-8QOxvcWrMz0xWAKm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm .error-icon{fill:#552222;}#mermaid-svg-8QOxvcWrMz0xWAKm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8QOxvcWrMz0xWAKm .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8QOxvcWrMz0xWAKm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8QOxvcWrMz0xWAKm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8QOxvcWrMz0xWAKm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8QOxvcWrMz0xWAKm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8QOxvcWrMz0xWAKm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8QOxvcWrMz0xWAKm .marker.cross{stroke:#333333;}#mermaid-svg-8QOxvcWrMz0xWAKm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8QOxvcWrMz0xWAKm .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm .cluster-label text{fill:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm .cluster-label span{color:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm .label text,#mermaid-svg-8QOxvcWrMz0xWAKm span{fill:#333;color:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm .node rect,#mermaid-svg-8QOxvcWrMz0xWAKm .node circle,#mermaid-svg-8QOxvcWrMz0xWAKm .node ellipse,#mermaid-svg-8QOxvcWrMz0xWAKm .node polygon,#mermaid-svg-8QOxvcWrMz0xWAKm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8QOxvcWrMz0xWAKm .node .label{text-align:center;}#mermaid-svg-8QOxvcWrMz0xWAKm .node.clickable{cursor:pointer;}#mermaid-svg-8QOxvcWrMz0xWAKm .arrowheadPath{fill:#333333;}#mermaid-svg-8QOxvcWrMz0xWAKm .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8QOxvcWrMz0xWAKm .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8QOxvcWrMz0xWAKm .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-8QOxvcWrMz0xWAKm .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-8QOxvcWrMz0xWAKm .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8QOxvcWrMz0xWAKm .cluster text{fill:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm .cluster span{color:#333;}#mermaid-svg-8QOxvcWrMz0xWAKm div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8QOxvcWrMz0xWAKm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

This is the text in the box

1.4.7 菱形节点

flowchart LR

    id1{hello docker}

#mermaid-svg-aka2h5bIGo4SpYSi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-aka2h5bIGo4SpYSi .error-icon{fill:#552222;}#mermaid-svg-aka2h5bIGo4SpYSi .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-aka2h5bIGo4SpYSi .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-aka2h5bIGo4SpYSi .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-aka2h5bIGo4SpYSi .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-aka2h5bIGo4SpYSi .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-aka2h5bIGo4SpYSi .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-aka2h5bIGo4SpYSi .marker{fill:#333333;stroke:#333333;}#mermaid-svg-aka2h5bIGo4SpYSi .marker.cross{stroke:#333333;}#mermaid-svg-aka2h5bIGo4SpYSi svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-aka2h5bIGo4SpYSi .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-aka2h5bIGo4SpYSi .cluster-label text{fill:#333;}#mermaid-svg-aka2h5bIGo4SpYSi .cluster-label span{color:#333;}#mermaid-svg-aka2h5bIGo4SpYSi .label text,#mermaid-svg-aka2h5bIGo4SpYSi span{fill:#333;color:#333;}#mermaid-svg-aka2h5bIGo4SpYSi .node rect,#mermaid-svg-aka2h5bIGo4SpYSi .node circle,#mermaid-svg-aka2h5bIGo4SpYSi .node ellipse,#mermaid-svg-aka2h5bIGo4SpYSi .node polygon,#mermaid-svg-aka2h5bIGo4SpYSi .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-aka2h5bIGo4SpYSi .node .label{text-align:center;}#mermaid-svg-aka2h5bIGo4SpYSi .node.clickable{cursor:pointer;}#mermaid-svg-aka2h5bIGo4SpYSi .arrowheadPath{fill:#333333;}#mermaid-svg-aka2h5bIGo4SpYSi .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-aka2h5bIGo4SpYSi .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-aka2h5bIGo4SpYSi .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-aka2h5bIGo4SpYSi .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-aka2h5bIGo4SpYSi .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-aka2h5bIGo4SpYSi .cluster text{fill:#333;}#mermaid-svg-aka2h5bIGo4SpYSi .cluster span{color:#333;}#mermaid-svg-aka2h5bIGo4SpYSi div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-aka2h5bIGo4SpYSi :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

hello docker

1.4.8 六边形节点

#mermaid-svg-E1P72bKRW5Ar0NTS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS .error-icon{fill:#552222;}#mermaid-svg-E1P72bKRW5Ar0NTS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-E1P72bKRW5Ar0NTS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-E1P72bKRW5Ar0NTS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-E1P72bKRW5Ar0NTS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-E1P72bKRW5Ar0NTS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-E1P72bKRW5Ar0NTS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-E1P72bKRW5Ar0NTS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-E1P72bKRW5Ar0NTS .marker.cross{stroke:#333333;}#mermaid-svg-E1P72bKRW5Ar0NTS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-E1P72bKRW5Ar0NTS .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS .cluster-label text{fill:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS .cluster-label span{color:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS .label text,#mermaid-svg-E1P72bKRW5Ar0NTS span{fill:#333;color:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS .node rect,#mermaid-svg-E1P72bKRW5Ar0NTS .node circle,#mermaid-svg-E1P72bKRW5Ar0NTS .node ellipse,#mermaid-svg-E1P72bKRW5Ar0NTS .node polygon,#mermaid-svg-E1P72bKRW5Ar0NTS .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-E1P72bKRW5Ar0NTS .node .label{text-align:center;}#mermaid-svg-E1P72bKRW5Ar0NTS .node.clickable{cursor:pointer;}#mermaid-svg-E1P72bKRW5Ar0NTS .arrowheadPath{fill:#333333;}#mermaid-svg-E1P72bKRW5Ar0NTS .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-E1P72bKRW5Ar0NTS .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-E1P72bKRW5Ar0NTS .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-E1P72bKRW5Ar0NTS .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-E1P72bKRW5Ar0NTS .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-E1P72bKRW5Ar0NTS .cluster text{fill:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS .cluster span{color:#333;}#mermaid-svg-E1P72bKRW5Ar0NTS div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-E1P72bKRW5Ar0NTS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

This is the text in the box

1.4.9 平行四边形节点

flowchart TD

    id1[/This is the text in the box/]

    id2[\This is the text in the box\]

#mermaid-svg-d0ZfMKdoNB2MhtHD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .error-icon{fill:#552222;}#mermaid-svg-d0ZfMKdoNB2MhtHD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-d0ZfMKdoNB2MhtHD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .marker.cross{stroke:#333333;}#mermaid-svg-d0ZfMKdoNB2MhtHD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-d0ZfMKdoNB2MhtHD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .cluster-label text{fill:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .cluster-label span{color:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .label text,#mermaid-svg-d0ZfMKdoNB2MhtHD span{fill:#333;color:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .node rect,#mermaid-svg-d0ZfMKdoNB2MhtHD .node circle,#mermaid-svg-d0ZfMKdoNB2MhtHD .node ellipse,#mermaid-svg-d0ZfMKdoNB2MhtHD .node polygon,#mermaid-svg-d0ZfMKdoNB2MhtHD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-d0ZfMKdoNB2MhtHD .node .label{text-align:center;}#mermaid-svg-d0ZfMKdoNB2MhtHD .node.clickable{cursor:pointer;}#mermaid-svg-d0ZfMKdoNB2MhtHD .arrowheadPath{fill:#333333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-d0ZfMKdoNB2MhtHD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-d0ZfMKdoNB2MhtHD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-d0ZfMKdoNB2MhtHD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-d0ZfMKdoNB2MhtHD .cluster text{fill:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD .cluster span{color:#333;}#mermaid-svg-d0ZfMKdoNB2MhtHD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-d0ZfMKdoNB2MhtHD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

This is the text in the box

1.4.10 梯形节点

flowchart TD

    A[/Christmas\]

    B[\Go shopping/]

#mermaid-svg-z63wbE3A18JP1iRB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-z63wbE3A18JP1iRB .error-icon{fill:#552222;}#mermaid-svg-z63wbE3A18JP1iRB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-z63wbE3A18JP1iRB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-z63wbE3A18JP1iRB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-z63wbE3A18JP1iRB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-z63wbE3A18JP1iRB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-z63wbE3A18JP1iRB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-z63wbE3A18JP1iRB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-z63wbE3A18JP1iRB .marker.cross{stroke:#333333;}#mermaid-svg-z63wbE3A18JP1iRB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-z63wbE3A18JP1iRB .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-z63wbE3A18JP1iRB .cluster-label text{fill:#333;}#mermaid-svg-z63wbE3A18JP1iRB .cluster-label span{color:#333;}#mermaid-svg-z63wbE3A18JP1iRB .label text,#mermaid-svg-z63wbE3A18JP1iRB span{fill:#333;color:#333;}#mermaid-svg-z63wbE3A18JP1iRB .node rect,#mermaid-svg-z63wbE3A18JP1iRB .node circle,#mermaid-svg-z63wbE3A18JP1iRB .node ellipse,#mermaid-svg-z63wbE3A18JP1iRB .node polygon,#mermaid-svg-z63wbE3A18JP1iRB .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-z63wbE3A18JP1iRB .node .label{text-align:center;}#mermaid-svg-z63wbE3A18JP1iRB .node.clickable{cursor:pointer;}#mermaid-svg-z63wbE3A18JP1iRB .arrowheadPath{fill:#333333;}#mermaid-svg-z63wbE3A18JP1iRB .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-z63wbE3A18JP1iRB .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-z63wbE3A18JP1iRB .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-z63wbE3A18JP1iRB .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-z63wbE3A18JP1iRB .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-z63wbE3A18JP1iRB .cluster text{fill:#333;}#mermaid-svg-z63wbE3A18JP1iRB .cluster span{color:#333;}#mermaid-svg-z63wbE3A18JP1iRB div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-z63wbE3A18JP1iRB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

Trapezoid node

Go shopping

1.4.11 双重圆形

flowchart TD

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

flowchart TD

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

2. 节点之间的连接

2.1 带箭头和不带箭头的连接

flowchart LR

    A-->B

    B---C

#mermaid-svg-5hajaAnLUeOsjQ19 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 .error-icon{fill:#552222;}#mermaid-svg-5hajaAnLUeOsjQ19 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5hajaAnLUeOsjQ19 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5hajaAnLUeOsjQ19 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5hajaAnLUeOsjQ19 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5hajaAnLUeOsjQ19 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5hajaAnLUeOsjQ19 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5hajaAnLUeOsjQ19 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5hajaAnLUeOsjQ19 .marker.cross{stroke:#333333;}#mermaid-svg-5hajaAnLUeOsjQ19 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5hajaAnLUeOsjQ19 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 .cluster-label text{fill:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 .cluster-label span{color:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 .label text,#mermaid-svg-5hajaAnLUeOsjQ19 span{fill:#333;color:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 .node rect,#mermaid-svg-5hajaAnLUeOsjQ19 .node circle,#mermaid-svg-5hajaAnLUeOsjQ19 .node ellipse,#mermaid-svg-5hajaAnLUeOsjQ19 .node polygon,#mermaid-svg-5hajaAnLUeOsjQ19 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5hajaAnLUeOsjQ19 .node .label{text-align:center;}#mermaid-svg-5hajaAnLUeOsjQ19 .node.clickable{cursor:pointer;}#mermaid-svg-5hajaAnLUeOsjQ19 .arrowheadPath{fill:#333333;}#mermaid-svg-5hajaAnLUeOsjQ19 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5hajaAnLUeOsjQ19 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5hajaAnLUeOsjQ19 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5hajaAnLUeOsjQ19 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5hajaAnLUeOsjQ19 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5hajaAnLUeOsjQ19 .cluster text{fill:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 .cluster span{color:#333;}#mermaid-svg-5hajaAnLUeOsjQ19 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5hajaAnLUeOsjQ19 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

2.2 连接上的文字

带箭头不带箭头是一样的。

flowchart LR

    A---|连接上的文字|B

    %% ||包裹可以要也可以不要

    A-->|text|B

#mermaid-svg-MZEjgSIZC93FMPNM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MZEjgSIZC93FMPNM .error-icon{fill:#552222;}#mermaid-svg-MZEjgSIZC93FMPNM .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MZEjgSIZC93FMPNM .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-MZEjgSIZC93FMPNM .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MZEjgSIZC93FMPNM .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MZEjgSIZC93FMPNM .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MZEjgSIZC93FMPNM .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MZEjgSIZC93FMPNM .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MZEjgSIZC93FMPNM .marker.cross{stroke:#333333;}#mermaid-svg-MZEjgSIZC93FMPNM svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MZEjgSIZC93FMPNM .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-MZEjgSIZC93FMPNM .cluster-label text{fill:#333;}#mermaid-svg-MZEjgSIZC93FMPNM .cluster-label span{color:#333;}#mermaid-svg-MZEjgSIZC93FMPNM .label text,#mermaid-svg-MZEjgSIZC93FMPNM span{fill:#333;color:#333;}#mermaid-svg-MZEjgSIZC93FMPNM .node rect,#mermaid-svg-MZEjgSIZC93FMPNM .node circle,#mermaid-svg-MZEjgSIZC93FMPNM .node ellipse,#mermaid-svg-MZEjgSIZC93FMPNM .node polygon,#mermaid-svg-MZEjgSIZC93FMPNM .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-MZEjgSIZC93FMPNM .node .label{text-align:center;}#mermaid-svg-MZEjgSIZC93FMPNM .node.clickable{cursor:pointer;}#mermaid-svg-MZEjgSIZC93FMPNM .arrowheadPath{fill:#333333;}#mermaid-svg-MZEjgSIZC93FMPNM .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-MZEjgSIZC93FMPNM .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-MZEjgSIZC93FMPNM .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-MZEjgSIZC93FMPNM .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-MZEjgSIZC93FMPNM .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-MZEjgSIZC93FMPNM .cluster text{fill:#333;}#mermaid-svg-MZEjgSIZC93FMPNM .cluster span{color:#333;}#mermaid-svg-MZEjgSIZC93FMPNM div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-MZEjgSIZC93FMPNM :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

连接上的文字

text

3.3 虚线连接

flowchart LR

   A-.->B;

   A-.->|yes|B;

#mermaid-svg-KH5jjAD2v79aPgYL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KH5jjAD2v79aPgYL .error-icon{fill:#552222;}#mermaid-svg-KH5jjAD2v79aPgYL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KH5jjAD2v79aPgYL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-KH5jjAD2v79aPgYL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KH5jjAD2v79aPgYL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KH5jjAD2v79aPgYL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KH5jjAD2v79aPgYL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KH5jjAD2v79aPgYL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KH5jjAD2v79aPgYL .marker.cross{stroke:#333333;}#mermaid-svg-KH5jjAD2v79aPgYL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KH5jjAD2v79aPgYL .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-KH5jjAD2v79aPgYL .cluster-label text{fill:#333;}#mermaid-svg-KH5jjAD2v79aPgYL .cluster-label span{color:#333;}#mermaid-svg-KH5jjAD2v79aPgYL .label text,#mermaid-svg-KH5jjAD2v79aPgYL span{fill:#333;color:#333;}#mermaid-svg-KH5jjAD2v79aPgYL .node rect,#mermaid-svg-KH5jjAD2v79aPgYL .node circle,#mermaid-svg-KH5jjAD2v79aPgYL .node ellipse,#mermaid-svg-KH5jjAD2v79aPgYL .node polygon,#mermaid-svg-KH5jjAD2v79aPgYL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-KH5jjAD2v79aPgYL .node .label{text-align:center;}#mermaid-svg-KH5jjAD2v79aPgYL .node.clickable{cursor:pointer;}#mermaid-svg-KH5jjAD2v79aPgYL .arrowheadPath{fill:#333333;}#mermaid-svg-KH5jjAD2v79aPgYL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-KH5jjAD2v79aPgYL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-KH5jjAD2v79aPgYL .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-KH5jjAD2v79aPgYL .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-KH5jjAD2v79aPgYL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-KH5jjAD2v79aPgYL .cluster text{fill:#333;}#mermaid-svg-KH5jjAD2v79aPgYL .cluster span{color:#333;}#mermaid-svg-KH5jjAD2v79aPgYL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-KH5jjAD2v79aPgYL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

yes

2.4 粗线连接

flowchart LR

   A ==> B

#mermaid-svg-9oDOB0OijsaniMm3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9oDOB0OijsaniMm3 .error-icon{fill:#552222;}#mermaid-svg-9oDOB0OijsaniMm3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9oDOB0OijsaniMm3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9oDOB0OijsaniMm3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9oDOB0OijsaniMm3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9oDOB0OijsaniMm3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9oDOB0OijsaniMm3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9oDOB0OijsaniMm3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9oDOB0OijsaniMm3 .marker.cross{stroke:#333333;}#mermaid-svg-9oDOB0OijsaniMm3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9oDOB0OijsaniMm3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9oDOB0OijsaniMm3 .cluster-label text{fill:#333;}#mermaid-svg-9oDOB0OijsaniMm3 .cluster-label span{color:#333;}#mermaid-svg-9oDOB0OijsaniMm3 .label text,#mermaid-svg-9oDOB0OijsaniMm3 span{fill:#333;color:#333;}#mermaid-svg-9oDOB0OijsaniMm3 .node rect,#mermaid-svg-9oDOB0OijsaniMm3 .node circle,#mermaid-svg-9oDOB0OijsaniMm3 .node ellipse,#mermaid-svg-9oDOB0OijsaniMm3 .node polygon,#mermaid-svg-9oDOB0OijsaniMm3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9oDOB0OijsaniMm3 .node .label{text-align:center;}#mermaid-svg-9oDOB0OijsaniMm3 .node.clickable{cursor:pointer;}#mermaid-svg-9oDOB0OijsaniMm3 .arrowheadPath{fill:#333333;}#mermaid-svg-9oDOB0OijsaniMm3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9oDOB0OijsaniMm3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9oDOB0OijsaniMm3 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9oDOB0OijsaniMm3 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9oDOB0OijsaniMm3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9oDOB0OijsaniMm3 .cluster text{fill:#333;}#mermaid-svg-9oDOB0OijsaniMm3 .cluster span{color:#333;}#mermaid-svg-9oDOB0OijsaniMm3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9oDOB0OijsaniMm3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

yes

2.5 隐形连接

在某些情况下，如果要更改节点的默认位置，这可能是一个有用的工具。

flowchart LR

    A ~~~ B

flowchart LR

    A ~~~ B

2.6 连接链

flowchart LR

   a --> b & c--> d

   A & B--> C & D

#mermaid-svg-9jDaceC5ASSYClwY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9jDaceC5ASSYClwY .error-icon{fill:#552222;}#mermaid-svg-9jDaceC5ASSYClwY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9jDaceC5ASSYClwY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9jDaceC5ASSYClwY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9jDaceC5ASSYClwY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9jDaceC5ASSYClwY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9jDaceC5ASSYClwY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9jDaceC5ASSYClwY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9jDaceC5ASSYClwY .marker.cross{stroke:#333333;}#mermaid-svg-9jDaceC5ASSYClwY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9jDaceC5ASSYClwY .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9jDaceC5ASSYClwY .cluster-label text{fill:#333;}#mermaid-svg-9jDaceC5ASSYClwY .cluster-label span{color:#333;}#mermaid-svg-9jDaceC5ASSYClwY .label text,#mermaid-svg-9jDaceC5ASSYClwY span{fill:#333;color:#333;}#mermaid-svg-9jDaceC5ASSYClwY .node rect,#mermaid-svg-9jDaceC5ASSYClwY .node circle,#mermaid-svg-9jDaceC5ASSYClwY .node ellipse,#mermaid-svg-9jDaceC5ASSYClwY .node polygon,#mermaid-svg-9jDaceC5ASSYClwY .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9jDaceC5ASSYClwY .node .label{text-align:center;}#mermaid-svg-9jDaceC5ASSYClwY .node.clickable{cursor:pointer;}#mermaid-svg-9jDaceC5ASSYClwY .arrowheadPath{fill:#333333;}#mermaid-svg-9jDaceC5ASSYClwY .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9jDaceC5ASSYClwY .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9jDaceC5ASSYClwY .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9jDaceC5ASSYClwY .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9jDaceC5ASSYClwY .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9jDaceC5ASSYClwY .cluster text{fill:#333;}#mermaid-svg-9jDaceC5ASSYClwY .cluster span{color:#333;}#mermaid-svg-9jDaceC5ASSYClwY div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9jDaceC5ASSYClwY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

2.7 其它的一些箭头形式

flowchart LR

    A --o B

    B --x C

#mermaid-svg-YH118x1VHIlmy0KN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YH118x1VHIlmy0KN .error-icon{fill:#552222;}#mermaid-svg-YH118x1VHIlmy0KN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-YH118x1VHIlmy0KN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-YH118x1VHIlmy0KN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-YH118x1VHIlmy0KN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-YH118x1VHIlmy0KN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-YH118x1VHIlmy0KN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-YH118x1VHIlmy0KN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-YH118x1VHIlmy0KN .marker.cross{stroke:#333333;}#mermaid-svg-YH118x1VHIlmy0KN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-YH118x1VHIlmy0KN .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-YH118x1VHIlmy0KN .cluster-label text{fill:#333;}#mermaid-svg-YH118x1VHIlmy0KN .cluster-label span{color:#333;}#mermaid-svg-YH118x1VHIlmy0KN .label text,#mermaid-svg-YH118x1VHIlmy0KN span{fill:#333;color:#333;}#mermaid-svg-YH118x1VHIlmy0KN .node rect,#mermaid-svg-YH118x1VHIlmy0KN .node circle,#mermaid-svg-YH118x1VHIlmy0KN .node ellipse,#mermaid-svg-YH118x1VHIlmy0KN .node polygon,#mermaid-svg-YH118x1VHIlmy0KN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-YH118x1VHIlmy0KN .node .label{text-align:center;}#mermaid-svg-YH118x1VHIlmy0KN .node.clickable{cursor:pointer;}#mermaid-svg-YH118x1VHIlmy0KN .arrowheadPath{fill:#333333;}#mermaid-svg-YH118x1VHIlmy0KN .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-YH118x1VHIlmy0KN .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-YH118x1VHIlmy0KN .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-YH118x1VHIlmy0KN .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-YH118x1VHIlmy0KN .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-YH118x1VHIlmy0KN .cluster text{fill:#333;}#mermaid-svg-YH118x1VHIlmy0KN .cluster span{color:#333;}#mermaid-svg-YH118x1VHIlmy0KN div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-YH118x1VHIlmy0KN :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

flowchart LR

    A o--o B

    B <--> C

    C x--x D

#mermaid-svg-pqrTAMUnJSvVwVa5 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .error-icon{fill:#552222;}#mermaid-svg-pqrTAMUnJSvVwVa5 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pqrTAMUnJSvVwVa5 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .marker.cross{stroke:#333333;}#mermaid-svg-pqrTAMUnJSvVwVa5 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pqrTAMUnJSvVwVa5 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .cluster-label text{fill:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .cluster-label span{color:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .label text,#mermaid-svg-pqrTAMUnJSvVwVa5 span{fill:#333;color:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .node rect,#mermaid-svg-pqrTAMUnJSvVwVa5 .node circle,#mermaid-svg-pqrTAMUnJSvVwVa5 .node ellipse,#mermaid-svg-pqrTAMUnJSvVwVa5 .node polygon,#mermaid-svg-pqrTAMUnJSvVwVa5 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pqrTAMUnJSvVwVa5 .node .label{text-align:center;}#mermaid-svg-pqrTAMUnJSvVwVa5 .node.clickable{cursor:pointer;}#mermaid-svg-pqrTAMUnJSvVwVa5 .arrowheadPath{fill:#333333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-pqrTAMUnJSvVwVa5 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-pqrTAMUnJSvVwVa5 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-pqrTAMUnJSvVwVa5 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-pqrTAMUnJSvVwVa5 .cluster text{fill:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 .cluster span{color:#333;}#mermaid-svg-pqrTAMUnJSvVwVa5 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-pqrTAMUnJSvVwVa5 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

2.8 链接的长度

流程图中的每个节点最终都会根据其链接到的节点分配给渲染图中的一个级别，即垂直或水平级别（取决于流程图的方向）。默认情况下，链接可以跨越任意数量的列，但您可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接更长。

在以下示例中，在从节点B到节点E的链接中添加了两个额外的破折号，因此它比常规链接多跨两个列。

flowchart TD

    A[Start] --> B{Is it?}

    B -->|Yes| C[OK]

    C --> D[Rethink]

    D --> B

    B ---->|No| E[End]

#mermaid-svg-8zouUnWk4S5oOH6O {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8zouUnWk4S5oOH6O .error-icon{fill:#552222;}#mermaid-svg-8zouUnWk4S5oOH6O .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8zouUnWk4S5oOH6O .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8zouUnWk4S5oOH6O .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8zouUnWk4S5oOH6O .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8zouUnWk4S5oOH6O .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8zouUnWk4S5oOH6O .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8zouUnWk4S5oOH6O .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8zouUnWk4S5oOH6O .marker.cross{stroke:#333333;}#mermaid-svg-8zouUnWk4S5oOH6O svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8zouUnWk4S5oOH6O .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8zouUnWk4S5oOH6O .cluster-label text{fill:#333;}#mermaid-svg-8zouUnWk4S5oOH6O .cluster-label span{color:#333;}#mermaid-svg-8zouUnWk4S5oOH6O .label text,#mermaid-svg-8zouUnWk4S5oOH6O span{fill:#333;color:#333;}#mermaid-svg-8zouUnWk4S5oOH6O .node rect,#mermaid-svg-8zouUnWk4S5oOH6O .node circle,#mermaid-svg-8zouUnWk4S5oOH6O .node ellipse,#mermaid-svg-8zouUnWk4S5oOH6O .node polygon,#mermaid-svg-8zouUnWk4S5oOH6O .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8zouUnWk4S5oOH6O .node .label{text-align:center;}#mermaid-svg-8zouUnWk4S5oOH6O .node.clickable{cursor:pointer;}#mermaid-svg-8zouUnWk4S5oOH6O .arrowheadPath{fill:#333333;}#mermaid-svg-8zouUnWk4S5oOH6O .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8zouUnWk4S5oOH6O .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8zouUnWk4S5oOH6O .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-8zouUnWk4S5oOH6O .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-8zouUnWk4S5oOH6O .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8zouUnWk4S5oOH6O .cluster text{fill:#333;}#mermaid-svg-8zouUnWk4S5oOH6O .cluster span{color:#333;}#mermaid-svg-8zouUnWk4S5oOH6O div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8zouUnWk4S5oOH6O :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

Yes

Start

Is it?

Rethink

End

3. 子图

flowchart TB

    c1-->a2

    subgraph one

    a1-->a2

    end

    subgraph two

    b1-->b2

    end

    subgraph three

    c1-->c2

    end

#mermaid-svg-6PwEJmp7Hs0KHvo2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .error-icon{fill:#552222;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .marker.cross{stroke:#333333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .cluster-label text{fill:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .cluster-label span{color:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .label text,#mermaid-svg-6PwEJmp7Hs0KHvo2 span{fill:#333;color:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .node rect,#mermaid-svg-6PwEJmp7Hs0KHvo2 .node circle,#mermaid-svg-6PwEJmp7Hs0KHvo2 .node ellipse,#mermaid-svg-6PwEJmp7Hs0KHvo2 .node polygon,#mermaid-svg-6PwEJmp7Hs0KHvo2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .node .label{text-align:center;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .node.clickable{cursor:pointer;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .arrowheadPath{fill:#333333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .cluster text{fill:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 .cluster span{color:#333;}#mermaid-svg-6PwEJmp7Hs0KHvo2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-6PwEJmp7Hs0KHvo2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

three

one

two

当然也还可以为子图设置显式 id。

flowchart TB

    c1-->a2

    subgraph ide1 [one]

    a1-->a2

    end

#mermaid-svg-710OL8fd4ClrmAZd {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-710OL8fd4ClrmAZd .error-icon{fill:#552222;}#mermaid-svg-710OL8fd4ClrmAZd .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-710OL8fd4ClrmAZd .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-710OL8fd4ClrmAZd .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-710OL8fd4ClrmAZd .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-710OL8fd4ClrmAZd .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-710OL8fd4ClrmAZd .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-710OL8fd4ClrmAZd .marker{fill:#333333;stroke:#333333;}#mermaid-svg-710OL8fd4ClrmAZd .marker.cross{stroke:#333333;}#mermaid-svg-710OL8fd4ClrmAZd svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-710OL8fd4ClrmAZd .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-710OL8fd4ClrmAZd .cluster-label text{fill:#333;}#mermaid-svg-710OL8fd4ClrmAZd .cluster-label span{color:#333;}#mermaid-svg-710OL8fd4ClrmAZd .label text,#mermaid-svg-710OL8fd4ClrmAZd span{fill:#333;color:#333;}#mermaid-svg-710OL8fd4ClrmAZd .node rect,#mermaid-svg-710OL8fd4ClrmAZd .node circle,#mermaid-svg-710OL8fd4ClrmAZd .node ellipse,#mermaid-svg-710OL8fd4ClrmAZd .node polygon,#mermaid-svg-710OL8fd4ClrmAZd .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-710OL8fd4ClrmAZd .node .label{text-align:center;}#mermaid-svg-710OL8fd4ClrmAZd .node.clickable{cursor:pointer;}#mermaid-svg-710OL8fd4ClrmAZd .arrowheadPath{fill:#333333;}#mermaid-svg-710OL8fd4ClrmAZd .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-710OL8fd4ClrmAZd .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-710OL8fd4ClrmAZd .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-710OL8fd4ClrmAZd .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-710OL8fd4ClrmAZd .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-710OL8fd4ClrmAZd .cluster text{fill:#333;}#mermaid-svg-710OL8fd4ClrmAZd .cluster span{color:#333;}#mermaid-svg-710OL8fd4ClrmAZd div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-710OL8fd4ClrmAZd :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

one

子图和子图之间也可以有关系的。

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

#mermaid-svg-ObaKT7RxqEu0tD9E {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E .error-icon{fill:#552222;}#mermaid-svg-ObaKT7RxqEu0tD9E .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ObaKT7RxqEu0tD9E .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ObaKT7RxqEu0tD9E .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ObaKT7RxqEu0tD9E .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ObaKT7RxqEu0tD9E .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ObaKT7RxqEu0tD9E .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ObaKT7RxqEu0tD9E .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ObaKT7RxqEu0tD9E .marker.cross{stroke:#333333;}#mermaid-svg-ObaKT7RxqEu0tD9E svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ObaKT7RxqEu0tD9E .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E .cluster-label text{fill:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E .cluster-label span{color:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E .label text,#mermaid-svg-ObaKT7RxqEu0tD9E span{fill:#333;color:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E .node rect,#mermaid-svg-ObaKT7RxqEu0tD9E .node circle,#mermaid-svg-ObaKT7RxqEu0tD9E .node ellipse,#mermaid-svg-ObaKT7RxqEu0tD9E .node polygon,#mermaid-svg-ObaKT7RxqEu0tD9E .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ObaKT7RxqEu0tD9E .node .label{text-align:center;}#mermaid-svg-ObaKT7RxqEu0tD9E .node.clickable{cursor:pointer;}#mermaid-svg-ObaKT7RxqEu0tD9E .arrowheadPath{fill:#333333;}#mermaid-svg-ObaKT7RxqEu0tD9E .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ObaKT7RxqEu0tD9E .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ObaKT7RxqEu0tD9E .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ObaKT7RxqEu0tD9E .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ObaKT7RxqEu0tD9E .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ObaKT7RxqEu0tD9E .cluster text{fill:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E .cluster span{color:#333;}#mermaid-svg-ObaKT7RxqEu0tD9E div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ObaKT7RxqEu0tD9E :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

three

one

two

使用 graphtype 流程图，您可以使用方向语句来设置子图渲染的方向，如本例所示。

flowchart LR

  subgraph TOP

    direction TB

    subgraph B1

        direction RL

        i1 -->f1

    end

    subgraph B2

        direction BT

        i2 -->f2

    end

  end

  A --> TOP --> B

  B1 --> B2

#mermaid-svg-R98SpHPAWMjnx045 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-R98SpHPAWMjnx045 .error-icon{fill:#552222;}#mermaid-svg-R98SpHPAWMjnx045 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-R98SpHPAWMjnx045 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-R98SpHPAWMjnx045 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-R98SpHPAWMjnx045 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-R98SpHPAWMjnx045 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-R98SpHPAWMjnx045 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-R98SpHPAWMjnx045 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-R98SpHPAWMjnx045 .marker.cross{stroke:#333333;}#mermaid-svg-R98SpHPAWMjnx045 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-R98SpHPAWMjnx045 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-R98SpHPAWMjnx045 .cluster-label text{fill:#333;}#mermaid-svg-R98SpHPAWMjnx045 .cluster-label span{color:#333;}#mermaid-svg-R98SpHPAWMjnx045 .label text,#mermaid-svg-R98SpHPAWMjnx045 span{fill:#333;color:#333;}#mermaid-svg-R98SpHPAWMjnx045 .node rect,#mermaid-svg-R98SpHPAWMjnx045 .node circle,#mermaid-svg-R98SpHPAWMjnx045 .node ellipse,#mermaid-svg-R98SpHPAWMjnx045 .node polygon,#mermaid-svg-R98SpHPAWMjnx045 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-R98SpHPAWMjnx045 .node .label{text-align:center;}#mermaid-svg-R98SpHPAWMjnx045 .node.clickable{cursor:pointer;}#mermaid-svg-R98SpHPAWMjnx045 .arrowheadPath{fill:#333333;}#mermaid-svg-R98SpHPAWMjnx045 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-R98SpHPAWMjnx045 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-R98SpHPAWMjnx045 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-R98SpHPAWMjnx045 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-R98SpHPAWMjnx045 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-R98SpHPAWMjnx045 .cluster text{fill:#333;}#mermaid-svg-R98SpHPAWMjnx045 .cluster span{color:#333;}#mermaid-svg-R98SpHPAWMjnx045 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-R98SpHPAWMjnx045 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

TOP

如果任何子图的节点链接到外部，则子图方向将被忽略。相反，子图将继承父图的方向。

flowchart LR

    subgraph subgraph1

        direction TB

        top1[top] --> bottom1[bottom]

    end

    subgraph subgraph2

        direction TB

        top2[top] --> bottom2[bottom]

    end

    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is mantained

    outside --> subgraph1

    %% Link *within* subgraph2:

    %% subgraph2 inherits the direction of the top-level graph (LR)

    outside ---> top2

#mermaid-svg-Z4oc73LSuA2VLDTs {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs .error-icon{fill:#552222;}#mermaid-svg-Z4oc73LSuA2VLDTs .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Z4oc73LSuA2VLDTs .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Z4oc73LSuA2VLDTs .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Z4oc73LSuA2VLDTs .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Z4oc73LSuA2VLDTs .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Z4oc73LSuA2VLDTs .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Z4oc73LSuA2VLDTs .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Z4oc73LSuA2VLDTs .marker.cross{stroke:#333333;}#mermaid-svg-Z4oc73LSuA2VLDTs svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Z4oc73LSuA2VLDTs .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs .cluster-label text{fill:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs .cluster-label span{color:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs .label text,#mermaid-svg-Z4oc73LSuA2VLDTs span{fill:#333;color:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs .node rect,#mermaid-svg-Z4oc73LSuA2VLDTs .node circle,#mermaid-svg-Z4oc73LSuA2VLDTs .node ellipse,#mermaid-svg-Z4oc73LSuA2VLDTs .node polygon,#mermaid-svg-Z4oc73LSuA2VLDTs .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Z4oc73LSuA2VLDTs .node .label{text-align:center;}#mermaid-svg-Z4oc73LSuA2VLDTs .node.clickable{cursor:pointer;}#mermaid-svg-Z4oc73LSuA2VLDTs .arrowheadPath{fill:#333333;}#mermaid-svg-Z4oc73LSuA2VLDTs .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Z4oc73LSuA2VLDTs .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Z4oc73LSuA2VLDTs .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Z4oc73LSuA2VLDTs .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Z4oc73LSuA2VLDTs .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Z4oc73LSuA2VLDTs .cluster text{fill:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs .cluster span{color:#333;}#mermaid-svg-Z4oc73LSuA2VLDTs div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Z4oc73LSuA2VLDTs :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

subgraph2

bottom

top

subgraph1

bottom

top

outside