1.流程图定义与节点名称

定义代码：

flowchart LRA[Start] --> B

注意：在使用的时候一定要将该部分的内容包含到代码块中

演示效果：

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

Start
Go

2.流程图的方向

所以一般是从左到右，从上到下

TOP BOTTOM LEFT RIGHT

分为4种

  • TD /TB (TOP TO BOTTOM)
  • BT
  • LR
  • RL

演示TB，代码如下：


flowchart TBA --> B

效果如下：

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

A
B

其他方向的流程图类同

3.节点形状

默认的节点形状是长方形，也可以设置为其他形状

演示代码：


flowchart LRA(圆角矩形) -.-B([椭圆形]) -.- C((圆形))E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}I[/平行四边形/] -.- J[\平行四边形\] -.- K[\上梯形/] -.- L[/下梯形\]

演示效果：

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

圆角矩形
椭圆形
圆形
subroutine
非对称形状
菱形
六角形
平行四边形
平行四边形
上梯形
下梯形

4.节点连接线

连接线类型 表示符号 加长表示
箭头 –> —>
直线 — ----
虚线 -.- -…-
加粗箭头 ==> ===>
加粗直线 === ===
虚线箭头 -.-> -…->

注意： 节点连接线的标识符最起码是三个以上，1个解析不出来的，2个解析器认为是文字，3个-表示的是箭头直线，当-的个数越多，连接线的长度就会越长！

当要在箭头上写文字的时候，可以先要连接线类型写好，两个标识符，再写你想要的文字，再将连接线的类型写完整，如同--你好哇-->,-.王摇摆.->

演示代码：


flowchart LR
A1 --箭头和文本-->  B1 -->|箭头和文本| C1 --> D1A2 ==加粗直线箭头==> B2 ==> C2A3 --无箭头直线--- B3 ---|无箭头直线| C3 ==无箭头的粗直线=== D3 A4 -.虚线.-B4 -.- C4 --> D4

演示效果：

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

箭头和文本
箭头和文本
加粗直线箭头
无箭头直线
无箭头直线
无箭头的粗直线
虚线
虚线箭头
A1
B1
C1
D1
A2
B2
C2
A3
B3
C3
D3
A4
B4
C4
D4

5.多节点连接

5.1 一对多

演示代码：(常规版本)


flowchart LRA --> BA --> CB --> DC --> D

演示代码：(简化版本)


flowchart LRA --> B & C --> D

演示效果：

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

A
B
C
D

5.2 多对多

演示代码：(简化版本)


flowchart TDA & B ==> C & D

演示效果：

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

A
B
C
D

基于以上知识基本上流程图就完全可以用代码来实现了

一个简单的实例：

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

假的
是
开始
是真的吗?
结束
C
再考虑一下

代码：

flowchart TDA[开始] --> B[是真的吗?]B --假的--> E[结束]B --是--> C C --> D[再考虑一下]D --> B

6.其他类型的箭头

类型 表示方法
箭头 –>
黑圆 –o
黑× –x

演示代码：


flowchart LRA --> BB --x CC --o D

演示效果：

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

A
B
C
D

注意，箭头是可以双向的，不过要注意，箭头还是3个标识符起步，少了是不行的

效果如下：

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

A
B
C
D
A1
B1

7.特殊字符

7.1 如何表示三种括号？

因为在mermaid中大小中三种括号用于表示流程图的形状了
要单独使用他们的话，要进行转义使用
使用方法：正常编写，然后使用双引号""括起来即可

演示代码：


flowchart LRA["[Test]"] --> B

演示效果：

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

[Test]
B

7.2 如何表示引号？

使用HTML中的引号标识符即可#quot;

演示代码：


flowchart LRA["来个引号#quot;"] --> B

演示效果：

flowchart LRA["来个引号#quot;"] --> B

7.3 表示美元符号

演示代码：


flowchart LRA["美元符号#36;"] --> B

演示效果：

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

美元符号$
B

ENDING

演示代码：


flowchart LRA["#128512;"]

