index

flowchart - 基本语法
- - 一个节点(默认)
  - 带文本的节点
- 图形
- flowchart 方向
- 节点形状
- - 具有圆边的节点
  - 体育场形状的节点
  - 子程序形状中的节点
  - 圆柱形节点
  - 圆形节点
  - 不对称形状的节点
  - 一个节点(菱形)
  - 六边形节点
  - 平行四边形
  - 平行四边形替代
  - 梯形
  - 倒梯形
  - 双圈
- 节点之间的链接
- - 带箭头的链接
  - 一个开放的链接
  - 链接上的文字
  - 带有箭头和文本的链接
  - 虚线链接
  - 带文本的虚线链接
  - 粗链接
  - 带文本的粗链接
  - 链接的链接
  - 新的箭头类型
  - 多向箭头
  - 链接的最小长度
- 破坏语法的特殊字符
- - 用于转义字符的实体代码
- 子图
- flowchart
- 子图中的方向
- 相互作用
- - 注释
- 对fontawesome的基本支持
- 顶点和链接之间有空格且不带分号的图形声明

flowchart - 基本语法

官方网址

所有flowchart 都由节点、几何形状和边缘、箭头或线条组成。mermaid代码定义了这些节点和边的制作和交互方式。

它还可以容纳不同的箭头类型、多向箭头以及与子图的链接。

重要提示：请勿将"end"一词键入为flowchart 节点。将所有或任何一个字母大写以防止flowchart 中断，即"End"或"END"。或者您可以应用此解决方法。

一个节点(默认)

flowchart  LR  id

注意 id 是框中显示的内容。

带文本的节点

也可以在不同于 id 的框中设置文本。此外，如果您稍后为节点定义边，则可以省略文本定义。渲染框时将使用先前定义的那个。

flowchart  LR  id1[这是框中的文字]

这是框中的文字

图形

该语句声明了flowchart 的方向。

这声明flowchart 从上到下(TD或TB)定向。

flowchart  TD 开始-->停止

开始

停止

这表明flowchart 是从左到右的(LR)。

flowchart  LR 开始-->停止

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

开始

停止

flowchart 方向

可能的flowchart 方向是：

TB - 从上到下
TD - 自上而下/与自上而下相同
BT - 自下而上
RL - 从右到左
LR——从左到右

节点形状

具有圆边的节点

flowchart  LR  id1(这是框中的文本)

这是框中的文本

体育场形状的节点

flowchart  LR  id1([这是框中的文字])

这是框中的文字

子程序形状中的节点

flowchart  LR  id1[[这是框中的文字]]

这是框中的文字

圆柱形节点

flowchart  LR  id1[(数据库)]

数据库

圆形节点

flowchart  LR  id1((这是圈内的文字))

这是圈内的文字

不对称形状的节点

flowchart  LR  id1>这是框中的文字]

这是框中的文字

目前只有上面的形状是可行的，反过来就不行。这可能会随着未来的版本而改变。

一个节点(菱形)

flowchart  LR  id1{这是框中的文本}

这是框中的文本

六边形节点

flowchart  LR  id1{{这是框中的文本}}

这是框中的文本

平行四边形

flowchart  TD  id1[/这是框中的文字/]

这是框中的文字

平行四边形替代

flowchart  TD  id1[\这是框中的文本\]

这是框中的文本

梯形

flowchart  TD  A[/Christmas\]

Christmas

倒梯形

flowchart  TD  B[\去购物/]

去购物

双圈

flowchart TDid1(((This is the text in the circle)))

flowchart TDid1(((This is the text in the circle)))

节点之间的链接

节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。

带箭头的链接

flowchart  LR  A --> B

一个开放的链接

flowchart  LR  A --- B

链接上的文字

flowchart LRA-- This is the text! ---B

This is the text!

或者

flowchart  LR  A --- |这是正文|B

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

这是正文

带有箭头和文本的链接

flowchart  LR  A --> |文本|B

文本

或者

flowchart  LR  A -- 文本 --> B

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

文本

虚线链接

flowchart  LR;A -.-> B;

带文本的虚线链接

flowchart  LR  A -. 文本 .-> B

文本

粗链接

flowchart  LR  A ==> B

带文本的粗链接

flowchart  LR  A == 文本 ==> B

文本

链接的链接

可以在同一行中声明许多链接，如下所示：

flowchart  LR  A --  text  --> B --  text2  --> C

text

text2

也可以在同一行中声明多个节点链接，如下所示：

flowchart  LR  a --> b & c --> d

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

然后，您可以以非常有表现力的方式描述依赖关系。就像下面的单线：

flowchart  TB  A & B --> C & D

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

如果您使用基本语法描述相同的图表，则需要四行。警告：这可能会使flowchart表达式更难以阅读。

flowchart  TB  A --> C A --> D B --> C B --> D

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

新的箭头类型

支持以下新类型的箭头：

flowchart  LR  A --o B B --x C

多向箭头

可以使用双向箭头。

flowchart  LR  A o--o B B <--> C C x--x D

链接的最小长度

flowchart 中的每个节点最终都根据其链接到的节点被分配到渲染图中的等级，即垂直或水平级别(取决于flowchart 方向)。默认情况下，链接可以跨越任意数量的等级，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。

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

flowchart  TDA[Start] --> B{Is it?}B -->|Yes| C[OK]C --> D[Rethink]D --> BB ---->|No| E[End]

Yes

Start

Is it?

Rethink

End

注意链接可能仍会比渲染引擎请求的等级数更长，以适应其他请求。

当链接标签写在链接中间时，额外的破折号必须添加在链接的右侧。以下示例与上一个示例等效：

