Mermaid 语法 - 流程图

2024-03-14 0 1
手机查看

本文由 简悦 SimpRead 转码, 原文地址 pkmer.cn

Mermaid 语法,流程图,节点,连接——所有流程图 均由节点,几何形状和连线,箭头或线条组成。

mermaid


插件 ID:mermaid%E8%AF%AD%E6%B3%95-%E6%B5%81%E7%A8%8B%E5%9B%BE mermaid%E8%AF%AD%E6%B3%95-%E6%B5%81%E7%A8%8B%E5%9B%BE mermaid%E8%AF%AD%E6%B3%95 %E6%B5%81%E7%A8%8B%E5%9B%BE:Mermaid 语法,流程图,节点,连接

基本语法

所有流程图 均由节点,几何形状和连线,箭头或线条组成。mermaid 代码定义了这些节点和边的组成和交互方式。

你还可以选择不同的箭头类型,多方向箭头以及与子图之间的链接。

注意:请勿将关键字 end 用于流程图的节点名称。将所有或任何一个字母大写,以防止流程图中断,例如 “End” 或 “END”。

一个节点(默认)

```mermaid
graph LR
    id

### 一个包含文本的节点

也可以在矩形框中设置与 id 不同的文本。如果多次设定文本,节点会使用最后一段文本用于显示。另外,如果稍后为节点定义连线,则可以省略文本定义。渲染矩形框时将使用之前定义的文本。

这是文本

### 图

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

下述代码声明了流程图是从上到下的(`TD` 或 `TB`)。

开始
结束

下述代码声明了流程图是从左到右的(`LR`)。

开始
结束

流程图方向

可设置的流程方向有:

  • TB - 从上到下
  • TD - 从上到下(和 TB 相同)
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右

节点形状

圆角矩形节点

```mermaid
graph LR
    id1(mermaid)

#### 运动场形状节点

mermaid

#### 子程序形状节点

mermaid

#### 圆柱形节点

#### 圆形节点

mermaid

#### 鱼尾旗形状节点

mermaid

目前只有向右的鱼尾旗形状可用

#### 菱形节点

mermaid

#### 六边形节点

mermaid

#### 平行四边形节点

mermaid

#### 平行四边形节点(不同方向)

mermaid

#### 梯形节点(下宽上窄)

mermaid

#### 梯形节点(上宽下窄)

mermaid

### 节点之间的连接

节点可以用连线进行连接。可以用不同类型的边线连接节点或将文字附加在连线上。

#### 带箭头的连接

A
B

#### 开放式连接

A
B

#### 带文字的连接

文字
A
B

或者

文字
A
B

#### 带文字和箭头的连接

文字
A
B

或者

#### 虚线连接

A
B

#### 带文字的虚线连接

文字
A
B

#### 加粗的连接

A
B

#### 带文字的加粗连接

文字
A
B

#### 一串连接

可以在一行中声明多个连接:

文字
文字
A
B
C

也可以在同一行中声明多个节点连接:

a
b
c
d

可以以非常简洁的方式描述依赖关系,如下所示一行代码:

A
B
C
D

同样的图形,如果使用基本语法,需要四行代码。但也请注意,这可能会使流程图难以以 Markdown 形式阅读。我想到了瑞典语单词 `lagom`,意思是:不要太多也不要太少。

下面的代码和上面的一行代码等价:

A
C
D
B

#### 新的箭头类型

以下是支持的新类型的箭头:

A
B
C

#### 多方向箭头

A
B
C
D

#### 连接线的最小长度

流程图中的每个节点最终被分配到所呈现的图形中的一个级别,即被分配到垂直或水平级别 (取决于流程图的方向),基于它所连接的节点。默认情况下,连接可以跨越任意数量的级别,但是您可以通过在连接定义中添加额外的破折号来指定一个连接比其他连接更长。

在下面的示例中,从节点 B 到节点 E 的连接中添加了两个额外的破折号,因此它比常规连接跨越了多两个级别:

Yes
No
开始
判断?
OK
重新想想
结束

> ** 注意:** 渲染引擎可能会使连接长于定义的级别,以适应其他连接。

当连接标签写在连接的中间时,必须在连接的右侧添加额外的破折号。下面的例子和上述等价:

Yes
No
开始
判断?
OK
重新想想
结束

对于虚线或加粗的连接线,使用的字符看上去是同样的形状,如下表所示:

