Flowchart

Graph

该语句声明了流程图的方向。

这句语句声明了图的方向是从上到下（TD或TB）。

graph TD
    Start --> Stop

这句语句声明了图的方向是从左到右（LR）。

graph LR
    Start --> Stop

流程图方向

可能的流程图方向为：

• TB-从上到下
• TD-自顶向下/从上至下相同
• BT-从下到上
• RL-从右到左
• LR-从左到右

流程图

这渲染了一个流程图，允许的功能有：更多的箭头类型，多方向箭头，以及子图之间的链接。

除了图形类型外，语法是一样的。这目前是实验性的，但当测试期结束后，图形和流程图关键字都将以新的方式呈现。这意味着可以开始测试流程图了。

请注意：请勿将单词“end”作为流程图节点输入。请大写所有或任何一个字母以防止流程图中断，即“End”或“END”。或者使用 endnode["end"] 方法。

节点和形状

节点（默认）

graph LR
    id

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

带有文本的节点

也可以在不同于 ID的 框中设置文本。如果多次执行此操作，则将找到要使用的节点的最后一个文本。同样，如果稍后为节点定义边缘，则可以省略文本定义。渲染框时将使用先前定义的一个。

graph LR
    id1[This is the text in the box]

节点形状

圆边矩形节点

graph LR
    id1(This is the text in the box)

体育场形状节点

graph LR
    id1([This is the text in the box])

子程序形状节点

graph LR
    id1[[This is the text in the box]]

圆柱节点

graph LR
    id1[(Database)]

圆节点

graph LR
    id1((This is the text in the circle))

非对称节点

graph LR
    id1>This is the text in the box]

目前只有上面方向的形状，而不是它的镜面样子。
这可能会随着将来的版本而改变。

菱形节点

graph LR
    id1{This is the text in the box}

六角形节点

graph LR
    id1{{This is the text in the box}}

平行四边形节点（/）

graph TD
    id1[/This is the text in the box/]

平行四边形节点（\）

graph TD
    id1[\This is the text in the box\]

梯形节点（正）

graph TD
    A[/Christmas\]

梯形节点（反）

graph TD
    B[\Go shopping/]

节点之间的链接

节点可以通过链接/边缘连接。可以具有不同类型的链接，也可以将文本字符串附加到链接。

箭头链接

graph LR
    A-->B

直线链接

graph LR
    A --- B

链接上的文字

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

或者

graph LR
    A---|This is the text|B

带有箭头和文字的链接

graph LR
    A-->|text|B

或者

graph LR
    A-- text -->B

虚线链接

graph LR;
   A-.->B;

带文字的虚线链接

graph LR
   A-. text .-> B

粗链接

graph LR
   A ==> B

带有文字的粗链接

graph LR
   A == text ==> B

串接链接

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

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

也可以按照以下方式在同一行中声明多个节点链接：

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

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

graph TB
    A & B--> C & D

如果使用基本语法描述相同的图，则将需要四行。这可能会使图表变得难以阅读。

graph TB
    A --> C
    A --> D
    B --> C
    B --> D

Beta：新箭头类型

当使用流程图而不是图形时，如下支持新的箭头类型：

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

Beta：多向箭头

当使用流程图而不是图形时，可以使用多向箭头。

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

链接的最小长度

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

在下面的示例中，在从节点 B 到节点 E的链接中添加了两个额外的破折号，所以它比普通链接多跨了两个等级。

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

注意：渲染引擎可以将链接的长度设置为长于所请求的等级数，以适应其他请求。

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

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

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

长度	1	2	3
普通	---	----	-----
普通箭头	-->	--->	---->
加粗	===	====	=====
加粗箭头	==>	===>	====>
虚线	-.-	-..-	-...-
虚线箭头	-.->	-..->	-...->

插入破坏语法的特殊字符

可以将文本放在引号中，以呈现更麻烦的字符。如下例所示：

graph LR
    id1["This is the (text) in the box"]

用于转义字符的实体代码

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

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

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

子图

subgraph title
    graph definition
end

下面的例子：

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

您还可以为子图设置一个明确的ID。

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

Beta：流程图

使用 graphtype 流程图，也可以如下图所示在子图之间设置边线。

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

注释

可以在流程图中输入注释，解析器将忽略它们。注释必须自己一行，并且必须以%%（双百分号）开头。注释开始到下一个换行符之后的所有文本都将被视为注释，包括任何流语法

graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

设置节点样式

可以将特定样式（例如，较粗的边框或不同的背景颜色）应用于节点。

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5