流程图 (Flowcharts/Graphs)是由节点 (几何形状) 和连接线 (箭头或线条)组成的. Mermaid
代码定义了节点和连线的编码方式,并支持不同的箭头类型、多向箭头以及子图之间的任意链接。
警告 如果在流程图 的节点使用`end`,请将整个单词是大写进行书写或者任意字母使用大写进行书写。 (例如, "End" 或 "END"), 或者使用例子的方案。在流程图 中键入`end`(所有字母小写)将会破坏流程图 。
节点(默认)
代码:
```mermaid flowchart LR 序号 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-序号-733" transform="translate(31.5, 28.5)">
序号
```mermaid graph LR 序号 ```
flowchart-序号-735" transform="translate(34,31)" style="opacity: 1;">
序号
带有文本的节点
你也可以在文本框中设置与序号
不同的文本。如果对统一文本框进行多次设置,将使用最后一次的设置。此外,如果后面有为节点定义连线,可以省略文本定义。渲染文本框时将使用先前定义。
代码:
```mermaid flowchart LR id1[文本框中的文本] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-737" transform="translate(71.5, 28.5)">
文本框中的文本
```mermaid graph LR id1[文本框中的文本] ```
flowchart-id1-739" transform="translate(74,31)" style="opacity: 1;">
文本框中的文本
Unicode文本
使用"
将Unicode文本括起来。
代码:
```mermaid flowchart LR id[“❤是Unicode字符”] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id-741" transform="translate(76.1875, 28.5)">
❤是Unicode字符
```mermaid graph LR id[“❤是Unicode字符”] ```
flowchart-id-743" transform="translate(78.6875,31)" style="opacity: 1;">
❤是Unicode字符
使用双引号和反引号将 “` text `” 标记文本括起来。
代码:
```mermaid %%{init: {“flowchart ”: {“htmlLabels”: false}} }%% flowchart LR markdown[“`这 **是** Markdown `”] newLines[“`第1行 第2行 2 第3行 3`”] markdown --> newLines ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-markdown LE-newLines" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-markdown-748" transform="translate(100.953125, 41)">
`这 **是** _Markdown _`
flowchart-newLines-749" transform="translate(282.90625, 41)">
`第1行
第2行 2
第3行 3`
```mermaid %%{init: {“graph ”: {“htmlLabels”: false}} }%% graph LR markdown[“`这 **是** Markdown `”] newLines[“`第1行 第2行 2 第3行 3`”] markdown --> newLines ```
flowchart-markdown-756" transform="translate(103.453125,31)" style="opacity: 1;">
flowchart-newLines-757" transform="translate(345.9140625,31)">
`第1行 第2行 2 第3行 3`
方向
此语句声明了流程图 的方向。
(TD/TB)表示流程图 的方向是从上到下的方向。
代码:
```mermaid flowchart TD 开始–> 停止 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-开始 LE-停止" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-开始-762" transform="translate(31.5, 28.5)">
开始
flowchart-停止-763" transform="translate(31.5, 119.5)">
停止
```mermaid graph TD 开始–> 停止 ```
flowchart-开始-766" transform="translate(34,31)" style="opacity: 1;">
开始
flowchart-停止-767" transform="translate(34,127)">
停止
(LR)表示流程图 的方向是从左到右的方向。
代码:
```mermaid flowchart LR 开始 --> 停止 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-开始 LE-停止" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-开始-770" transform="translate(31.5, 28.5)">
开始
flowchart-停止-771" transform="translate(128.5, 28.5)">
停止
```mermaid graph LR 开始 --> 停止 ```
flowchart-开始-774" transform="translate(34,31)" style="opacity: 1;">
开始
flowchart-停止-775" transform="translate(136,31)">
停止
可以使用的方向定义如下: TB - 从上到下 Top->Bottom TD - 从上到下 Top->Down BT - 从下到上 Bottom->Top RL - 从右到左 Right->Left LR - 从左到右 Left->Right
节点形状
圆形节点
代码:
```mermaid flowchart LR id1(文本框中的文本) ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-777" transform="translate(71.5, 28.5)">
文本框中的文本
```mermaid graph LR id1(文本框中的文本) ```
flowchart-id1-779" transform="translate(74,31)" style="opacity: 1;">
文本框中的文本
体育场形状的节点
代码:
```mermaid flowchart LR id1([文本框中的文本]) ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-781" transform="translate(76.625, 28.5)">
文本框中的文本
```mermaid graph LR id1([文本框中的文本]) ```
flowchart-id1-783" transform="translate(79.75,31)" style="opacity: 1;">
文本框中的文本
子例程形状中的节点
代码:
```mermaid flowchart LR id1[[文本框中的文本]] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-785" transform="translate(79.5, 28.5)">
文本框中的文本
```mermaid graph LR id1[[文本框中的文本]] ```
flowchart-id1-787" transform="translate(82,31)" style="opacity: 1;">
文本框中的文本
圆柱形节点
代码:
```mermaid flowchart LR id1[(数据库)] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-789" transform="translate(39.5, 41.06648635864258)">
数据库
```mermaid graph LR id1[(数据库)] ```
flowchart-id1-791" transform="translate(42,44.212432861328125)" style="opacity: 1;">
数据库
圆形节点
代码:
```mermaid flowchart LR id1((圆形文本框中的文本)) ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-793" transform="translate(87.5, 87.5)">
圆形文本框中的文本
```mermaid graph LR id1((圆形文本框中的文本)) ```
flowchart-id1-795" transform="translate(90,90)" style="opacity: 1;">
圆形文本框中的文本
不对称形状的节点
代码:
```mermaid flowchart LR id1>文本框中的文本] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-797" transform="translate(92, 28.5)">
文本框中的文本
```mermaid graph LR id1>文本框中的文本] ```
flowchart-id1-799" transform="translate(85.5,31)" style="opacity: 1;">
文本框中的文本
菱形节点
代码:
```mermaid flowchart LR id1{文本框中的文本} ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-801" transform="translate(92, 92)">
文本框中的文本
```mermaid graph LR id1{文本框中的文本} ```
flowchart-id1-803" transform="translate(88.0999984741211,88.0999984741211)" style="opacity: 1;">
文本框中的文本
六边形节点
代码:
```mermaid flowchart LR id1{{文本框中的文本}} ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-805" transform="translate(81.75, 28.5)">
文本框中的文本
```mermaid graph LR id1{{文本框中的文本}} ```
flowchart-id1-807" transform="translate(85.5,31)" style="opacity: 1;">
文本框中的文本
平行四边形节点
代码:
```mermaid flowchart TD id1[/文本框中的文本/] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-809" transform="translate(85.16667175292969, 28.5)">
文本框中的文本
```mermaid graph TD id1[/文本框中的文本/] ```
flowchart-id1-811" transform="translate(89.33332824707031,31)" style="opacity: 1;">
文本框中的文本
(反)平行四边形节点
代码:
```mermaid flowchart TD id1[\文本框中的文本] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-813" transform="translate(78.33332824707031, 28.5)">
文本框中的文本
```mermaid graph TD id1[\文本框中的文本] ```
flowchart-id1-815" transform="translate(81.66667175292969,31)" style="opacity: 1;">
文本框中的文本
梯形节点
代码:
```mermaid flowchart TD A[/春节] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-A-817" transform="translate(45.16666793823242, 28.5)">
春节
```mermaid graph TD A[/春节] ```
flowchart-A-819" transform="translate(49.333335876464844,31)" style="opacity: 1;">
春节
(反)梯形节点
代码:
```mermaid flowchart TD B[\逛街/] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-B-821" transform="translate(45.16666793823242, 28.5)">
逛街
```mermaid graph TD B[\逛街/] ```
flowchart-B-823" transform="translate(49.333335876464844,31)" style="opacity: 1;">
逛街
目前,只有上面这些形状可以使用,但未来肯定不止如此,可能随着后续版本的发布而兼容更多的形状。
双圆形
代码:
```mermaid flowchart TD id1(((圆中文本))) ```
flowchart TD
id1(((圆中文本)))
```mermaid graph TD id1(((圆中文本))) ```
graph TD
id1(((圆中文本)))
节点之间的链接
节点可以通链接线进行连接。可以有不同类型的链接或附加文本字符串的链接。
带箭头的实线链接
代码:
```mermaid flowchart LR A–>B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-826" transform="translate(20.21875, 28.5)">
A
flowchart-B-827" transform="translate(94.46875, 28.5)">
B
```mermaid graph LR A–>B ```
flowchart-A-830" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-831" transform="translate(101.96875,31)">
B
没有箭头的实线链接
代码:
```mermaid flowchart LR A — B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;">
flowchart-A-834" transform="translate(20.21875, 28.5)">
A
flowchart-B-835" transform="translate(94.46875, 28.5)">
B
```mermaid graph LR A — B ```
flowchart-A-838" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-839" transform="translate(101.96875,31)">
B
带文本的实线链接
代码:
```mermaid flowchart LR A-- 文本! —B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;">
文本!
flowchart-A-842" transform="translate(20.21875, 28.5)">
A
flowchart-B-843" transform="translate(132.34375, 28.5)">
B
```mermaid graph LR A-- 文本! —B ```
文本!
flowchart-A-846" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-847" transform="translate(139.84375,31)">
B
或
代码:
```mermaid flowchart LR A—|文本|B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;">
文本
flowchart-A-850" transform="translate(20.21875, 28.5)">
A
flowchart-B-851" transform="translate(126.46875, 28.5)">
B
```mermaid graph LR A—|文本|B ```
文本
flowchart-A-854" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-855" transform="translate(133.96875,31)">
B
带有箭头和文本的链接
代码:
```mermaid flowchart LR A–>|文本|B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
文本
flowchart-A-858" transform="translate(20.21875, 28.5)">
A
flowchart-B-859" transform="translate(126.46875, 28.5)">
B
```mermaid graph LR A–>|文本|B ```
文本
flowchart-A-862" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-863" transform="translate(133.96875,31)">
B
或
代码:
```mermaid flowchart LR A-- 文本 -->B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
文本
flowchart-A-866" transform="translate(20.21875, 28.5)">
A
flowchart-B-867" transform="translate(126.46875, 28.5)">
B
```mermaid graph LR A-- 文本 -->B ```
文本
flowchart-A-870" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-871" transform="translate(133.96875,31)">
B
带箭头的虚线链接
代码:
```mermaid flowchart LR A-.->B; ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;stroke-width:2px;stroke-dasharray:3;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-874" transform="translate(20.21875, 28.5)">
A
flowchart-B-875" transform="translate(94.46875, 28.5)">
B
```mermaid graph LR A-.->B; ```
flowchart-A-878" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-879" transform="translate(101.96875,31)">
B
带箭头和文本的虚线链接
代码:
```mermaid flowchart LR A-. 文本 .-> B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;stroke-width:2px;stroke-dasharray:3;" marker-end="url(#flowchart -pointEnd)">
文本
flowchart-A-882" transform="translate(20.21875, 28.5)">
A
flowchart-B-883" transform="translate(126.46875, 28.5)">
B
```mermaid graph LR A-. 文本 .-> B ```
文本
flowchart-A-886" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-887" transform="translate(133.96875,31)">
B
带箭头的粗实线链接
代码:
```mermaid flowchart LR A ==> B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="stroke-width: 3.5px;fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-890" transform="translate(20.21875, 28.5)">
A
flowchart-B-891" transform="translate(94.46875, 28.5)">
B
```mermaid graph LR A ==> B ```
flowchart-A-894" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-895" transform="translate(101.96875,31)">
B
带箭头和文本的粗实线链接
代码:
```mermaid flowchart LR A == 文本 ==> B ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="stroke-width: 3.5px;fill:none;" marker-end="url(#flowchart -pointEnd)">
文本
flowchart-A-898" transform="translate(20.21875, 28.5)">
A
flowchart-B-899" transform="translate(126.46875, 28.5)">
B
```mermaid graph LR A == 文本 ==> B ```
文本
flowchart-A-902" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-903" transform="translate(133.96875,31)">
B
隐式链接
在某些情况下,如果要强行设置节点的默认位置,可以使用这个隐式链接设置相对于某个节点的位置。
代码:
```mermaid flowchart LR A ~~~ B ```
flowchart LR
A ~~~ B
```mermaid graph LR A ~~~ B ```
graph LR
A ~~~ B
链式链接
可以在同一行中声明多个链接,如下所示:
代码:
```mermaid flowchart LR A – 文本1 --> B – 文本2 --> C ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
文本1
文本2
flowchart-A-911" transform="translate(20.21875, 28.5)">
A
flowchart-B-912" transform="translate(134.859375, 28.5)">
B
flowchart-C-913" transform="translate(249.5703125, 28.5)">
C
```mermaid graph LR A – 文本1 --> B – 文本2 --> C ```
文本1
文本2
flowchart-A-917" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-918" transform="translate(142.359375,31)">
B
flowchart-C-919" transform="translate(262.0703125,31)">
C
还可以在同一行中声明多个节点链接,如下所示:
代码:
```mermaid flowchart LR a --> b & c–> d ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-a LE-b" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-a LE-c" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-b LE-d" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-c LE-d" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-a-924" transform="translate(19.703125, 74)">
a
flowchart-b-925" transform="translate(93.3671875, 28.5)">
b
flowchart-c-926" transform="translate(93.3671875, 119.5)">
c
flowchart-d-927" transform="translate(167.2890625, 74)">
d
```mermaid graph LR a --> b & c–> d ```
flowchart-a-932" transform="translate(22.203125,79)" style="opacity: 1;">
a
flowchart-b-933" transform="translate(100.8671875,31)">
b
flowchart-c-934" transform="translate(100.8671875,127)">
c
flowchart-d-935" transform="translate(179.7890625,79)">
d
你可以使用特殊的表达式描述节点之间的依赖关系。如下面一行代码所表示的关系:
代码:
```mermaid flowchart TB A & B–> C & D ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-A LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-940" transform="translate(30.2890625, 28.5)">
A
flowchart-B-941" transform="translate(104.5390625, 28.5)">
B
flowchart-C-942" transform="translate(20.2890625, 119.5)">
C
flowchart-D-943" transform="translate(114.5390625, 119.5)">
D
```mermaid graph TB A & B–> C & D ```
flowchart-A-948" transform="translate(32.7890625,31)" style="opacity: 1;">
A
flowchart-B-949" transform="translate(112.0390625,31)">
B
flowchart-C-950" transform="translate(22.7890625,127)">
C
flowchart-D-951" transform="translate(122.0390625,127)">
D
若您使用基本语法实现上面这个图表,将需要四行代码。
代码:
```mermaid flowchart TB A --> C A --> D B --> C B --> D ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-A LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-960" transform="translate(30.2890625, 28.5)">
A
flowchart-C-961" transform="translate(20.2890625, 119.5)">
C
flowchart-D-963" transform="translate(114.5390625, 119.5)">
D
flowchart-B-964" transform="translate(104.5390625, 28.5)">
B
```mermaid graph TB A --> C A --> D B --> C B --> D ```
flowchart-A-976" transform="translate(32.7890625,31)" style="opacity: 1;">
A
flowchart-C-977" transform="translate(22.7890625,127)">
C
flowchart-D-979" transform="translate(122.0390625,127)">
D
flowchart-B-980" transform="translate(112.0390625,31)">
B
新的箭头链接
以下是支持的新型箭头:
代码:
```mermaid flowchart LR A --o B B --x C ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -circleEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -crossEnd)">
flowchart-A-988" transform="translate(20.21875, 28.5)">
A
flowchart-B-989" transform="translate(94.46875, 28.5)">
B
flowchart-C-991" transform="translate(168.7890625, 28.5)">
C
```mermaid graph LR A --o B B --x C ```
flowchart-A-996" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-997" transform="translate(101.96875,31)">
B
flowchart-C-999" transform="translate(181.2890625,31)">
C
双向箭头
可以使用双向箭头。
代码:
```mermaid flowchart LR A o–o B B <–> C C x–x D ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-start="url(#flowchart -circleStart)" marker-end="url(#flowchart -circleEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-start="url(#flowchart -pointStart)" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-D" style="fill:none;" marker-start="url(#flowchart -crossStart)" marker-end="url(#flowchart -crossEnd)">
flowchart-A-1006" transform="translate(20.21875, 28.5)">
A
flowchart-B-1007" transform="translate(94.46875, 28.5)">
B
flowchart-C-1009" transform="translate(168.7890625, 28.5)">
C
flowchart-D-1011" transform="translate(243.484375, 28.5)">
D
```mermaid graph LR A o–o B B <–> C C x–x D ```
flowchart-A-1018" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-1019" transform="translate(101.96875,31)">
B
flowchart-C-1021" transform="translate(181.2890625,31)">
C
flowchart-D-1023" transform="translate(260.984375,31)">
D
链接的最小长度
流程图 中的每个节点最终都会根据其链接到的节点分配一个位置然后渲染在流程图 中,即垂直或水平位置(具体取决于流程图 的方向)。默认情况下,链接可以跨越任意数量的列,但您可以通过在链接定义中添加额外的-
短划线来使得任何链接比其他链接更长。
在以下示例中,在从节点B到节点E的链接中添加了两个额外的-
短划线,因此它比常规链接多跨两个列:
代码:
```mermaid flowchart TD A[开始] --> B{是吗?} B -->|是| C[确定] C --> D[重新判断] D --> B B ---->|否| E[结束] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-D LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-E" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
是
否
flowchart-A-1034" transform="translate(90, 28.5)">
开始
flowchart-B-1035" transform="translate(90, 145.9375)">
是吗?
flowchart-C-1037" transform="translate(31.5, 289.375)">
确定
flowchart-D-1039" transform="translate(60.75, 406.375)">
重新判断
flowchart-E-1043" transform="translate(141.25, 497.375)">
结束
```mermaid graph TD A[开始] --> B{是吗?} B -->|是| C[确定] C --> D[重新判断] D --> B B ---->|否| E[结束] ```
是
否
flowchart-A-1054" transform="translate(95,31)" style="opacity: 1;">
开始
flowchart-B-1055" transform="translate(95,150.7437515258789)">
是吗?
flowchart-C-1057" transform="translate(34,296.4875030517578)">
确定
flowchart-D-1059" transform="translate(64.5,418.4875030517578)">
重新判断
flowchart-E-1063" transform="translate(147.5,514.4875030517578)">
结束
注释 渲染引擎仍然可以使链接比请求的列数更长,以适应其他请求
当链接文本写在链接的中间时,必须在链接的右侧添加额外的-
短划线。以达到与上面示例同样的效果:
代码:
```mermaid flowchart TD A[开始] --> B{是吗?} B – 是 --> C[确定] C --> D[重新判断] D --> B B – 否 ----> E[结束] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-D LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-E" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
是
否
flowchart-A-1074" transform="translate(90, 28.5)">
开始
flowchart-B-1075" transform="translate(90, 145.9375)">
是吗?
flowchart-C-1077" transform="translate(31.5, 289.375)">
确定
flowchart-D-1079" transform="translate(60.75, 406.375)">
重新判断
flowchart-E-1083" transform="translate(141.25, 497.375)">
结束
```mermaid graph TD A[开始] --> B{是吗?} B – 是 --> C[确定] C --> D[重新判断] D --> B B – 否 ----> E[结束] ```
是
否
flowchart-A-1094" transform="translate(95,31)" style="opacity: 1;">
开始
flowchart-B-1095" transform="translate(95,150.7437515258789)">
是吗?
flowchart-C-1097" transform="translate(34,296.4875030517578)">
确定
flowchart-D-1099" transform="translate(64.5,418.4875030517578)">
重新判断
flowchart-E-1103" transform="translate(147.5,514.4875030517578)">
结束
对于虚线和粗实线链接,要添加的字符是.
点或=
等号,如下表所示:
长度 1 2 3 实线链接 — ---- ----- 带箭头的实线链接 –> —> ----> 粗实线链接 === ==== ===== 带箭头的粗实线链接 ==> ===> ====> 虚线链接 -.- -…- -…- 带箭头的虚线链接 -.-> -…-> -…->
破坏语法的特殊字符
为了显示特殊的字符,可以将文本书写在引号内。如以下示例所示:
代码:
```mermaid flowchart LR id1["文本框中的 (文本) "] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-id1-1105" transform="translate(79.7890625, 28.5)">
文本框中的 (文本)
```mermaid graph LR id1["文本框中的 (文本) "] ```
flowchart-id1-1107" transform="translate(82.2890625,31)" style="opacity: 1;">
文本框中的 (文本)
实体代码转义特殊字符
可以使用此处示例的语法来表示特殊字符。
代码:
```mermaid flowchart LR A[“双引号:#quot;”] -->B[“欣欣字符:#9829;”] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-1110" transform="translate(45.0390625, 28.5)">
双引号:"
flowchart-B-1111" transform="translate(179.265625, 28.5)">
欣欣字符:♥
```mermaid graph LR A[“双引号:#quot;”] -->B[“欣欣字符:#9829;”] ```
flowchart-A-1114" transform="translate(78.796875,31)" style="opacity: 1;">
双引号:"
flowchart-B-1115" transform="translate(283.078125,31)">
欣欣字符:♥
数字是基于16进制的, 所以 #
可以使用 #35;
编码进行表示。还支持使用HTML字符名称。
子图
subgraph 标题
序列图语句
end
示例如下:
代码:
```mermaid flowchart TB c1–>a2 subgraph 子图一 a1–>a2 end subgraph 子图二 b1–>b2 end subgraph 子图三 c1–>c2 end ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
子图三
子图一
flowchart-link LS-c1 LE-a2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-a1 LE-a2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-c1 LE-c2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-c2-1131" transform="translate(58.65625, 214.5)">
c2
flowchart-c1-1124" transform="translate(68.65625, 88.5)">
c1
子图二
flowchart-link LS-b1 LE-b2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-b2-1129" transform="translate(131.46875, 63.5)">
b2
flowchart-b1-1128" transform="translate(49.15625, 63.5)">
b1
flowchart-a2-1125" transform="translate(404.8359375, 214.5)">
a2
flowchart-a1-1126" transform="translate(404.8359375, 88.5)">
a1
```mermaid graph TB c1–>a2 subgraph 子图一 a1–>a2 end subgraph 子图二 b1–>b2 end subgraph 子图三 c1–>c2 end ```
flowchart-子图三-1151" transform="translate(66.15625,104)" style="opacity: 1;">
子图三
flowchart-子图二-1152" style="opacity: 1;" transform="translate(197.96875,104)">
子图二
flowchart-子图一-1153" style="opacity: 1;" transform="translate(325.0234375,104)">
子图一
flowchart-c2-1150" transform="translate(61.15625,152)" style="opacity: 1;">
c2
flowchart-c1-1143" transform="translate(71.15625,56)">
c1
flowchart-b2-1148" transform="translate(197.96875,152)">
b2
flowchart-b1-1147" transform="translate(197.96875,56)">
b1
flowchart-a2-1144" transform="translate(325.0234375,152)">
a2
flowchart-a1-1145" transform="translate(325.0234375,56)">
a1
也可以为子图设置显式id。
代码:
```mermaid flowchart TB c1–>a2 subgraph ide1 [子图一] a1–>a2 end ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
子图一
flowchart-link LS-c1 LE-a2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-a1 LE-a2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-a2-1159" transform="translate(125.2109375, 144.5)">
a2
flowchart-a1-1160" transform="translate(135.2109375, 53.5)">
a1
flowchart-c1-1158" transform="translate(23.65625, 53.5)">
c1
```mermaid graph TB c1–>a2 subgraph ide1 [子图一] a1–>a2 end ```
flowchart-ide1-1171" transform="translate(137.7109375,104)" style="opacity: 1;">
子图一
flowchart-a2-1168" transform="translate(132.7109375,152)" style="opacity: 1;">
a2
flowchart-a1-1169" transform="translate(142.7109375,56)">
a1
flowchart-c1-1167" transform="translate(26.15625,56)">
c1
多个子流程
使用flowchart 的流程图 时,你可以设置子图与子图之间的链接、子图与节点的链接,如下图所示:
代码:
```mermaid flowchart TB c1–>a2 subgraph 子图一 a1–>a2 end subgraph 子图二 b1–>b2 end subgraph 子图三 c1–>c2 end 子图一 --> 子图二 子图三 --> 子图二 子图二 --> c2 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
子图三
子图一
flowchart-link LS-c1 LE-a2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-a1 LE-a2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-c1 LE-c2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-子图一 LE-子图二" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-子图三 LE-子图二" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-子图二 LE-c2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-c2-1193" transform="translate(195.125, 144.5)">
c2
flowchart-c1-1186" transform="translate(185.125, 53.5)">
c1
子图二
flowchart-link LS-b1 LE-b2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-b2-1191" transform="translate(131.46875, 63.5)">
b2
flowchart-b1-1190" transform="translate(49.15625, 63.5)">
b1
flowchart-a2-1187" transform="translate(58.8984375, 144.5)">
a2
flowchart-a1-1188" transform="translate(58.8984375, 53.5)">
a1
```mermaid graph TB c1–>a2 subgraph 子图一 a1–>a2 end subgraph 子图二 b1–>b2 end subgraph 子图三 c1–>c2 end 子图一 --> 子图二 子图三 --> 子图二 子图二 --> c2 ```
graph TB
c1-->a2
subgraph 子图一
a1-->a2
end
subgraph 子图二
b1-->b2
end
subgraph 子图三
c1-->c2
end
子图一 --> 子图二
子图三 --> 子图二
子图二 --> c2
子图的方向
您可以使用direction
语句来设置子图在本例中呈现的方向。
代码:
```mermaid flowchart LR subgraph 子图一 direction TB subgraph 子图一一 direction RL i1 -->f1 end subgraph 子图一二 direction BT i2 -->f2 end end A --> 子图一 --> B 子图一一 --> 子图一二 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-子图一" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-子图一 LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
子图一
flowchart-link LS-子图一一 LE-子图一二" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
子图一一
flowchart-link LS-i1 LE-f1" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-f1-1244" transform="translate(47.65625, 63.5)">
f1
flowchart-i1-1243" transform="translate(126.2890625, 63.5)">
i1
子图一二
flowchart-link LS-i2 LE-f2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-f2-1246" transform="translate(57.65625, 53.5)">
f2
flowchart-i2-1245" transform="translate(57.65625, 144.5)">
i2
flowchart-A-1247" transform="translate(20.21875, 204.5)">
A
flowchart-B-1249" transform="translate(371.734375, 204.5)">
B
```mermaid graph LR subgraph 子图一 direction TB subgraph 子图一一 direction RL i1 -->f1 end subgraph 子图一二 direction BT i2 -->f2 end end A --> 子图一 --> B 子图一一 --> 子图一二 ```
graph LR
subgraph 子图一
direction TB
subgraph 子图一一
direction RL
i1 -->f1
end
subgraph 子图一二
direction BT
i2 -->f2
end
end
A --> 子图一 --> B
子图一一 --> 子图一二
“Markdown 字符串”功能通过提供更通用的字符串类型来增强流程图 和思维导图,该字符串类型支持粗体和斜体等文本格式选项,并自动将文本包装在标签中。
代码:
```mermaid %%{init: {“flowchart ”: {“htmlLabels”: false}} }%% flowchart LR subgraph “子图1” a(“`戴帽子的 **猫**`”) – “链接标签” --> b{{“`猪身上的 **狗**`”}} end subgraph “`**子图2**`” c(“`戴帽子的 **猫**`”) – “`加粗 **链接标签**`” --> d(“猪身上的狗”) end ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
`**子图2**`
flowchart-link LS-c LE-d" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
`加粗 **链接标签**`
flowchart-d-1283" transform="translate(113.0546875, 153)">
猪身上的狗
flowchart-c-1282" transform="translate(113.0546875, 50)">
`戴帽子的 **猫**`
子图1
flowchart-link LS-a LE-b" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
链接标签
flowchart-b-1281" transform="translate(121.5546875, 153)">
`猪身上的 **狗**`
flowchart-a-1280" transform="translate(121.5546875, 50)">
`戴帽子的 **猫**`
```mermaid %%{init: {“graph ”: {“htmlLabels”: false}} }%% graph LR subgraph “子图1” a(“`戴帽子的 **猫**`”) – “链接标签” --> b{{“`猪身上的 **狗**`”}} end subgraph “`**子图2**`” c(“`戴帽子的 **猫**`”) – “`加粗 **链接标签**`” --> d(“猪身上的狗”) end ```
flowchart-`**子图2**`-1294 " transform="translate(285.1640625,66)" style="opacity: 1;">
`**子图2**`
flowchart-子图1-1295" style="opacity: 1;" transform="translate(285.1640625,202)">
子图1
链接标签
`加粗 **链接标签**`
flowchart-d-1293" transform="translate(453.2734375,66)" style="opacity: 1;">
猪身上的狗
flowchart-c-1292" transform="translate(105.5546875,66)">
`戴帽子的 **猫**`
flowchart-b-1291" transform="translate(453.2734375,202)">
`猪身上的 **狗**`
flowchart-a-1290" transform="translate(105.5546875,202)">
`戴帽子的 **猫**`
格式:
如果需要对文本加粗,请在文本的前面和后面分别加上两个星号 (**
)。如果需要使文本倾斜, 请在文本的前面和后面分别加上一个星号 (*
)。如果需要对文本进行多行显示,请在需要换行的位置添加<br>
来达到换行的效果。而且,当文本过长时,Markdown 字符串
会自动换行,并允许您通过使用换行符替代 标签来开始新行。
此功能适用于节点标签、链接标签和子图标签。
交互
可以将点击事件绑定到节点,点击可以通过javascript回调或链接进行跳转,该链接将在新的浏览器选项卡中打开。注意:设置securityLevel='strict'
时禁用此功能,设置securityLevel='loose'
时启用此功能。
click nodeId callback
click nodeId call callback()
nodeId
: 其中 nodeId
是节点的序号
callback
: callback
是在显示图形的页面上定义的javascript
函数的名称,该函数将以nodeId
为参数进行调用。
下面是使用样例:
< script>
const callback = function ( ) {
alert ( '已触发回调!' ) ;
} ;
< / script>
提示文字使用"
双引号包起来。提示文字的样式由.mermaidTooltip
类设置。
代码:
```mermaid flowchart LR A–>B B–>C C–>D click A callback “回调的提示文字” click B “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字” click A call callback() “回调的提示文字” click B href “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字” ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-1302" title="回调的提示文字" transform="translate(20.21875, 28.5)">
A
flowchart -B-1303" title="这是链接的提示文字">
B
flowchart-C-1305" transform="translate(168.7890625, 28.5)">
C
flowchart-D-1307" transform="translate(243.484375, 28.5)">
D
```mermaid graph LR A–>B B–>C C–>D click A callback “回调的提示文字” click B “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字” click A call callback() “回调的提示文字” click B href “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字” ```
flowchart-A-1314" transform="translate(22.71875,31)" style="opacity: 1;" title="回调的提示文字">
A
flowchart-B-1315" transform="translate(101.96875,31)" title="这是链接的提示文字">
B
flowchart-C-1317" transform="translate(181.2890625,31)">
C
flowchart-D-1319" transform="translate(260.984375,31)">
D
注意 版本≥0.5.2提供了提示文字和链接URL的功能。
由于Docsify
处理JavaScript回调函数
的方式受到限制,与上面例子类似的另外一个版本可以去jsfiddle 查看.
默认情况下,链接在同一浏览器选项卡/窗口中打开。可以通过在定义单击事件中添加链接目标来更改此设置(支持 _self
、_blank
、_parent
和_top
):
代码:
```mermaid flowchart LR A–>B B–>C C–>D D–>E click A “https://blog.csdn.net/chenlu5201314” _blank click B “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank click C href “https://blog.csdn.net/chenlu5201314” _blank click D href “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-D LE-E" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart -A-1328">
A
flowchart -B-1329" title="在新选项卡中打开此链接">
B
flowchart -C-1331">
C
flowchart -D-1333" title="在新选项卡中打开此链接">
D
flowchart-E-1335" transform="translate(317.6796875, 28.5)">
E
```mermaid graph LR A–>B B–>C C–>D D–>E click A “https://blog.csdn.net/chenlu5201314” _blank click B “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank click C href “https://blog.csdn.net/chenlu5201314” _blank click D href “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank ```
flowchart-A-1344" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-1345" transform="translate(101.96875,31)" title="在新选项卡中打开此链接">
B
flowchart-C-1347" transform="translate(181.2890625,31)">
C
flowchart-D-1349" transform="translate(260.984375,31)" title="在新选项卡中打开此链接">
D
flowchart-E-1351" transform="translate(340.1796875,31)">
E
提示 在html上下文中使用交互式链接的完整示例:
< body>
< pre class = " mermaid" >
flowchart LR
A-->B
B-->C
C-->D
click A callback "提示文字"
click B "https://blog.csdn.net/chenlu5201314" "这是一个链接"
click C call callback() "提示文字"
click D href "https://blog.csdn.net/chenlu5201314" "这是一个链接"
</ pre>
< script>
const callback = function ( ) {
alert ( '已触发回调!' ) ;
} ;
const config = {
startOnLoad : true ,
flowchart : { useMaxWidth : true , htmlLabels : true , curve : 'cardinal' } ,
securityLevel : 'loose' ,
} ;
mermaid. initialize ( config) ;
</ script>
</ body>
< body>
< pre class = " mermaid" >
graph LR
A-->B
B-->C
C-->D
click A callback "提示文字"
click B "https://blog.csdn.net/chenlu5201314" "这是一个链接"
click C call callback() "提示文字"
click D href "https://blog.csdn.net/chenlu5201314" "这是一个链接"
</ pre>
< script>
const callback = function ( ) {
alert ( '已触发回调!' ) ;
} ;
const config = {
startOnLoad : true ,
flowchart : { useMaxWidth : true , htmlLabels : true , curve : 'cardinal' } ,
securityLevel : 'loose' ,
} ;
mermaid. initialize ( config) ;
</ script>
</ body>
注释 %%
可以在流程图 中添加注释,注释内容将被解析器忽略。 注释只会对当前行生效, 并且开头必须以 %%
(双百分号)。 注释开始到下一行的任何文本之前都将被视为注释,包括任何流程图 语法。
代码:
```mermaid flowchart LR %% 这是一行注释 A – 文本1 --> B{节点} A – 文本1 --> B – 文本2 --> C ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
文本1
文本2
flowchart-A-1355" transform="translate(20.21875, 28.5)">
A
flowchart-B-1356" transform="translate(134.859375, 28.5)">
B
flowchart-C-1357" transform="translate(249.5703125, 28.5)">
C
```mermaid graph LR %% 这是一行注释 A – 文本1 --> B{节点} A – 文本1 --> B – 文本2 --> C ```
文本1
文本2
flowchart-A-1361" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-1362" transform="translate(142.359375,31)">
B
flowchart-C-1363" transform="translate(262.0703125,31)">
C
样式和类
链接样式
可以为链接设置样式。例如,您可能想设置一个在流中向后的链接的样式。由于链接没有像节点一样的ID,因此需要其他方法来设置样式附加到链接上。不使用ID,而是使用定义链接时在图形中出现的顺序号,或者使用default
应用于所有链接。在下面的例子中,linkStyle语句中定义的样式将属于图形中的第4个链接: linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
曲线样式
如果默认样式不符合您的需求,可以为节点之间的线条类型设置曲线样式。可用的曲线样式包括 basis
, bumpX
, bumpY
, cardinal
, catmullRom
, linear
, monotoneX
, monotoneY
, natural
, step
, stepAfter
, 和 stepBefore
.
在下面例子中,从左到右的图形使用stepBefore
曲线样式。
%%{ init: { 'flowchart ': { 'curve': 'stepBefore' } } }%%
flowchart LR
或
%%{ init: { 'graph ': { 'curve': 'stepBefore' } } }%%
graph LR
获取完整的可用曲线列表,包括自定义曲线的说明,请参考d3-shape项目中的Shapes文档。 For a full list of available curves, including an explanation of custom curves, refer to the Shapes documentation in the d3-shape project.
节点样式
可以将特定的样式应用于节点,例如更厚的边框或不同的背景颜色。
代码:
```mermaid flowchart LR id1(开始)–>id2(停止) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-id1 LE-id2" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-id1-1368" transform="translate(31.5, 28.5)">
开始
flowchart-id2-1369" transform="translate(128.5, 28.5)">
停止
```mermaid graph LR id1(开始)–>id2(停止) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ```
flowchart-id1-1376" transform="translate(34,31)" style="opacity: 1;">
开始
flowchart-id2-1377" transform="translate(136,31)">
停止
类
比每次定义样式更方便的是定义一类样式,并将该类附加到应该具有不同外观的节点。 比每次重新定义样式更方便的方式是定义一个类样式,并将该类名附加到需要不同外观的节点上。
类的定义可以参考下面例子: classDef className fill:#f9f,stroke:#333,stroke-width:4px;
将一个类名附加到节点上的语法如下所示: class nodeId1 className;
也可以将类名附加到一组节点上: class nodeId1,nodeId2 className;
新增一种将类名附加到节点的缩写形式,使用操作符:::
,如下例所示::
代码:
```mermaid flowchart LR A:::someclass --> B classDef someclass fill:#f96 ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-1382" transform="translate(20.21875, 28.5)">
A
flowchart-B-1383" transform="translate(94.46875, 28.5)">
B
```mermaid graph LR A:::someclass --> B classDef someclass fill:#f96 ```
flowchart-A-1386" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-1387" transform="translate(101.96875,31)">
B
Css类
可以在css样式对指定类进行预定义,这些类可以在流程图 定义中引用,如下例所示:
样式示例
<style>
.cssClass > rect {
fill : #ff0000;
stroke : #ffff00;
stroke-width : 4px;
}
</style>
定义示例
代码:
```mermaid flowchart LR A–>B[AAABBB] B–>D class A cssClass ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-A-1392" transform="translate(20.21875, 28.5)">
A
flowchart-B-1393" transform="translate(117.6796875, 28.5)">
AAABBB
flowchart-D-1395" transform="translate(215.328125, 28.5)">
D
```mermaid graph LR A–>B[AAABBB] B–>D class A cssClass ```
flowchart-A-1400" transform="translate(22.71875,31)" style="opacity: 1;">
A
flowchart-B-1401" transform="translate(125.1796875,31)">
AAA
BBB
flowchart-D-1403" transform="translate(227.828125,31)">
D
默认类
如果一个类被命名为default
,它将分配给所有没有特定类别定义的类。
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
对图标字体的支持
你可以从图标字体库中添加图标。
图标字体可以通过下面语法进行添加: fa:#图标类名称#.
代码:
```mermaid flowchart TD B[“fab:fa-twitter 鸽子图标”] B–>C[fa:fa-ban 禁止图标] B–>D(fa:fa-spinner 旋转图标) B–>E(一个 fa:fa-camera-retro 照相机的图标?) ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-E" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-B-1411" transform="translate(176.5, 28.5)">
鸽子图标
flowchart-C-1413" transform="translate(47.5, 119.5)">
禁止图标
flowchart-D-1415" transform="translate(176.5, 119.5)">
旋转图标
flowchart-E-1417" transform="translate(342.8515625, 119.5)">
一个 照相机的图标?
```mermaid graph TD B[“fab:fa-twitter 鸽子图标”] B–>C[fa:fa-ban 禁止图标] B–>D(fa:fa-spinner 旋转图标) B–>E(一个 fa:fa-camera-retro 照相机的图标?) ```
flowchart-B-1425" transform="translate(184,31)" style="opacity: 1;">
鸽子图标
flowchart-C-1427" transform="translate(50,127)">
禁止图标
flowchart-D-1429" transform="translate(184,127)">
旋转图标
flowchart-E-1431" transform="translate(355.3515625,127)">
一个
照相机的图标?
Mermaid
兼容Font Awesome
的最高版本v5
, 仅限免费的图标。检查您使用的图标是否来自支持的图标集。
顶点和链接之间带空格且不带分号的图形声明
在图形声明,现在语句结尾可以不使用分号。在发布v0.2.16之后,以分号作为结尾的图形语句只是可选的。因此,下面的图形声明与旧的图形声明一起也是有效的。
顶点和链接之间只允许有一个空格。但是,顶点及其文本和链接及其文本之间不应该有任何空格。旧的图形声明语法也将起作用,因此这个新特性是可选的,并且是为了提高可读性而引入的。
下面是新的流程图 边框声明,它与旧的流程图 边框声明一起使用也是有效的。
代码:
```mermaid flowchart LR A[方形框] -->|链接文本| B(圆角方形框) B --> C{选择} C -->|一| D[结果一] C -->|二| E[结果二] ```
flowchart-pointEnd" class="marker flowchart " viewbox="0 0 10 10" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-pointStart" class="marker flowchart " viewbox="0 0 10 10" refx="0" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">
flowchart-circleEnd" class="marker flowchart " viewbox="0 0 10 10" refx="11" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-circleStart" class="marker flowchart " viewbox="0 0 10 10" refx="-1" refy="5" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossEnd" class="marker cross flowchart " viewbox="0 0 11 11" refx="12" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-crossStart" class="marker cross flowchart " viewbox="0 0 11 11" refx="-1" refy="5.2" markerunits="userSpaceOnUse" markerwidth="11" markerheight="11" orient="auto">
flowchart-link LS-A LE-B" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-B LE-C" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-D" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
flowchart-link LS-C LE-E" style="fill:none;" marker-end="url(#flowchart -pointEnd)">
链接文本
一
二
flowchart-A-1440" transform="translate(39.5, 74)">
方形框
flowchart-B-1441" transform="translate(232.5, 74)">
圆角方形框
flowchart-C-1443" transform="translate(374, 74)">
选择
flowchart-D-1445" transform="translate(515.5, 28.5)">
结果一
flowchart-E-1447" transform="translate(515.5, 119.5)">
结果二
```mermaid graph LR A[方形框] -->|链接文本| B(圆角方形框) B --> C{选择} C -->|一| D[结果一] C -->|二| E[结果二] ```
链接文本
一
二
flowchart-A-1456" transform="translate(42,79)" style="opacity: 1;">
方形框
flowchart-B-1457" transform="translate(240,79)">
圆角方形框
flowchart-C-1459" transform="translate(384.0999984741211,79)">
选择
flowchart-D-1461" transform="translate(528.1999969482422,31)">
结果一
flowchart-E-1463" transform="translate(528.1999969482422,127)">
结果二
配置
渲染
流程图 的布局是用渲染器完成的。默认的渲染器为dagre
从Mermaid v9.4 开始,你可以使用elk
渲染器替代dagre
渲染器。elk
渲染器更适合更大、更复杂的流程图 。
elk渲染器试验性的功能。你可以通过添加下面指令将渲染器更改为elk:
%%{init: {"flowchart ": {"defaultRenderer": "elk"}} }%%
或
%%{init: {“graph ”: {“defaultRenderer”: “elk”}} }%%
注意 需要使用mermaid v9.4及以上的版本才能工作,且延迟加载配置中启用此功能。
宽度
可以调整流程图 的渲染宽度。
这是通过定义mermaid.flowchart Config
或使用CLI
的JSON
文件来进行配置。有关 CLI的描述请参见mermaidCLI
页。 mermaid.flowchart Config
使用JSON字符串或相应的对象进行配置。
mermaid. flowchart Config = {
width : 100 %
}