<table><thead><tr><th><strong>长度</strong></th><th><strong>1</strong></th><th><strong>2</strong></th><th><strong>3</strong></th></tr></thead><tbody><tr><td>普通</td><td><code>---</code></td><td><code>----</code></td><td><code>-----</code></td></tr><tr><td>普通带箭头</td><td><code>--&gt;</code></td><td><code>---&gt;</code></td><td><code>----&gt;</code></td></tr><tr><td>加粗</td><td><code>===</code></td><td><code>====</code></td><td><code>=====</code></td></tr><tr><td>加粗带箭头</td><td><code>==&gt;</code></td><td><code>===&gt;</code></td><td><code>====&gt;</code></td></tr><tr><td>虚线</td><td><code>-.-</code></td><td><code>-..-</code></td><td><code>-...-</code></td></tr><tr><td>虚线带箭头</td><td><code>-.-&gt;</code></td><td><code>-..-&gt;</code></td><td><code>-...-&gt;</code></td></tr></tbody></table>

中断语法的特殊字符
---------

可以将文本放在引号中,以渲染会引起歧义的文字。如下例所示:

这是 (text) 文本

### 转义字符的实体代码

可以使用下述示例的语法转义字符:

一个双引号:"
一个十进制数字表示的符号:♥
```mermaid
graph LR
    A["一个双引号:#quot;"] -->B["一个十进制数字表示的符号:#9829;"]

数字为十进制,因此 # 符号可以编码为 #35;。此外,也支持使用 HTML 字符名称。

子图

```mermaid
subgraph title
    graph definition
end

Syntax error in graphmermaid version 9.4.3

一个例子:

C
A
c2
c1
B
b2
b1
a2
a1

Loading graph...

您还可以为子图设置 id:

A
a2
a1
c1

Loading graph...

多子图流转
-----

在多个子图中,可以在子图之间设置连接线,如下面的例子所示:

C
A
c2
c1
B
b2
b1
a2
a1

Loading graph...

子图的方向
-----

在多个流程图中,您可以使用方向语句来设置子图将呈现的方向,就像下面的例子所示:

TOP
B1
f1
i1
B2
f2
i2
A
B

Loading graph...

交互
--

可以在节点上定义点击时跳转到超链接。

默认情况下,超链接在同一浏览器选项卡 / 窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 (支持 `_self`,`_blank`,`_parent` 和 `_top`):

A
B
C
D
E

Loading graph...

注释
--

可以在流程图中输入注释,解析器将忽略该注释。注释需要在独立的行内,并且必须以 `%%` 开头。注释开始到下一个换行符之后的任何文本都将被视为注释,包括任何流程图语法:

text
text2
A
B
C

Loading graph...

样式和类 class
----------

### 连接线样式

可以对连接线进行样式设置。例如,您可能希望对流程中倒退的连接线进行样式设置。因为连接不像节点那样可以设置 id,所以需要其他确定连接应附加到哪种样式的方法。

使用在流程图中定义连接的序号指定连接。在下面的示例中,在 linkStyle 语句中定义的样式将属于图中的第四个连接:

Error parsing Mermaid diagram!

No diagram type detected matching given configuration for text: linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

Loading graph...

### 节点样式

可以为节点定义指定的样式,例如更粗的边框或不同的背景色:

开始
结束

Loading graph...

### 类 Class

比每次定义样式更方便的是定义一个样式 class,并将该 class 添加到不同的节点上。

class 定义如下所示:

Error parsing Mermaid diagram!

No diagram type detected matching given configuration for text: classDef className fill:#f9f,stroke:#333,stroke-width:4px

Loading graph...

将 class 添加到节点的示例如下:

Error parsing Mermaid diagram!

No diagram type detected matching given configuration for text: class nodeId1 className;

Loading graph...

也可以用一条语句将一个 class 添加到一系列的节点上:

Loading graph...

添加 class 的一种更短的形式是使用 `:::` 运算符将 classname 添加到节点,如下所示:

A
B

Loading graph...

### 默认 class

如果一个 class 被命名为 default,它的样式将被分配给所有没有指定 class 的节点。

Error parsing Mermaid diagram!

No diagram type detected matching given configuration for text: classDef default fill:#f9f,stroke:#333,stroke-width:4px

Loading graph...

*   在图的声明中,语句现在也可以在没有分号的情况下结束。用分号结束图形语句是可选的。因此,下面的图声明与图的过往声明同样有效。
*   在顶点和连接之间允许使用单个空格。但是,顶点及其文本与连接及其文本之间不应存在任何空格。图声明的旧语法也将起作用,因此此新功能是可选的,并被引入以提高可读性。

下面是流程图边线的新的声明方式,和过去的语法同样有效。

Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

Loading graph...
What do you think?
  • 点赞
    0
    点赞
  • 踩一下
    0
    踩一下
  • 酷毙了
    0
    酷毙了
  • 不屑
    0
    不屑
  • 尴尬
    0
    尴尬
  • 无聊
    0
    无聊
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v3.5.5