演示效果：

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

在Markdown中使用Mermaid来绘制流程图相关推荐

  1. 在Markdown中使用Mermaid来绘制用户旅程图

    1. 定义 2. 基本语法 journeytitle My working daysection Go to workMake tea: 5: MeGo upstairs: 3: MeDo work: ...

  2. Vue项目中使用AntV X6绘制流程图

    Vue项目中使用AntV X6绘制流程图 一.需求 在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...

  3. Vue3 项目中使用 AntV X6 绘制流程图

    X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图.DAG 图.ER 图等图应用. 参考一些网站的写法,然后自己加上了撤销操作. 节点 ...

  4. markdown 流程图js_如何在Markdown中画流程图

    如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用(现在 ...

  5. 【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图

    平常使用Typora撰写内容的时候,偶尔会用到流程图,原来一直使用Word来作图,在插入到文档中,昨天偶然间了解到Typora支持使用mermaid来绘制流程图,才发现自己差点Out了.此处整理一下如 ...

  6. 使用Typora工具绘制流程图

    使用Typora工具绘制流程图 Typora编辑器简介 使用Mermaid语法绘制流程图 1. 流程图方向 2.节点形状 3.节点间的连线 4.子图表(subgraph) 5.序列图(sequence ...

  7. 流程图的制作技巧分享，手把手教你如何绘制流程图

    什么是流程图?流程图是思维导图的一种表现形式,是用来表示算法思路的一种方法.一般应用于在汇编语言和BASIC 语言环境中. 一.绘制流程图的功能 流程图是以特定的符号加上文字说明组合而成的图,是流经一 ...

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

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

  9. Markdown学习之(2)－绘制表格和流程图

    MarkDown表格 + 流程图绘制 表格绘制 在Markdown上写一个表格真是让人头疼的事情,写的不流畅还要担心格式.我为大家总结了以下三种方法,前两种大家或许司空见惯了,第三种是神器... 一. ...

最新文章

  1. 03-vue-router
  2. 华为pat地址转换,以及内网web服务器发布
  3. Dart 调用C语言混合编程
  4. c 异常 java异常_C ++和Java中异常处理的比较
  5. NYOJ 741 数学家ST
  6. 升序排序中国_排序的4个技巧都不掌握，那就真的Out了！
  7. 关闭防火墙_从零开始学Linux运维|09.关闭防火墙和SElinux
  8. 第14篇：Flowable-BPMN操作流程之任务完成
  9. 6.Java 面试题整理（XML）
  10. Hypothesis Testing
  11. EasyUI的databox取值
  12. php对引用的简单理解
  13. 自学 6 个月 Java 找到了一份 15K 的工作，师弟的方式值得推荐给大家
  14. java面试的职业规划怎么说_java面试技巧-职业规划有技巧
  15. 推荐系统笔记（二）：常用数据集Movielens学习
  16. 联想拯救者Legion Y7000P 2020款安装ubuntu16.04 解决WIFI 显卡 cuda10.2)
  17. Linux的命令和快捷键
  18. Java210道常见的面试
  19. 真人电影中的幻想生物迷墙：索尼克为什么被骂到回炉重造？
  20. java安装有错误码咋办_java编程出现的错误对应的解决方法

热门文章

  1. HTML中div设置出相框,CSS完成神奇创意的相框
  2. django重置密码发送html邮件,django 开发忘记密码通过邮箱找回功能示例
  3. appinventor2在window上搭建步骤
  4. Latex中 .cls和.sty文件的作用和区别
  5. PLGA-PEG-MAL +多肽A+多肽B+DOX；PLGA-PEG-MAL +DOX
  6. 客户开发篇 | 外贸业务员怎么打电话开发跟进客户呢？
  7. 怎样开始学做自媒体？怎么起步？
  8. Java位语句_卫语句 - 宿小帅的个人空间 - OSCHINA - 中文开源技术交流社区
  9. python大气校正_全自动多源遥感影像大气校正方法
  10. 卡尔曼滤波的使用举例