mermaid流程图语法教程

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 
	开始-->停止

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\]    

倒梯形

flowchart  TD  
	B[\去购物/]    

双圈

flowchart TD
    id1(((This is the text in the circle))) 

flowchart TD
    id1(((This is the text in the circle))) 

节点之间的链接

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

带箭头的链接

flowchart  LR  
	A --> B    

一个开放的链接

flowchart  LR  
	A --- B      

链接上的文字

flowchart LR
    A-- This is the text! ---B

或者

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

带有箭头和文本的链接

flowchart  LR  
	A --> |文本|B    

或者

flowchart  LR  
	A -- 文本 --> B    

虚线链接

flowchart  LR;
	A -.-> B;

带文本的虚线链接

flowchart  LR  
	A -. 文本 .-> B    

粗链接

flowchart  LR  
	A ==> B     

带文本的粗链接

flowchart  LR  
	A == 文本 ==> B     

链接的链接

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

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

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

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

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

flowchart  TB  
	A & B --> C & D         

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

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

新的箭头类型

支持以下新类型的箭头：

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  TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

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

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

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

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

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

破坏语法的特殊字符

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

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

用于转义字符的实体代码

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

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

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

子图

subgraph title
    graph definition
end

下面的一个例子：

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

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

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

flowchart

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

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

子图中的方向

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

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

相互作用

注释

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

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

对fontawesome的基本支持

可以从 fontawesome 添加图标。

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

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

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

• 在图形声明中，语句现在也可以不用分号结束。在 0.2.16 版本之后，以分号结束图形语句只是可选的。因此，下面的图形声明与图形的旧声明一起也是有效的。
• 顶点和链接之间允许有一个空格。但是，顶点及其文本、链接及其文本之间不应有任何空格。图形声明的旧语法也可以使用，因此这个新特性是可选的，并被引入以提高可读性。

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

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