流程图 - 基本语法

流程图 - 基本语法

流程图由节点（几何形状）和边（箭头或线条）组成。JHL 在线编辑代码定义了如何创建节点和边，支持不同类型的箭头，多方向箭头，以及与子图之间的链接。

警告

如果在流程图节点中使用单词 "end"，请将整个单词或其中的任意字母大写（例如，"End" 或 "END"），或者使用此解决方法。如果以小写字母 "end" 输入，将会破坏流程图。

节点（默认）

代码：

---

title: Node

---

**flowchart** LR

  id

信息

id是显示在方框内的内容。

提示

除了flowchart，也可以使用.flowchartgraph。

一个带有文本的节点

还可以在方框内设置与id不同的文本。如果这样做了多次，将使用节点的最后一个找到的文本。而且，如果以后为节点定义边缘，可以省略文本定义。在渲染方框时，将使用之前定义的文本。

代码：

\---

title: Node with text

\---

**flowchart** LR

  id1[This is the text in the box]

Unicode文本

使用来包围Unicode文本。

代码：

flowchart LR

id["This ❤ Unicode"]

Markdown格式化

使用双引号和反引号 "文本" 来包围Markdown文本。

代码：

%%{init: {"flowchart": {"htmlLabels": false}} }%%

flowchart LR

markdown["This **is** _Markdown_"]

newLines["`Line1

Line 2

Line 3`"]

markdown --> newLines

方向

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

这表示流程图是从上到下排列的（或）。TD TB

代码：

flowchart TD

Start --> Stop

这表示流程图的方向是从左到右的（）。LR

代码：

flowchart LR

Start --> Stop

可能的流程图方向包括：

• TB - 从上到下

• TD - 从上到下（与上到下相同）

• BT - 从下到上

• RL - 从右到左

• LR - 从左到右

节点形状

带有圆角的节点

代码：

flowchart LR

id1(This is the text in the box)

一个体育场形状的节点

代码：

flowchart LR

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

一个子程序形状的节点

代码：

flowchart LR

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

一个圆柱形状的节点

代码：

flowchart LR

id1[(Database)]

一个圆形形状的节点

代码：

flowchart LR

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

一个不对称形状的节点

代码：

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

目前只有上述形状是可能的，而不是其镜像。这可能会在未来的版本中改变。

一个菱形形状的节点

代码：

flowchart LR

id1{This is the text in the box}

一个六边形节点

代码：

flowchart LR

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

一个平行四边形节点

代码：

flowchart TD

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

一个备用的平行四边形节点

代码：

flowchart TD

id1[\This is the text in the box]

一个梯形节点

代码：

flowchart TD

A[/Christmas]

一个备用梯形节点

代码：

flowchart TD

B[\Go shopping/]

一个双圆形节点

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---|This is the text|B

带有箭头头和文本的链接

代码：

flowchart LR

A-->|text|B

虚线链接

代码：

flowchart LR

A-.->B;

带有文本的虚线链接

代码：

flowchart LR

A-. text .-> B

粗链接

代码：

flowchart LR

A ==> B

带有文本的粗链接

代码：

flowchart LR

A == text ==> B

一个不可见的链接

在某些情况下，这可能是一个有用的工具，用于更改节点的默认定位。

代码：

flowchart LR

A ~ B

链接的链式

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

代码：

flowchart LR

A -- text --> B -- text2 --> C

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

代码：

flowchart LR

a --> b & c--> d

您可以以非常表达性的方式描述依赖关系，就像下面的一行代码一样：

代码：

flowchart TB

A & B--> C & D

如果您使用基本语法来描述相同的图表，将需要四行。需要注意的是，使用这种方式可能会过度，使得流程图在Markdown形式下难以阅读。瑞典语中有一个词可以形容，意思是，既不过多也不过少。这同样适用于表达性的语法。

代码：

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

链接的最小长度

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

在以下示例中，从节点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
普通	---	----	-----
带箭头的普通	-->	--->	---->
粗链接	===	====	=====
带箭头的粗链接	==>	===>	====>
虚线	-.-	-..-	-...-
带箭头的虚线	-.->	-..->	-...->