方向：

graph或graph TB或graph TD：从上往下
graph BT：从下往上
graph LR：从左往右
graph RL：从右往左

结点：

无名字的结点：直接写内容，此时结点边框为方形；节点内容不支持空格
有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格

形状

    默认方形id1[方形]id2(圆边矩形)id3([体育场形])id4[[子程序形]]id5[(圆柱形)]id6((圆形))id1{菱形}id2{{六角形}}id3[/平行四边形/]id4[\反向平行四边形\]id5[/梯形\]id6[\反向梯形/]
#mermaid-svg-5b1CFjFDkW9DbrL2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .error-icon{fill:#552222;}#mermaid-svg-5b1CFjFDkW9DbrL2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5b1CFjFDkW9DbrL2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .marker.cross{stroke:#333333;}#mermaid-svg-5b1CFjFDkW9DbrL2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5b1CFjFDkW9DbrL2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .cluster-label text{fill:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .cluster-label span{color:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .label text,#mermaid-svg-5b1CFjFDkW9DbrL2 span{fill:#333;color:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .node rect,#mermaid-svg-5b1CFjFDkW9DbrL2 .node circle,#mermaid-svg-5b1CFjFDkW9DbrL2 .node ellipse,#mermaid-svg-5b1CFjFDkW9DbrL2 .node polygon,#mermaid-svg-5b1CFjFDkW9DbrL2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5b1CFjFDkW9DbrL2 .node .label{text-align:center;}#mermaid-svg-5b1CFjFDkW9DbrL2 .node.clickable{cursor:pointer;}#mermaid-svg-5b1CFjFDkW9DbrL2 .arrowheadPath{fill:#333333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5b1CFjFDkW9DbrL2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5b1CFjFDkW9DbrL2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5b1CFjFDkW9DbrL2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5b1CFjFDkW9DbrL2 .cluster text{fill:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 .cluster span{color:#333;}#mermaid-svg-5b1CFjFDkW9DbrL2 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-5b1CFjFDkW9DbrL2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

默认方形
方形
圆边矩形
体育场形
子程序形
圆柱形
圆形
#mermaid-svg-k0w3AHDLRTCOpbZQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .error-icon{fill:#552222;}#mermaid-svg-k0w3AHDLRTCOpbZQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-k0w3AHDLRTCOpbZQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .marker.cross{stroke:#333333;}#mermaid-svg-k0w3AHDLRTCOpbZQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-k0w3AHDLRTCOpbZQ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .cluster-label text{fill:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .cluster-label span{color:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .label text,#mermaid-svg-k0w3AHDLRTCOpbZQ span{fill:#333;color:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .node rect,#mermaid-svg-k0w3AHDLRTCOpbZQ .node circle,#mermaid-svg-k0w3AHDLRTCOpbZQ .node ellipse,#mermaid-svg-k0w3AHDLRTCOpbZQ .node polygon,#mermaid-svg-k0w3AHDLRTCOpbZQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-k0w3AHDLRTCOpbZQ .node .label{text-align:center;}#mermaid-svg-k0w3AHDLRTCOpbZQ .node.clickable{cursor:pointer;}#mermaid-svg-k0w3AHDLRTCOpbZQ .arrowheadPath{fill:#333333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-k0w3AHDLRTCOpbZQ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-k0w3AHDLRTCOpbZQ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-k0w3AHDLRTCOpbZQ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-k0w3AHDLRTCOpbZQ .cluster text{fill:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ .cluster span{color:#333;}#mermaid-svg-k0w3AHDLRTCOpbZQ 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-k0w3AHDLRTCOpbZQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

菱形
六角形
平行四边形
反向平行四边形
梯形
反向梯形

箭头
实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式

 a-->b--文本1-->c-->|文本2|d
