【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
说明
mermaid是一种解决文字图形转换的方案，用于在markdown标记语言中利用文本绘图，本文内容保证适合mermaid 8.8.3的内容，向上更新的内容不论。
本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
流程图是mermaid最基础的应用内容，flowchart和graph在整体上类似，有区别的地方会单独提及。
文本框边缘形状 edges shape
流程图中，一个节点(nodes)的大概组成是
节点名称[节点展示文本]
节点展示文本的边缘形状取决于包括符号的类型，例子如下：
flowchart LR
在不做任何声明的情况下默认是矩形框
#mermaid-svg-RguM2D8JmCJwW1Y8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .error-icon{fill:#552222;}#mermaid-svg-RguM2D8JmCJwW1Y8 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-RguM2D8JmCJwW1Y8 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .marker.cross{stroke:#333333;}#mermaid-svg-RguM2D8JmCJwW1Y8 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-RguM2D8JmCJwW1Y8 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .cluster-label text{fill:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .cluster-label span{color:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .label text,#mermaid-svg-RguM2D8JmCJwW1Y8 span{fill:#333;color:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .node rect,#mermaid-svg-RguM2D8JmCJwW1Y8 .node circle,#mermaid-svg-RguM2D8JmCJwW1Y8 .node ellipse,#mermaid-svg-RguM2D8JmCJwW1Y8 .node polygon,#mermaid-svg-RguM2D8JmCJwW1Y8 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-RguM2D8JmCJwW1Y8 .node .label{text-align:center;}#mermaid-svg-RguM2D8JmCJwW1Y8 .node.clickable{cursor:pointer;}#mermaid-svg-RguM2D8JmCJwW1Y8 .arrowheadPath{fill:#333333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-RguM2D8JmCJwW1Y8 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-RguM2D8JmCJwW1Y8 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-RguM2D8JmCJwW1Y8 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-RguM2D8JmCJwW1Y8 .cluster text{fill:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 .cluster span{color:#333;}#mermaid-svg-RguM2D8JmCJwW1Y8 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-RguM2D8JmCJwW1Y8 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
flowchart LR
A[矩形框] --> B(小圆角框) --> C{判断框} --> D([大圆角框]) --> E[[双线框]]--> F[(圆柱框)] --> G((圆框))
#mermaid-svg-dmjUCI1oOw8L20ZP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP .error-icon{fill:#552222;}#mermaid-svg-dmjUCI1oOw8L20ZP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dmjUCI1oOw8L20ZP .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-dmjUCI1oOw8L20ZP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dmjUCI1oOw8L20ZP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dmjUCI1oOw8L20ZP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dmjUCI1oOw8L20ZP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dmjUCI1oOw8L20ZP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dmjUCI1oOw8L20ZP .marker.cross{stroke:#333333;}#mermaid-svg-dmjUCI1oOw8L20ZP svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dmjUCI1oOw8L20ZP .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP .cluster-label text{fill:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP .cluster-label span{color:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP .label text,#mermaid-svg-dmjUCI1oOw8L20ZP span{fill:#333;color:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP .node rect,#mermaid-svg-dmjUCI1oOw8L20ZP .node circle,#mermaid-svg-dmjUCI1oOw8L20ZP .node ellipse,#mermaid-svg-dmjUCI1oOw8L20ZP .node polygon,#mermaid-svg-dmjUCI1oOw8L20ZP .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dmjUCI1oOw8L20ZP .node .label{text-align:center;}#mermaid-svg-dmjUCI1oOw8L20ZP .node.clickable{cursor:pointer;}#mermaid-svg-dmjUCI1oOw8L20ZP .arrowheadPath{fill:#333333;}#mermaid-svg-dmjUCI1oOw8L20ZP .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-dmjUCI1oOw8L20ZP .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dmjUCI1oOw8L20ZP .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-dmjUCI1oOw8L20ZP .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-dmjUCI1oOw8L20ZP .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-dmjUCI1oOw8L20ZP .cluster text{fill:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP .cluster span{color:#333;}#mermaid-svg-dmjUCI1oOw8L20ZP 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-dmjUCI1oOw8L20ZP :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
flowchart LR
H>标签框] --> I{{六角框}} -->J[/平行四边形框/] --> K[\平行四边形框\] --> L[/梯形框\] --> M[\倒梯形框/]
#mermaid-svg-GdD95NEda3ZxKZ6Z {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .error-icon{fill:#552222;}#mermaid-svg-GdD95NEda3ZxKZ6Z .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GdD95NEda3ZxKZ6Z .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .marker.cross{stroke:#333333;}#mermaid-svg-GdD95NEda3ZxKZ6Z svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GdD95NEda3ZxKZ6Z .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .cluster-label text{fill:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .cluster-label span{color:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .label text,#mermaid-svg-GdD95NEda3ZxKZ6Z span{fill:#333;color:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .node rect,#mermaid-svg-GdD95NEda3ZxKZ6Z .node circle,#mermaid-svg-GdD95NEda3ZxKZ6Z .node ellipse,#mermaid-svg-GdD95NEda3ZxKZ6Z .node polygon,#mermaid-svg-GdD95NEda3ZxKZ6Z .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-GdD95NEda3ZxKZ6Z .node .label{text-align:center;}#mermaid-svg-GdD95NEda3ZxKZ6Z .node.clickable{cursor:pointer;}#mermaid-svg-GdD95NEda3ZxKZ6Z .arrowheadPath{fill:#333333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-GdD95NEda3ZxKZ6Z .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-GdD95NEda3ZxKZ6Z .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-GdD95NEda3ZxKZ6Z .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-GdD95NEda3ZxKZ6Z .cluster text{fill:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z .cluster span{color:#333;}#mermaid-svg-GdD95NEda3ZxKZ6Z 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-GdD95NEda3ZxKZ6Z :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
说明: LR为mermaid的图像朝向，关于图像朝向的内容可关注下面内容
注释 comments
flowchart LR
%% this is a comment A -- text --> B{node}A -- text --> B -- text2 --> C
#mermaid-svg-eugjixxGtSzW9HGO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eugjixxGtSzW9HGO .error-icon{fill:#552222;}#mermaid-svg-eugjixxGtSzW9HGO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-eugjixxGtSzW9HGO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-eugjixxGtSzW9HGO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-eugjixxGtSzW9HGO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-eugjixxGtSzW9HGO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-eugjixxGtSzW9HGO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-eugjixxGtSzW9HGO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-eugjixxGtSzW9HGO .marker.cross{stroke:#333333;}#mermaid-svg-eugjixxGtSzW9HGO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-eugjixxGtSzW9HGO .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-eugjixxGtSzW9HGO .cluster-label text{fill:#333;}#mermaid-svg-eugjixxGtSzW9HGO .cluster-label span{color:#333;}#mermaid-svg-eugjixxGtSzW9HGO .label text,#mermaid-svg-eugjixxGtSzW9HGO span{fill:#333;color:#333;}#mermaid-svg-eugjixxGtSzW9HGO .node rect,#mermaid-svg-eugjixxGtSzW9HGO .node circle,#mermaid-svg-eugjixxGtSzW9HGO .node ellipse,#mermaid-svg-eugjixxGtSzW9HGO .node polygon,#mermaid-svg-eugjixxGtSzW9HGO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-eugjixxGtSzW9HGO .node .label{text-align:center;}#mermaid-svg-eugjixxGtSzW9HGO .node.clickable{cursor:pointer;}#mermaid-svg-eugjixxGtSzW9HGO .arrowheadPath{fill:#333333;}#mermaid-svg-eugjixxGtSzW9HGO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-eugjixxGtSzW9HGO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-eugjixxGtSzW9HGO .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-eugjixxGtSzW9HGO .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-eugjixxGtSzW9HGO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-eugjixxGtSzW9HGO .cluster text{fill:#333;}#mermaid-svg-eugjixxGtSzW9HGO .cluster span{color:#333;}#mermaid-svg-eugjixxGtSzW9HGO 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-eugjixxGtSzW9HGO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
箭头 arrow
flowchart的箭头连接相比graph在某些编辑器中要更加平滑一点，有些编辑器对graph的支持也较差（比如CSDN自己的，graph的箭头就无法分辨，只能用flowchart）
箭头类型
实线
实线的基本单元是— 和 --> 分别是不带箭头的和带箭头的，基本形式如下：
flowchart LR
A --- B
B --> C
#mermaid-svg-7M25K8YZQI9S5W8e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7M25K8YZQI9S5W8e .error-icon{fill:#552222;}#mermaid-svg-7M25K8YZQI9S5W8e .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7M25K8YZQI9S5W8e .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7M25K8YZQI9S5W8e .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7M25K8YZQI9S5W8e .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7M25K8YZQI9S5W8e .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7M25K8YZQI9S5W8e .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7M25K8YZQI9S5W8e .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7M25K8YZQI9S5W8e .marker.cross{stroke:#333333;}#mermaid-svg-7M25K8YZQI9S5W8e svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7M25K8YZQI9S5W8e .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-7M25K8YZQI9S5W8e .cluster-label text{fill:#333;}#mermaid-svg-7M25K8YZQI9S5W8e .cluster-label span{color:#333;}#mermaid-svg-7M25K8YZQI9S5W8e .label text,#mermaid-svg-7M25K8YZQI9S5W8e span{fill:#333;color:#333;}#mermaid-svg-7M25K8YZQI9S5W8e .node rect,#mermaid-svg-7M25K8YZQI9S5W8e .node circle,#mermaid-svg-7M25K8YZQI9S5W8e .node ellipse,#mermaid-svg-7M25K8YZQI9S5W8e .node polygon,#mermaid-svg-7M25K8YZQI9S5W8e .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7M25K8YZQI9S5W8e .node .label{text-align:center;}#mermaid-svg-7M25K8YZQI9S5W8e .node.clickable{cursor:pointer;}#mermaid-svg-7M25K8YZQI9S5W8e .arrowheadPath{fill:#333333;}#mermaid-svg-7M25K8YZQI9S5W8e .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-7M25K8YZQI9S5W8e .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-7M25K8YZQI9S5W8e .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-7M25K8YZQI9S5W8e .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-7M25K8YZQI9S5W8e .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-7M25K8YZQI9S5W8e .cluster text{fill:#333;}#mermaid-svg-7M25K8YZQI9S5W8e .cluster span{color:#333;}#mermaid-svg-7M25K8YZQI9S5W8e 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-7M25K8YZQI9S5W8e :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
在中间添加文本的方法
-- + 文本 + 基本单元基本单元 + |文本|
中间添加文本的方法
flowchart LR
A -- TEXT --- B
D -- TEXT --> EB ---|TEXT|C
C -->|TEXT|D
#mermaid-svg-nfSJvgMHpIEWYZOp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp .error-icon{fill:#552222;}#mermaid-svg-nfSJvgMHpIEWYZOp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-nfSJvgMHpIEWYZOp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-nfSJvgMHpIEWYZOp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-nfSJvgMHpIEWYZOp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-nfSJvgMHpIEWYZOp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-nfSJvgMHpIEWYZOp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-nfSJvgMHpIEWYZOp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-nfSJvgMHpIEWYZOp .marker.cross{stroke:#333333;}#mermaid-svg-nfSJvgMHpIEWYZOp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-nfSJvgMHpIEWYZOp .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp .cluster-label text{fill:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp .cluster-label span{color:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp .label text,#mermaid-svg-nfSJvgMHpIEWYZOp span{fill:#333;color:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp .node rect,#mermaid-svg-nfSJvgMHpIEWYZOp .node circle,#mermaid-svg-nfSJvgMHpIEWYZOp .node ellipse,#mermaid-svg-nfSJvgMHpIEWYZOp .node polygon,#mermaid-svg-nfSJvgMHpIEWYZOp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-nfSJvgMHpIEWYZOp .node .label{text-align:center;}#mermaid-svg-nfSJvgMHpIEWYZOp .node.clickable{cursor:pointer;}#mermaid-svg-nfSJvgMHpIEWYZOp .arrowheadPath{fill:#333333;}#mermaid-svg-nfSJvgMHpIEWYZOp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-nfSJvgMHpIEWYZOp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-nfSJvgMHpIEWYZOp .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-nfSJvgMHpIEWYZOp .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-nfSJvgMHpIEWYZOp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-nfSJvgMHpIEWYZOp .cluster text{fill:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp .cluster span{color:#333;}#mermaid-svg-nfSJvgMHpIEWYZOp 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-nfSJvgMHpIEWYZOp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
虚线
基本单元： -.- -.->
flowchart LR
A -.- B
B -.-> C
#mermaid-svg-xAysv3T1VP2pOue9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xAysv3T1VP2pOue9 .error-icon{fill:#552222;}#mermaid-svg-xAysv3T1VP2pOue9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xAysv3T1VP2pOue9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-xAysv3T1VP2pOue9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xAysv3T1VP2pOue9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xAysv3T1VP2pOue9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xAysv3T1VP2pOue9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xAysv3T1VP2pOue9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xAysv3T1VP2pOue9 .marker.cross{stroke:#333333;}#mermaid-svg-xAysv3T1VP2pOue9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xAysv3T1VP2pOue9 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-xAysv3T1VP2pOue9 .cluster-label text{fill:#333;}#mermaid-svg-xAysv3T1VP2pOue9 .cluster-label span{color:#333;}#mermaid-svg-xAysv3T1VP2pOue9 .label text,#mermaid-svg-xAysv3T1VP2pOue9 span{fill:#333;color:#333;}#mermaid-svg-xAysv3T1VP2pOue9 .node rect,#mermaid-svg-xAysv3T1VP2pOue9 .node circle,#mermaid-svg-xAysv3T1VP2pOue9 .node ellipse,#mermaid-svg-xAysv3T1VP2pOue9 .node polygon,#mermaid-svg-xAysv3T1VP2pOue9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xAysv3T1VP2pOue9 .node .label{text-align:center;}#mermaid-svg-xAysv3T1VP2pOue9 .node.clickable{cursor:pointer;}#mermaid-svg-xAysv3T1VP2pOue9 .arrowheadPath{fill:#333333;}#mermaid-svg-xAysv3T1VP2pOue9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xAysv3T1VP2pOue9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xAysv3T1VP2pOue9 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-xAysv3T1VP2pOue9 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-xAysv3T1VP2pOue9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xAysv3T1VP2pOue9 .cluster text{fill:#333;}#mermaid-svg-xAysv3T1VP2pOue9 .cluster span{color:#333;}#mermaid-svg-xAysv3T1VP2pOue9 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-xAysv3T1VP2pOue9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
添加文本的方法
flowchart LR
A -.TEXT.- B
#mermaid-svg-Y4hzuZqHrR5BQkEb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .error-icon{fill:#552222;}#mermaid-svg-Y4hzuZqHrR5BQkEb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Y4hzuZqHrR5BQkEb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .marker.cross{stroke:#333333;}#mermaid-svg-Y4hzuZqHrR5BQkEb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Y4hzuZqHrR5BQkEb .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .cluster-label text{fill:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .cluster-label span{color:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .label text,#mermaid-svg-Y4hzuZqHrR5BQkEb span{fill:#333;color:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .node rect,#mermaid-svg-Y4hzuZqHrR5BQkEb .node circle,#mermaid-svg-Y4hzuZqHrR5BQkEb .node ellipse,#mermaid-svg-Y4hzuZqHrR5BQkEb .node polygon,#mermaid-svg-Y4hzuZqHrR5BQkEb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Y4hzuZqHrR5BQkEb .node .label{text-align:center;}#mermaid-svg-Y4hzuZqHrR5BQkEb .node.clickable{cursor:pointer;}#mermaid-svg-Y4hzuZqHrR5BQkEb .arrowheadPath{fill:#333333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Y4hzuZqHrR5BQkEb .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Y4hzuZqHrR5BQkEb .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Y4hzuZqHrR5BQkEb .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Y4hzuZqHrR5BQkEb .cluster text{fill:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb .cluster span{color:#333;}#mermaid-svg-Y4hzuZqHrR5BQkEb 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-Y4hzuZqHrR5BQkEb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
粗线
基本单元：=== ==>
#mermaid-svg-buP3GunU1lbeS6up {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-buP3GunU1lbeS6up .error-icon{fill:#552222;}#mermaid-svg-buP3GunU1lbeS6up .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-buP3GunU1lbeS6up .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-buP3GunU1lbeS6up .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-buP3GunU1lbeS6up .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-buP3GunU1lbeS6up .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-buP3GunU1lbeS6up .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-buP3GunU1lbeS6up .marker{fill:#333333;stroke:#333333;}#mermaid-svg-buP3GunU1lbeS6up .marker.cross{stroke:#333333;}#mermaid-svg-buP3GunU1lbeS6up svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-buP3GunU1lbeS6up .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-buP3GunU1lbeS6up .cluster-label text{fill:#333;}#mermaid-svg-buP3GunU1lbeS6up .cluster-label span{color:#333;}#mermaid-svg-buP3GunU1lbeS6up .label text,#mermaid-svg-buP3GunU1lbeS6up span{fill:#333;color:#333;}#mermaid-svg-buP3GunU1lbeS6up .node rect,#mermaid-svg-buP3GunU1lbeS6up .node circle,#mermaid-svg-buP3GunU1lbeS6up .node ellipse,#mermaid-svg-buP3GunU1lbeS6up .node polygon,#mermaid-svg-buP3GunU1lbeS6up .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-buP3GunU1lbeS6up .node .label{text-align:center;}#mermaid-svg-buP3GunU1lbeS6up .node.clickable{cursor:pointer;}#mermaid-svg-buP3GunU1lbeS6up .arrowheadPath{fill:#333333;}#mermaid-svg-buP3GunU1lbeS6up .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-buP3GunU1lbeS6up .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-buP3GunU1lbeS6up .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-buP3GunU1lbeS6up .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-buP3GunU1lbeS6up .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-buP3GunU1lbeS6up .cluster text{fill:#333;}#mermaid-svg-buP3GunU1lbeS6up .cluster span{color:#333;}#mermaid-svg-buP3GunU1lbeS6up 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-buP3GunU1lbeS6up :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
添加文本的方法（基本等同于实线）：
flowchart LR
A == TEXT ===B
B == TEXT ==>C
C ===|TEXT|D
D ==>|TEXT|E
#mermaid-svg-I7AeY9t5tpry1fzN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-I7AeY9t5tpry1fzN .error-icon{fill:#552222;}#mermaid-svg-I7AeY9t5tpry1fzN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-I7AeY9t5tpry1fzN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-I7AeY9t5tpry1fzN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-I7AeY9t5tpry1fzN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-I7AeY9t5tpry1fzN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-I7AeY9t5tpry1fzN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-I7AeY9t5tpry1fzN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-I7AeY9t5tpry1fzN .marker.cross{stroke:#333333;}#mermaid-svg-I7AeY9t5tpry1fzN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-I7AeY9t5tpry1fzN .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-I7AeY9t5tpry1fzN .cluster-label text{fill:#333;}#mermaid-svg-I7AeY9t5tpry1fzN .cluster-label span{color:#333;}#mermaid-svg-I7AeY9t5tpry1fzN .label text,#mermaid-svg-I7AeY9t5tpry1fzN span{fill:#333;color:#333;}#mermaid-svg-I7AeY9t5tpry1fzN .node rect,#mermaid-svg-I7AeY9t5tpry1fzN .node circle,#mermaid-svg-I7AeY9t5tpry1fzN .node ellipse,#mermaid-svg-I7AeY9t5tpry1fzN .node polygon,#mermaid-svg-I7AeY9t5tpry1fzN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-I7AeY9t5tpry1fzN .node .label{text-align:center;}#mermaid-svg-I7AeY9t5tpry1fzN .node.clickable{cursor:pointer;}#mermaid-svg-I7AeY9t5tpry1fzN .arrowheadPath{fill:#333333;}#mermaid-svg-I7AeY9t5tpry1fzN .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-I7AeY9t5tpry1fzN .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-I7AeY9t5tpry1fzN .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-I7AeY9t5tpry1fzN .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-I7AeY9t5tpry1fzN .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-I7AeY9t5tpry1fzN .cluster text{fill:#333;}#mermaid-svg-I7AeY9t5tpry1fzN .cluster span{color:#333;}#mermaid-svg-I7AeY9t5tpry1fzN 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-I7AeY9t5tpry1fzN :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
其他线形
此部分内容仅有flowchart支持，graph不支持
flowchart LR
A --x B
B -- TEXT --x C
C --o D
D -- TEXT --o E
#mermaid-svg-JNNFgsGIIS4kDTyu {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu .error-icon{fill:#552222;}#mermaid-svg-JNNFgsGIIS4kDTyu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JNNFgsGIIS4kDTyu .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JNNFgsGIIS4kDTyu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JNNFgsGIIS4kDTyu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JNNFgsGIIS4kDTyu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JNNFgsGIIS4kDTyu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JNNFgsGIIS4kDTyu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JNNFgsGIIS4kDTyu .marker.cross{stroke:#333333;}#mermaid-svg-JNNFgsGIIS4kDTyu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JNNFgsGIIS4kDTyu .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu .cluster-label text{fill:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu .cluster-label span{color:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu .label text,#mermaid-svg-JNNFgsGIIS4kDTyu span{fill:#333;color:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu .node rect,#mermaid-svg-JNNFgsGIIS4kDTyu .node circle,#mermaid-svg-JNNFgsGIIS4kDTyu .node ellipse,#mermaid-svg-JNNFgsGIIS4kDTyu .node polygon,#mermaid-svg-JNNFgsGIIS4kDTyu .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JNNFgsGIIS4kDTyu .node .label{text-align:center;}#mermaid-svg-JNNFgsGIIS4kDTyu .node.clickable{cursor:pointer;}#mermaid-svg-JNNFgsGIIS4kDTyu .arrowheadPath{fill:#333333;}#mermaid-svg-JNNFgsGIIS4kDTyu .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-JNNFgsGIIS4kDTyu .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-JNNFgsGIIS4kDTyu .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-JNNFgsGIIS4kDTyu .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-JNNFgsGIIS4kDTyu .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-JNNFgsGIIS4kDTyu .cluster text{fill:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu .cluster span{color:#333;}#mermaid-svg-JNNFgsGIIS4kDTyu 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-JNNFgsGIIS4kDTyu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
调整长度
可以通过调整破折号的数量调整长度
flowchart LR
A --> B
A ---> C
A ----> D
#mermaid-svg-jz6myYzhYI3gIRjE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-jz6myYzhYI3gIRjE .error-icon{fill:#552222;}#mermaid-svg-jz6myYzhYI3gIRjE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jz6myYzhYI3gIRjE .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-jz6myYzhYI3gIRjE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jz6myYzhYI3gIRjE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jz6myYzhYI3gIRjE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jz6myYzhYI3gIRjE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jz6myYzhYI3gIRjE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jz6myYzhYI3gIRjE .marker.cross{stroke:#333333;}#mermaid-svg-jz6myYzhYI3gIRjE svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jz6myYzhYI3gIRjE .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-jz6myYzhYI3gIRjE .cluster-label text{fill:#333;}#mermaid-svg-jz6myYzhYI3gIRjE .cluster-label span{color:#333;}#mermaid-svg-jz6myYzhYI3gIRjE .label text,#mermaid-svg-jz6myYzhYI3gIRjE span{fill:#333;color:#333;}#mermaid-svg-jz6myYzhYI3gIRjE .node rect,#mermaid-svg-jz6myYzhYI3gIRjE .node circle,#mermaid-svg-jz6myYzhYI3gIRjE .node ellipse,#mermaid-svg-jz6myYzhYI3gIRjE .node polygon,#mermaid-svg-jz6myYzhYI3gIRjE .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jz6myYzhYI3gIRjE .node .label{text-align:center;}#mermaid-svg-jz6myYzhYI3gIRjE .node.clickable{cursor:pointer;}#mermaid-svg-jz6myYzhYI3gIRjE .arrowheadPath{fill:#333333;}#mermaid-svg-jz6myYzhYI3gIRjE .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-jz6myYzhYI3gIRjE .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-jz6myYzhYI3gIRjE .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-jz6myYzhYI3gIRjE .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-jz6myYzhYI3gIRjE .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-jz6myYzhYI3gIRjE .cluster text{fill:#333;}#mermaid-svg-jz6myYzhYI3gIRjE .cluster span{color:#333;}#mermaid-svg-jz6myYzhYI3gIRjE 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-jz6myYzhYI3gIRjE :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
其他线形的长度调整方法如下
For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table:
| Length | 1 | 2 | 3 |
|---|---|---|---|
| Normal 实线 |
---
|
----
|
-----
|
| Normal with arrow 实线（带箭头） |
-->
|
--->
|
---->
|
| Thick 粗线 |
===
|
====
|
=====
|
| Thick with arrow 粗线（带箭头） |
==>
|
===>
|
====>
|
| Dotted 虚线 |
-.-
|
-..-
|
-...-
|
| Dotted with arrow 虚线（带箭头） |
-.->
|
-..->
|
-...->
|
流程图方向 Flowchart Orientation
标志了流程图的朝向，可能的朝向代号如下(朝向代号严格区分大小写)
Possible FlowChart orientations are:
- TB - top to bottom（从上到下）
- TD - top-down/ same as top to bottom（从上到下）
- BT - bottom to top（从下到上）
- RL - right to left（从右到左）
- LR - left to right（从左到右）
举例RL（从左到右）
flowchart RL
A --> B
#mermaid-svg-cPdvLNQY05vMLixI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cPdvLNQY05vMLixI .error-icon{fill:#552222;}#mermaid-svg-cPdvLNQY05vMLixI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-cPdvLNQY05vMLixI .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-cPdvLNQY05vMLixI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-cPdvLNQY05vMLixI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-cPdvLNQY05vMLixI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-cPdvLNQY05vMLixI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-cPdvLNQY05vMLixI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-cPdvLNQY05vMLixI .marker.cross{stroke:#333333;}#mermaid-svg-cPdvLNQY05vMLixI svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-cPdvLNQY05vMLixI .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-cPdvLNQY05vMLixI .cluster-label text{fill:#333;}#mermaid-svg-cPdvLNQY05vMLixI .cluster-label span{color:#333;}#mermaid-svg-cPdvLNQY05vMLixI .label text,#mermaid-svg-cPdvLNQY05vMLixI span{fill:#333;color:#333;}#mermaid-svg-cPdvLNQY05vMLixI .node rect,#mermaid-svg-cPdvLNQY05vMLixI .node circle,#mermaid-svg-cPdvLNQY05vMLixI .node ellipse,#mermaid-svg-cPdvLNQY05vMLixI .node polygon,#mermaid-svg-cPdvLNQY05vMLixI .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-cPdvLNQY05vMLixI .node .label{text-align:center;}#mermaid-svg-cPdvLNQY05vMLixI .node.clickable{cursor:pointer;}#mermaid-svg-cPdvLNQY05vMLixI .arrowheadPath{fill:#333333;}#mermaid-svg-cPdvLNQY05vMLixI .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-cPdvLNQY05vMLixI .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-cPdvLNQY05vMLixI .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-cPdvLNQY05vMLixI .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-cPdvLNQY05vMLixI .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-cPdvLNQY05vMLixI .cluster text{fill:#333;}#mermaid-svg-cPdvLNQY05vMLixI .cluster span{color:#333;}#mermaid-svg-cPdvLNQY05vMLixI 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-cPdvLNQY05vMLixI :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点合并
几个节点可以通过与运算符&来合并指向，例如
flowchart LR
起床 --> 刷牙 & 看手机 --> 上厕所
#mermaid-svg-moqzOMNtHyr811BL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-moqzOMNtHyr811BL .error-icon{fill:#552222;}#mermaid-svg-moqzOMNtHyr811BL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-moqzOMNtHyr811BL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-moqzOMNtHyr811BL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-moqzOMNtHyr811BL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-moqzOMNtHyr811BL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-moqzOMNtHyr811BL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-moqzOMNtHyr811BL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-moqzOMNtHyr811BL .marker.cross{stroke:#333333;}#mermaid-svg-moqzOMNtHyr811BL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-moqzOMNtHyr811BL .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-moqzOMNtHyr811BL .cluster-label text{fill:#333;}#mermaid-svg-moqzOMNtHyr811BL .cluster-label span{color:#333;}#mermaid-svg-moqzOMNtHyr811BL .label text,#mermaid-svg-moqzOMNtHyr811BL span{fill:#333;color:#333;}#mermaid-svg-moqzOMNtHyr811BL .node rect,#mermaid-svg-moqzOMNtHyr811BL .node circle,#mermaid-svg-moqzOMNtHyr811BL .node ellipse,#mermaid-svg-moqzOMNtHyr811BL .node polygon,#mermaid-svg-moqzOMNtHyr811BL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-moqzOMNtHyr811BL .node .label{text-align:center;}#mermaid-svg-moqzOMNtHyr811BL .node.clickable{cursor:pointer;}#mermaid-svg-moqzOMNtHyr811BL .arrowheadPath{fill:#333333;}#mermaid-svg-moqzOMNtHyr811BL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-moqzOMNtHyr811BL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-moqzOMNtHyr811BL .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-moqzOMNtHyr811BL .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-moqzOMNtHyr811BL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-moqzOMNtHyr811BL .cluster text{fill:#333;}#mermaid-svg-moqzOMNtHyr811BL .cluster span{color:#333;}#mermaid-svg-moqzOMNtHyr811BL 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-moqzOMNtHyr811BL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
以上也可以不使用与运算符来完成，例如：
flowchart LR
起床 --> 刷牙
起床 --> 看手机
刷牙 --> 上厕所
看手机 --> 上厕所
#mermaid-svg-iJU5u8F2PBhoAZph {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-iJU5u8F2PBhoAZph .error-icon{fill:#552222;}#mermaid-svg-iJU5u8F2PBhoAZph .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-iJU5u8F2PBhoAZph .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-iJU5u8F2PBhoAZph .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-iJU5u8F2PBhoAZph .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-iJU5u8F2PBhoAZph .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-iJU5u8F2PBhoAZph .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-iJU5u8F2PBhoAZph .marker{fill:#333333;stroke:#333333;}#mermaid-svg-iJU5u8F2PBhoAZph .marker.cross{stroke:#333333;}#mermaid-svg-iJU5u8F2PBhoAZph svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-iJU5u8F2PBhoAZph .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-iJU5u8F2PBhoAZph .cluster-label text{fill:#333;}#mermaid-svg-iJU5u8F2PBhoAZph .cluster-label span{color:#333;}#mermaid-svg-iJU5u8F2PBhoAZph .label text,#mermaid-svg-iJU5u8F2PBhoAZph span{fill:#333;color:#333;}#mermaid-svg-iJU5u8F2PBhoAZph .node rect,#mermaid-svg-iJU5u8F2PBhoAZph .node circle,#mermaid-svg-iJU5u8F2PBhoAZph .node ellipse,#mermaid-svg-iJU5u8F2PBhoAZph .node polygon,#mermaid-svg-iJU5u8F2PBhoAZph .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iJU5u8F2PBhoAZph .node .label{text-align:center;}#mermaid-svg-iJU5u8F2PBhoAZph .node.clickable{cursor:pointer;}#mermaid-svg-iJU5u8F2PBhoAZph .arrowheadPath{fill:#333333;}#mermaid-svg-iJU5u8F2PBhoAZph .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-iJU5u8F2PBhoAZph .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-iJU5u8F2PBhoAZph .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-iJU5u8F2PBhoAZph .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-iJU5u8F2PBhoAZph .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-iJU5u8F2PBhoAZph .cluster text{fill:#333;}#mermaid-svg-iJU5u8F2PBhoAZph .cluster span{color:#333;}#mermaid-svg-iJU5u8F2PBhoAZph 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-iJU5u8F2PBhoAZph :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
可以看出与运算符在这里的使用旨在简化
子图 subgraph
通过subgraph 和 end 来标记一块子图，举例如下
flowchart LR
水井 -- 水 --> 给人喝 & 饮料厂subgraph 做饮料其他原料 --> 饮料厂饮料厂 --> 饮料end
#mermaid-svg-9LEnaYxiwI1QsoHP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP .error-icon{fill:#552222;}#mermaid-svg-9LEnaYxiwI1QsoHP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9LEnaYxiwI1QsoHP .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9LEnaYxiwI1QsoHP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9LEnaYxiwI1QsoHP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9LEnaYxiwI1QsoHP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9LEnaYxiwI1QsoHP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9LEnaYxiwI1QsoHP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9LEnaYxiwI1QsoHP .marker.cross{stroke:#333333;}#mermaid-svg-9LEnaYxiwI1QsoHP svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9LEnaYxiwI1QsoHP .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP .cluster-label text{fill:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP .cluster-label span{color:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP .label text,#mermaid-svg-9LEnaYxiwI1QsoHP span{fill:#333;color:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP .node rect,#mermaid-svg-9LEnaYxiwI1QsoHP .node circle,#mermaid-svg-9LEnaYxiwI1QsoHP .node ellipse,#mermaid-svg-9LEnaYxiwI1QsoHP .node polygon,#mermaid-svg-9LEnaYxiwI1QsoHP .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9LEnaYxiwI1QsoHP .node .label{text-align:center;}#mermaid-svg-9LEnaYxiwI1QsoHP .node.clickable{cursor:pointer;}#mermaid-svg-9LEnaYxiwI1QsoHP .arrowheadPath{fill:#333333;}#mermaid-svg-9LEnaYxiwI1QsoHP .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9LEnaYxiwI1QsoHP .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9LEnaYxiwI1QsoHP .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9LEnaYxiwI1QsoHP .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9LEnaYxiwI1QsoHP .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9LEnaYxiwI1QsoHP .cluster text{fill:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP .cluster span{color:#333;}#mermaid-svg-9LEnaYxiwI1QsoHP 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-9LEnaYxiwI1QsoHP :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
也可以将子表的名称和显示名称分开，另外，子表本身也可以作为一个单位被指向或者指向别的单位
flowchart LR
a --> b
a --> d
d --> subgraph1
subgraph1 --> subgraph2subgraph subgraph2[two]d --> fendsubgraph subgraph1[one]b --> cend
#mermaid-svg-aCKVsAmN2BpGCWYl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl .error-icon{fill:#552222;}#mermaid-svg-aCKVsAmN2BpGCWYl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-aCKVsAmN2BpGCWYl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-aCKVsAmN2BpGCWYl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-aCKVsAmN2BpGCWYl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-aCKVsAmN2BpGCWYl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-aCKVsAmN2BpGCWYl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-aCKVsAmN2BpGCWYl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-aCKVsAmN2BpGCWYl .marker.cross{stroke:#333333;}#mermaid-svg-aCKVsAmN2BpGCWYl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-aCKVsAmN2BpGCWYl .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl .cluster-label text{fill:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl .cluster-label span{color:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl .label text,#mermaid-svg-aCKVsAmN2BpGCWYl span{fill:#333;color:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl .node rect,#mermaid-svg-aCKVsAmN2BpGCWYl .node circle,#mermaid-svg-aCKVsAmN2BpGCWYl .node ellipse,#mermaid-svg-aCKVsAmN2BpGCWYl .node polygon,#mermaid-svg-aCKVsAmN2BpGCWYl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-aCKVsAmN2BpGCWYl .node .label{text-align:center;}#mermaid-svg-aCKVsAmN2BpGCWYl .node.clickable{cursor:pointer;}#mermaid-svg-aCKVsAmN2BpGCWYl .arrowheadPath{fill:#333333;}#mermaid-svg-aCKVsAmN2BpGCWYl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-aCKVsAmN2BpGCWYl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-aCKVsAmN2BpGCWYl .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-aCKVsAmN2BpGCWYl .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-aCKVsAmN2BpGCWYl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-aCKVsAmN2BpGCWYl .cluster text{fill:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl .cluster span{color:#333;}#mermaid-svg-aCKVsAmN2BpGCWYl 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-aCKVsAmN2BpGCWYl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
子图的方向可以单独规定，此为后续版本更新，8.8.3不适用
flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2
理论应为如下形状
样式 styling
节点样式 styling for nodes
可以这样单独定义节点样式
flowchart LRid1(Start)-->id2(Stop)style id1 fill:#f9f, stroke:#333, stroke-width:4pxstyle id2 fill:#bbf, stroke:#f66, stroke-width:2px, color:#fff, stroke-dasharray: 5 5#mermaid-svg-yGqXa4kLQLbuAgdd {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd .error-icon{fill:#552222;}#mermaid-svg-yGqXa4kLQLbuAgdd .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-yGqXa4kLQLbuAgdd .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-yGqXa4kLQLbuAgdd .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-yGqXa4kLQLbuAgdd .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-yGqXa4kLQLbuAgdd .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-yGqXa4kLQLbuAgdd .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-yGqXa4kLQLbuAgdd .marker{fill:#333333;stroke:#333333;}#mermaid-svg-yGqXa4kLQLbuAgdd .marker.cross{stroke:#333333;}#mermaid-svg-yGqXa4kLQLbuAgdd svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-yGqXa4kLQLbuAgdd .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd .cluster-label text{fill:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd .cluster-label span{color:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd .label text,#mermaid-svg-yGqXa4kLQLbuAgdd span{fill:#333;color:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd .node rect,#mermaid-svg-yGqXa4kLQLbuAgdd .node circle,#mermaid-svg-yGqXa4kLQLbuAgdd .node ellipse,#mermaid-svg-yGqXa4kLQLbuAgdd .node polygon,#mermaid-svg-yGqXa4kLQLbuAgdd .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yGqXa4kLQLbuAgdd .node .label{text-align:center;}#mermaid-svg-yGqXa4kLQLbuAgdd .node.clickable{cursor:pointer;}#mermaid-svg-yGqXa4kLQLbuAgdd .arrowheadPath{fill:#333333;}#mermaid-svg-yGqXa4kLQLbuAgdd .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-yGqXa4kLQLbuAgdd .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-yGqXa4kLQLbuAgdd .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-yGqXa4kLQLbuAgdd .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-yGqXa4kLQLbuAgdd .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-yGqXa4kLQLbuAgdd .cluster text{fill:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd .cluster span{color:#333;}#mermaid-svg-yGqXa4kLQLbuAgdd 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-yGqXa4kLQLbuAgdd :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
也可以预先定义节点样式
flowchart TDA(样式1):::class_one --> B ==> c(也是样式1):::class_one%% 样式单独定义classDef class_one fill:#f96, stroke:111, stroke-width:3px
#mermaid-svg-opOtM7QfDgYqr0O3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 .error-icon{fill:#552222;}#mermaid-svg-opOtM7QfDgYqr0O3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-opOtM7QfDgYqr0O3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-opOtM7QfDgYqr0O3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-opOtM7QfDgYqr0O3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-opOtM7QfDgYqr0O3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-opOtM7QfDgYqr0O3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-opOtM7QfDgYqr0O3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-opOtM7QfDgYqr0O3 .marker.cross{stroke:#333333;}#mermaid-svg-opOtM7QfDgYqr0O3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-opOtM7QfDgYqr0O3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 .cluster-label text{fill:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 .cluster-label span{color:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 .label text,#mermaid-svg-opOtM7QfDgYqr0O3 span{fill:#333;color:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 .node rect,#mermaid-svg-opOtM7QfDgYqr0O3 .node circle,#mermaid-svg-opOtM7QfDgYqr0O3 .node ellipse,#mermaid-svg-opOtM7QfDgYqr0O3 .node polygon,#mermaid-svg-opOtM7QfDgYqr0O3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-opOtM7QfDgYqr0O3 .node .label{text-align:center;}#mermaid-svg-opOtM7QfDgYqr0O3 .node.clickable{cursor:pointer;}#mermaid-svg-opOtM7QfDgYqr0O3 .arrowheadPath{fill:#333333;}#mermaid-svg-opOtM7QfDgYqr0O3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-opOtM7QfDgYqr0O3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-opOtM7QfDgYqr0O3 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-opOtM7QfDgYqr0O3 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-opOtM7QfDgYqr0O3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-opOtM7QfDgYqr0O3 .cluster text{fill:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 .cluster span{color:#333;}#mermaid-svg-opOtM7QfDgYqr0O3 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-opOtM7QfDgYqr0O3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-opOtM7QfDgYqr0O3 .class_one>*{fill:#f96!important;stroke:111!important;stroke-width:3px!important;}#mermaid-svg-opOtM7QfDgYqr0O3 .class_one span{fill:#f96!important;stroke:111!important;stroke-width:3px!important;}
相关连接
其他教程链接：
【Mermaid 语法详细教程 02】时序图 SequenceDiagram_NoEatMe的博客-CSDN博客
主要参考资料：
About Mermaid | Mermaid
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）相关推荐
- 环信WebIM 超详细教程01：点对点单聊
环信WebIM 超详细教程01:点对点单聊 第一个单聊(点对点)Demo 前言 一,准备工作:注册->登录->创建应用->创建应用用户 二,搭建工程,实现简单的单聊(点对点)功能 三 ...
- 手把手教你搭建Pytest+Allure2.X环境详细教程 - 01
缺陷聚集的位置,执行时间表的外观以及许多其他方便的事情.魅力的模块化和可扩展性确保您始终可以微调某些东西,以使魅力更适合您. 一睹Allure风采 在展开Allure详述前,先上一份测试报告,报告主要 ...
- Mermaid语法绘制图表
Typora 在画图方面的小技巧Mermaid,Mermaid是一种简单的类似 Markdown 的脚本语言,通过 JavaScript 编程语言,将文本转换为图片,支持绘制非常多种类的图,常见的有时 ...
- Markdown 里 mermaid 流程图(flowchart)教程
作者: Jintao 日期:2021-7-12 简介: 未完待续 Markdown 里 mermaid 流程图flowchart教程 前言: 1.0 流程图的方向 TD LR BT RL 2.0 节点 ...
- markdown 流程图js_在Markdown中用mermaid语法绘制图表
Python数据挖掘与文本分析&Stata应用能力提升与实证前沿云特训~ Mermaid可以用文本方式绘制图表和流程图,相比Visio而言更加的轻量便捷,此外Markdown内部支持Merma ...
- NLog详细教程-2022/12/01
这里写目录标题 NLog详细教程 NLog的具体介绍,功能,优点等网上一大推,就不具体介绍了,主要说怎么安装使用 安装 需要安装NuGet包. 初级使用 配置文件编写 NLog配置原理 NLog配置文 ...
- mermaid流程图工具_基于 Mermaid 的时序图、流程图和甘特图
简介 Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生 ...
- linux es数据库 head,centos7安装Elasticsearch及Es-head插件详细教程(图文)
懒惰了很久,今天来写一下Elasticsearch在centos7上安装教程以及安装过程中可能出现的报错解决方式,有不对的地方,烦请各位看官多多指教! 一.ES安装 1.环境检查 确保有java环境, ...
- Markdown 入门及语法详细指南 ★
文章目录 Markdown 简介 Markdown 编辑工具 1. 平台集成 2. 独立软件 3. 插件拓展 Markdown 基本语法 快捷键 1. 标题 2. 文本 3. 列表 4. 引用 5. ...
最新文章
- Linux目录结构 Linux分区、挂载点
- 计算机网络-信道的极限容量
- python中keyboardinterrupt_如何防止代码块在Python中被KeyboardInterrupt中断？
- OA项目实战（二） 开发准备
- P4309-[TJOI2013]最长上升子序列【Splay】
- 重新学习Ubuntu -- 截图软件的选择和安装
- lte核心网由哪些设备组成_电气设备安装工程由哪些部分组成？
- webkit-box translate 的组合--流畅的滑动体验
- AndroidStudio安卓原生开发_UI高级_StateListDrawable状态选择器_按钮按下和抬起显示不同颜色---Android原生开发工作笔记124
- 互联网公司的黑话，你都经历过吗？
- 大繁至简，首度揭秘阿里云飞天洛神系统
- 日语语音识别_日语语音识别软件_日语语音识别在线 - 云+社区 - 腾讯云
- 用Python做一只真·多足机器人，钢铁蜈蚣能弯曲还能蠕动
- python 面向对象 搬家具实例
- 朴灵和阮一峰吵架的代码
- shopify上传商品价格怎么改美元美金$
- 飞书开放平台Java-Sdk
- DEPICT实现基因优化（gene prioritization）、gene set富集分析（geneset enrichment）、组织富集分析（tissue enrichment）...
- 网络硬盘 excel服务器,Excel Server Tutorial
- cdr文字内容显示不出来_电脑装的字体cdr里面不显示怎么办