flowchart TDA[Start] --> B{Is it?}B -- Yes  --> C[OK]C --> D[Rethink]D --> BB -- No ----> E[End]

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

Yes

Start

Is it?

Rethink

End

对于点链接或粗链接，要添加的字符是等号或点，如下表所示：

长度	1	2	3
普通的	`---`	`----`	`-----`
正常带箭头	`-->`	`--->`	`---->`
厚的	`===`	`====`	`=====`
粗带箭头	`==>`	`===>`	`====>`
点缀	`-.-`	`-..-`	`-...-`
点缀箭头	`-.->`	`-..->`	`-...->`

破坏语法的特殊字符

可以将文本放在引号内以呈现特殊的字符。如下例所示：

flowchart  LR  id1["这是框中的(文本)"]

这是框中的(文本)

用于转义字符的实体代码

可以使用此处示例的语法来转义字符。

flowchart LRA["A double quote:#quot;"] -->B["A dec char:#9829;"]

A double quote:"

A dec char:♥

给出的数字以 10 为底，因此#可以编码为#35;. 还支持使用 HTML 字符名称。

子图

subgraph titlegraph definition
end

下面的一个例子：

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2end

three

one

two

您还可以为子图设置显式 id。

flowchart TBc1-->a2subgraph ide1 [one]a1-->a2end

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

one

flowchart

使用 graphtype flowchart ，还可以设置与子图之间的边，如下面的flowchart 所示。

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2endone --> twothree --> twotwo --> c2

three

one

two

子图中的方向

使用 graphtype flowchart ，您可以使用方向语句来设置子图将呈现的方向，如本例所示。

flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2

TOP

相互作用

注释

可以在flowchart 中输入注释，解析器将忽略这些注释。注释需要单独一行，并且必须以%%(双百分号)开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何流语法

flowchart  LR
%% 这是一条注释 A -- text --> B{node} A --  text  --> B --  text2  --> C

text

text2

对fontawesome的基本支持

可以从 fontawesome 添加图标。

图标通过语法 fa:#icon class name# 访问。

flowchart TDB[fa:fa-twitter for peace#]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);B-->E(A fa:fa-camera-retro perhaps?)

for peace

forbidden

A perhaps?

顶点和链接之间有空格且不带分号的图形声明

下面是图边的新声明，它与图边的旧声明一样有效。

flowchart  LR  A [硬边] --> |链接文本| B(圆边) B  --> C{Decision} C  -->  |One| D[结果一] C  --> |二| E[结果二]

链接文本

One

二

硬边

圆边

Decision

结果一

结果二

mermaid流程图语法教程相关推荐

markdown 流程图语法
markdown 流程图语法 1.声明格式 ```mermaid graph LR - ``` 2.声明图形方向(TB上到下,LR左到右) graph LR 3. 声明图标 source(dataGe ...
Blender 2.9中的真实感三维产品全流程制作学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:41节课(6h 23m) |大小:5.83 GB 含 ...
Markdown 里 mermaid 流程图(flowchart)教程
作者: Jintao 日期:2021-7-12 简介: 未完待续 Markdown 里 mermaid 流程图flowchart教程前言: 1.0 流程图的方向 TD LR BT RL 2.0 节点 ...
【Mermaid 语法详细教程 01】流程图（Flowchart / graph）
说明 mermaid是一种解决文字图形转换的方案,用于在markdown标记语言中利用文本绘图,本文内容保证适合mermaid 8.8.3的内容,向上更新的内容不论. 本篇作为mermaid教程系列的 ...
3dmax：3dmax三维之各种材质参数化设置(贴图简介、设计流程)图文教程之详细攻略(切记收藏！)
3dmax:3dmax三维动画之各种材质参数化设置(贴图简介.设计流程)图文教程之详细攻略(切记收藏!) 目录 3dmax三维动画之各种材质参数化设置(贴图简介.设计流程)图文教程之详细攻略 1.基本 ...
Unreal Engine4 可视化虚拟现实全流程学习教程
课程目标: 这是一套专门为设计院,三维动画公司.效果图公司.景观规划公司.以及有志于进入这些行业创业的公司和人们量身定制的一套虚拟漫游高级教材. 在这套教学里面,我们能够从头开始了解到一个效果图级别的 ...
uniapp 可视化开发_uniapp的简单安装流程使用教程
由于本人开发的小程序大部分都是通过uniapp开发的,但是又有部分对uniapp的整理安装流程不大熟悉,所以这次给大家写一个简单完整的使用教程. 下载uniapp专用开发工具 uniapp是由DClo ...
IOS应用程序发布到苹果APP STORE完整流程使用教程
参考: http://blog.csdn.net/mad1989/article/details/8167529(xcode APP 打包以及提交apple审核详细流程(新版本更新提交审核)) htt ...
阿里云域名注册流程（全流程详细教程）
阿里云域名注册流程很简单,先注册阿里云账号,账号必须通过实名认证:然后创建信息模版,个人或企业信息模板必须通过实名认证:然后想好域名名称和域名后缀:最后在阿里云域名注册官网进行新域名的注册.阿里云百科 ...
阿里云服务器Ecs实例详细购买流程(小白教程)!
目录步骤 1 : 阿里云官网地址步骤 2 : 注册步骤 3 : 进入控制台步骤 4 : 购买ECS服务器-创建实例步骤 5 : 购买ECS服务器-计费方式步骤 6 : 购买ECS服务器-地 ...

mermaid流程图语法教程

index

flowchart - 基本语法

flowchart 方向

mermaid流程图语法教程相关推荐

最新文章

热门文章