#mermaid-svg-bGcWBq920ttwprd8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bGcWBq920ttwprd8 .error-icon{fill:#552222;}#mermaid-svg-bGcWBq920ttwprd8 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-bGcWBq920ttwprd8 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-bGcWBq920ttwprd8 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-bGcWBq920ttwprd8 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-bGcWBq920ttwprd8 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-bGcWBq920ttwprd8 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-bGcWBq920ttwprd8 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-bGcWBq920ttwprd8 .marker.cross{stroke:#333333;}#mermaid-svg-bGcWBq920ttwprd8 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-bGcWBq920ttwprd8 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-bGcWBq920ttwprd8 .cluster-label text{fill:#333;}#mermaid-svg-bGcWBq920ttwprd8 .cluster-label span{color:#333;}#mermaid-svg-bGcWBq920ttwprd8 .label text,#mermaid-svg-bGcWBq920ttwprd8 span{fill:#333;color:#333;}#mermaid-svg-bGcWBq920ttwprd8 .node rect,#mermaid-svg-bGcWBq920ttwprd8 .node circle,#mermaid-svg-bGcWBq920ttwprd8 .node ellipse,#mermaid-svg-bGcWBq920ttwprd8 .node polygon,#mermaid-svg-bGcWBq920ttwprd8 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-bGcWBq920ttwprd8 .node .label{text-align:center;}#mermaid-svg-bGcWBq920ttwprd8 .node.clickable{cursor:pointer;}#mermaid-svg-bGcWBq920ttwprd8 .arrowheadPath{fill:#333333;}#mermaid-svg-bGcWBq920ttwprd8 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-bGcWBq920ttwprd8 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-bGcWBq920ttwprd8 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-bGcWBq920ttwprd8 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-bGcWBq920ttwprd8 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-bGcWBq920ttwprd8 .cluster text{fill:#333;}#mermaid-svg-bGcWBq920ttwprd8 .cluster span{color:#333;}#mermaid-svg-bGcWBq920ttwprd8 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-bGcWBq920ttwprd8 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

文本1
文本2
a
b
c
d

​ 粗实线箭头：分为无文本箭头和有文本箭头

a==>b==文本==>c
#mermaid-svg-2oHiwISufSxO3JBX {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-2oHiwISufSxO3JBX .error-icon{fill:#552222;}#mermaid-svg-2oHiwISufSxO3JBX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2oHiwISufSxO3JBX .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-2oHiwISufSxO3JBX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2oHiwISufSxO3JBX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2oHiwISufSxO3JBX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2oHiwISufSxO3JBX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2oHiwISufSxO3JBX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2oHiwISufSxO3JBX .marker.cross{stroke:#333333;}#mermaid-svg-2oHiwISufSxO3JBX svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2oHiwISufSxO3JBX .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-2oHiwISufSxO3JBX .cluster-label text{fill:#333;}#mermaid-svg-2oHiwISufSxO3JBX .cluster-label span{color:#333;}#mermaid-svg-2oHiwISufSxO3JBX .label text,#mermaid-svg-2oHiwISufSxO3JBX span{fill:#333;color:#333;}#mermaid-svg-2oHiwISufSxO3JBX .node rect,#mermaid-svg-2oHiwISufSxO3JBX .node circle,#mermaid-svg-2oHiwISufSxO3JBX .node ellipse,#mermaid-svg-2oHiwISufSxO3JBX .node polygon,#mermaid-svg-2oHiwISufSxO3JBX .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2oHiwISufSxO3JBX .node .label{text-align:center;}#mermaid-svg-2oHiwISufSxO3JBX .node.clickable{cursor:pointer;}#mermaid-svg-2oHiwISufSxO3JBX .arrowheadPath{fill:#333333;}#mermaid-svg-2oHiwISufSxO3JBX .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-2oHiwISufSxO3JBX .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-2oHiwISufSxO3JBX .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-2oHiwISufSxO3JBX .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-2oHiwISufSxO3JBX .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-2oHiwISufSxO3JBX .cluster text{fill:#333;}#mermaid-svg-2oHiwISufSxO3JBX .cluster span{color:#333;}#mermaid-svg-2oHiwISufSxO3JBX 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-2oHiwISufSxO3JBX :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

文本
a
b
c

​ 虚线箭头：分为无文本箭头和有文本箭头

a-.->b-.文本.->c
#mermaid-svg-didxcKCUCqLj9Phv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-didxcKCUCqLj9Phv .error-icon{fill:#552222;}#mermaid-svg-didxcKCUCqLj9Phv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-didxcKCUCqLj9Phv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-didxcKCUCqLj9Phv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-didxcKCUCqLj9Phv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-didxcKCUCqLj9Phv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-didxcKCUCqLj9Phv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-didxcKCUCqLj9Phv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-didxcKCUCqLj9Phv .marker.cross{stroke:#333333;}#mermaid-svg-didxcKCUCqLj9Phv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-didxcKCUCqLj9Phv .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-didxcKCUCqLj9Phv .cluster-label text{fill:#333;}#mermaid-svg-didxcKCUCqLj9Phv .cluster-label span{color:#333;}#mermaid-svg-didxcKCUCqLj9Phv .label text,#mermaid-svg-didxcKCUCqLj9Phv span{fill:#333;color:#333;}#mermaid-svg-didxcKCUCqLj9Phv .node rect,#mermaid-svg-didxcKCUCqLj9Phv .node circle,#mermaid-svg-didxcKCUCqLj9Phv .node ellipse,#mermaid-svg-didxcKCUCqLj9Phv .node polygon,#mermaid-svg-didxcKCUCqLj9Phv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-didxcKCUCqLj9Phv .node .label{text-align:center;}#mermaid-svg-didxcKCUCqLj9Phv .node.clickable{cursor:pointer;}#mermaid-svg-didxcKCUCqLj9Phv .arrowheadPath{fill:#333333;}#mermaid-svg-didxcKCUCqLj9Phv .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-didxcKCUCqLj9Phv .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-didxcKCUCqLj9Phv .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-didxcKCUCqLj9Phv .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-didxcKCUCqLj9Phv .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-didxcKCUCqLj9Phv .cluster text{fill:#333;}#mermaid-svg-didxcKCUCqLj9Phv .cluster span{color:#333;}#mermaid-svg-didxcKCUCqLj9Phv 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-didxcKCUCqLj9Phv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

文本
a
b
c

​ 无箭头线：即以上三种连线去掉箭头后的形式

a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h
#mermaid-svg-0j2zRe2zeA1sSnt7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .error-icon{fill:#552222;}#mermaid-svg-0j2zRe2zeA1sSnt7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0j2zRe2zeA1sSnt7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .marker.cross{stroke:#333333;}#mermaid-svg-0j2zRe2zeA1sSnt7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0j2zRe2zeA1sSnt7 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .cluster-label text{fill:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .cluster-label span{color:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .label text,#mermaid-svg-0j2zRe2zeA1sSnt7 span{fill:#333;color:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .node rect,#mermaid-svg-0j2zRe2zeA1sSnt7 .node circle,#mermaid-svg-0j2zRe2zeA1sSnt7 .node ellipse,#mermaid-svg-0j2zRe2zeA1sSnt7 .node polygon,#mermaid-svg-0j2zRe2zeA1sSnt7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0j2zRe2zeA1sSnt7 .node .label{text-align:center;}#mermaid-svg-0j2zRe2zeA1sSnt7 .node.clickable{cursor:pointer;}#mermaid-svg-0j2zRe2zeA1sSnt7 .arrowheadPath{fill:#333333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0j2zRe2zeA1sSnt7 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-0j2zRe2zeA1sSnt7 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-0j2zRe2zeA1sSnt7 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0j2zRe2zeA1sSnt7 .cluster text{fill:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 .cluster span{color:#333;}#mermaid-svg-0j2zRe2zeA1sSnt7 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-0j2zRe2zeA1sSnt7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

文本1!
文本2
文本3
文本
a
b
c
d
e
f
g
h

​ 其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同

A o--o B
B <--> C
C x--x D
#mermaid-svg-D6aM6FJc4gcKLddf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-D6aM6FJc4gcKLddf .error-icon{fill:#552222;}#mermaid-svg-D6aM6FJc4gcKLddf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-D6aM6FJc4gcKLddf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-D6aM6FJc4gcKLddf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-D6aM6FJc4gcKLddf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-D6aM6FJc4gcKLddf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-D6aM6FJc4gcKLddf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-D6aM6FJc4gcKLddf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-D6aM6FJc4gcKLddf .marker.cross{stroke:#333333;}#mermaid-svg-D6aM6FJc4gcKLddf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-D6aM6FJc4gcKLddf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-D6aM6FJc4gcKLddf .cluster-label text{fill:#333;}#mermaid-svg-D6aM6FJc4gcKLddf .cluster-label span{color:#333;}#mermaid-svg-D6aM6FJc4gcKLddf .label text,#mermaid-svg-D6aM6FJc4gcKLddf span{fill:#333;color:#333;}#mermaid-svg-D6aM6FJc4gcKLddf .node rect,#mermaid-svg-D6aM6FJc4gcKLddf .node circle,#mermaid-svg-D6aM6FJc4gcKLddf .node ellipse,#mermaid-svg-D6aM6FJc4gcKLddf .node polygon,#mermaid-svg-D6aM6FJc4gcKLddf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-D6aM6FJc4gcKLddf .node .label{text-align:center;}#mermaid-svg-D6aM6FJc4gcKLddf .node.clickable{cursor:pointer;}#mermaid-svg-D6aM6FJc4gcKLddf .arrowheadPath{fill:#333333;}#mermaid-svg-D6aM6FJc4gcKLddf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-D6aM6FJc4gcKLddf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-D6aM6FJc4gcKLddf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-D6aM6FJc4gcKLddf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-D6aM6FJc4gcKLddf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-D6aM6FJc4gcKLddf .cluster text{fill:#333;}#mermaid-svg-D6aM6FJc4gcKLddf .cluster span{color:#333;}#mermaid-svg-D6aM6FJc4gcKLddf 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-D6aM6FJc4gcKLddf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

A
B
C
D

​

​ 延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。

A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B --->|No| E[End];
#mermaid-svg-g3VLOIIRY7NPeZbu {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu .error-icon{fill:#552222;}#mermaid-svg-g3VLOIIRY7NPeZbu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-g3VLOIIRY7NPeZbu .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-g3VLOIIRY7NPeZbu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-g3VLOIIRY7NPeZbu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-g3VLOIIRY7NPeZbu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-g3VLOIIRY7NPeZbu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-g3VLOIIRY7NPeZbu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-g3VLOIIRY7NPeZbu .marker.cross{stroke:#333333;}#mermaid-svg-g3VLOIIRY7NPeZbu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-g3VLOIIRY7NPeZbu .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu .cluster-label text{fill:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu .cluster-label span{color:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu .label text,#mermaid-svg-g3VLOIIRY7NPeZbu span{fill:#333;color:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu .node rect,#mermaid-svg-g3VLOIIRY7NPeZbu .node circle,#mermaid-svg-g3VLOIIRY7NPeZbu .node ellipse,#mermaid-svg-g3VLOIIRY7NPeZbu .node polygon,#mermaid-svg-g3VLOIIRY7NPeZbu .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-g3VLOIIRY7NPeZbu .node .label{text-align:center;}#mermaid-svg-g3VLOIIRY7NPeZbu .node.clickable{cursor:pointer;}#mermaid-svg-g3VLOIIRY7NPeZbu .arrowheadPath{fill:#333333;}#mermaid-svg-g3VLOIIRY7NPeZbu .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-g3VLOIIRY7NPeZbu .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-g3VLOIIRY7NPeZbu .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-g3VLOIIRY7NPeZbu .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-g3VLOIIRY7NPeZbu .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-g3VLOIIRY7NPeZbu .cluster text{fill:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu .cluster span{color:#333;}#mermaid-svg-g3VLOIIRY7NPeZbu 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-g3VLOIIRY7NPeZbu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

Yes
No
Start
Is it?
OK
Rethink
End

​ 多重链：使用&字符，或者单个描述

 a --> b & c--> d  A & B--> C & DX --> MX --> NY --> MY --> N
#mermaid-svg-xeaSbA4u3nPXD6PS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS .error-icon{fill:#552222;}#mermaid-svg-xeaSbA4u3nPXD6PS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xeaSbA4u3nPXD6PS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-xeaSbA4u3nPXD6PS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xeaSbA4u3nPXD6PS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xeaSbA4u3nPXD6PS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xeaSbA4u3nPXD6PS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xeaSbA4u3nPXD6PS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xeaSbA4u3nPXD6PS .marker.cross{stroke:#333333;}#mermaid-svg-xeaSbA4u3nPXD6PS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xeaSbA4u3nPXD6PS .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS .cluster-label text{fill:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS .cluster-label span{color:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS .label text,#mermaid-svg-xeaSbA4u3nPXD6PS span{fill:#333;color:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS .node rect,#mermaid-svg-xeaSbA4u3nPXD6PS .node circle,#mermaid-svg-xeaSbA4u3nPXD6PS .node ellipse,#mermaid-svg-xeaSbA4u3nPXD6PS .node polygon,#mermaid-svg-xeaSbA4u3nPXD6PS .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xeaSbA4u3nPXD6PS .node .label{text-align:center;}#mermaid-svg-xeaSbA4u3nPXD6PS .node.clickable{cursor:pointer;}#mermaid-svg-xeaSbA4u3nPXD6PS .arrowheadPath{fill:#333333;}#mermaid-svg-xeaSbA4u3nPXD6PS .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xeaSbA4u3nPXD6PS .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xeaSbA4u3nPXD6PS .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-xeaSbA4u3nPXD6PS .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-xeaSbA4u3nPXD6PS .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xeaSbA4u3nPXD6PS .cluster text{fill:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS .cluster span{color:#333;}#mermaid-svg-xeaSbA4u3nPXD6PS 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-xeaSbA4u3nPXD6PS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

a
b
c
d
A
B
C
D
X
M
N
Y

子图：需要将graph关键字改为flowchart，在代码段的开始加入subgraph，尾部加入end

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2endone --> twothree --> twotwo --> c2
#mermaid-svg-lH9fEAKthoUBH4Xa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa .error-icon{fill:#552222;}#mermaid-svg-lH9fEAKthoUBH4Xa .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lH9fEAKthoUBH4Xa .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lH9fEAKthoUBH4Xa .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lH9fEAKthoUBH4Xa .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lH9fEAKthoUBH4Xa .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lH9fEAKthoUBH4Xa .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lH9fEAKthoUBH4Xa .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lH9fEAKthoUBH4Xa .marker.cross{stroke:#333333;}#mermaid-svg-lH9fEAKthoUBH4Xa svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lH9fEAKthoUBH4Xa .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa .cluster-label text{fill:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa .cluster-label span{color:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa .label text,#mermaid-svg-lH9fEAKthoUBH4Xa span{fill:#333;color:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa .node rect,#mermaid-svg-lH9fEAKthoUBH4Xa .node circle,#mermaid-svg-lH9fEAKthoUBH4Xa .node ellipse,#mermaid-svg-lH9fEAKthoUBH4Xa .node polygon,#mermaid-svg-lH9fEAKthoUBH4Xa .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lH9fEAKthoUBH4Xa .node .label{text-align:center;}#mermaid-svg-lH9fEAKthoUBH4Xa .node.clickable{cursor:pointer;}#mermaid-svg-lH9fEAKthoUBH4Xa .arrowheadPath{fill:#333333;}#mermaid-svg-lH9fEAKthoUBH4Xa .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lH9fEAKthoUBH4Xa .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lH9fEAKthoUBH4Xa .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-lH9fEAKthoUBH4Xa .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-lH9fEAKthoUBH4Xa .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lH9fEAKthoUBH4Xa .cluster text{fill:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa .cluster span{color:#333;}#mermaid-svg-lH9fEAKthoUBH4Xa 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-lH9fEAKthoUBH4Xa :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

three
one
c2
c1
two
b2
b1
a2
a1

注释：在行首加入%%即可

Typora:mermaid语法流程图绘制方法相关推荐

  1. 业务流程图绘制方法经验谈（下篇）

    摘要:业务流程分析可以帮助了解某项业务的具体处理过程,梳理清楚系统中各角色及因素之间的关系,发现和处理系统调查工作中的错误和瑕疵,修改和删除原系统不合理的部分,在新系统的基础上优化处理流程.但是应如何 ...

  2. 这篇文章告诉你三种流程图绘制方法

    说到制作流程图相信大家应该都不陌生吧,在我们工作上或者学习中,或多或少都会接触到各种各样的流程图,比较常见的是PPT里的流程图.通常是为了方便查看以及整理思路,会通过流程图的绘制来将我们的思路逐渐清晰 ...

  3. confluence 制作流程图_软件需求分析流程图绘制方法

    怎么利用软件绘制结构化程序流程图呢?下面小编就与大家分享一下借助流程图工具绘制编程语言结构化流程图的具体方法步骤,希望能帮助大家. ​ 方法/步骤 1 如果想借助流程图工具绘制结构化程序流程图,我们需 ...

  4. 学习业务流程图绘制方法（上）

    前言 本文会包含几块内容: 1. 什么是流程图?流程图和其他图表(如线框图,概念图,架构图,用例图)有什么不同? 2. 为什么需要流程图? 3. 流程图的分类? 4. 如何绘制流程图? 5. 流程图绘 ...

  5. 信用证流动流程图绘制方法

    信用证是买卖双方的一种磋商,约定的方式,通过该操作达成双方之间的的约定,从而促成交易的进行,那该过程的流程图是什么呢? 绘制工具:迅捷画图 绘制方法: 1.利用上述工具进行编辑使用,打开该在线网站,选 ...

  6. 学习业务流程图绘制方法（下）

    业务流程图具体怎么做呢?我应该注意什么呢?--| 1. 业务流程图的"烹饪三部曲" 在绘制业务流程图前,思考如何精美,如何交互,使用什么工具,都不应该是重点. 真正重点的是将业务流 ...

  7. 【系统分析与设计】业务流程图绘制方法

    文章目录 1 符号表示 2 例子 1 符号表示 2 例子

  8. markdown 流程图js_在Markdown中用mermaid语法绘制图表

    Python数据挖掘与文本分析&Stata应用能力提升与实证前沿云特训~ Mermaid可以用文本方式绘制图表和流程图,相比Visio而言更加的轻量便捷,此外Markdown内部支持Merma ...

  9. 【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）

    说明 mermaid是一种解决文字图形转换的方案,用于在markdown标记语言中利用文本绘图,本文内容保证适合mermaid 8.8.3的内容,向上更新的内容不论. 本篇作为mermaid教程系列的 ...

最新文章

  1. Java 百鸡百钱题
  2. 【产品干货】APP留存率多少才合格——全面解析留存率
  3. UGUI_判断鼠标或者手指是否点击在UI上
  4. 求一个正整数是哪几个正整数相加的和,这些数不能相同
  5. js php c语言for循环,小蚂蚁学习C语言（8）——C语言for循环
  6. django 1.8 官方文档翻译： 3-1-4 视图装饰器
  7. 鲲云获数千万A轮融资：开发全球首颗数据流AI芯片，实现数据流架构的创新突破！
  8. 测试学习java_使用Junit测试框架学习Java
  9. FindWindowEX应用实例二则
  10. 分支限界算法c语言_算法分析
  11. property自己实现
  12. thinkPHP使用中遇到的问题交流==
  13. 软件测试工具Winrunner TSL命令简介
  14. nvidia控制面板点了没反应win7_nvidia控制面板点击没反应 - 卡饭网
  15. 校园网站毕业设计,学校网站毕业设计论文模板案例,校园网毕业设计
  16. python 监听键盘输入并收集数据进行分析
  17. 分析：大数据失败案例及背后原因！
  18. ​IBM、Google、Oracle三巨头的公有云之殇（下）
  19. fftshift小技巧
  20. 微信小程序使用echarts绘画动态图表

热门文章

  1. 三十年三十谈|探索城市设计的科学方法和实施路径
  2. 第七届杭州全球企业家论坛大健康分论坛即将举办，敬请关注！
  3. 1475_AURIX TC275 WDT的寄存器概览
  4. 计算机市场行情论文,市场行情论文.doc
  5. GPT-4 大升级！太太太太强了！
  6. WordPress主题的基本模板及常用函数
  7. 图文带您了解水流量测量仪器：量水堰计
  8. Mybatis 示例之 SelectKey
  9. 【Css】移动端用flex实现DIV高度自适应屏幕和带滚动条效果（代码示例）
  10. 图形数据库Neo4j