Mermaid流程图基本语法讲解

流程图 - 基本语法

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

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

重要提示：请勿将“end”一词键入为流程图节点。将所有或任何一个字母大写以防止流程图中断，即“End”或“END”。

一个节点（默认）

flowchart LR
    id
id

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

带文本的节点

也可以在不同于 id 的框中设置文本。如果多次这样做，它将是为将使用的节点找到的最后一个文本。此外，如果您稍后为节点定义边，则可以省略文本定义。渲染框时将使用先前定义的那个。

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

图形

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

这声明流程图从上到下（TD或TB）定向。

flowchart TD
    Start --> Stop
 
Start
Stop

这表明流程图是从左到右的（LR）。

flowchart LR
    Start --> Stop
 
Start
Stop

流程图方向

可能的流程图方向是：

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

节点形状

具有圆边的节点

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

体育场形状的节点

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

子程序形状中的节点

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

圆柱形节点

flowchart LR
    id1[(Database)]
Database

圆形节点

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

不对称形状的节点

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

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

一个节点（菱形）

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

六边形节点

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

平行四边形

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

平行四边形替代

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

梯形

flowchart TD
    A[/Christmas\]
Christmas

梯形 alt

flowchart TD
    B[\Go shopping/]
Go shopping

双圈

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

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

flowchart LR
    A-->B
 
A
B
flowchart LR
    A --- B
 
A
B

链接上的文字

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

或者

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

带有箭头和文本的链接

flowchart LR
    A-->|text|B
text
A
B

或者

flowchart LR
    A-- text -->B
text
A
B
flowchart LR;
   A-.->B;
 
A
B

带文本的虚线链接

flowchart LR
   A-. text .-> B
text
A
B
flowchart LR
   A ==> B
 
A
B

带文本的粗链接

flowchart LR
   A == text ==> B
text
A
B

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

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

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

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

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

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

如果您使用基本语法描述相同的图表，则需要四行。警告一句，这可能会使流程图更难以降价形式阅读。瑞典词lagom浮现在脑海。这意味着，不要太多也不要太少。这也适用于表达性语法。

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

新的箭头类型

支持以下新类型的箭头：

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

多向箭头

可以使用多向箭头。

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

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

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

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

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

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

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

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

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

破坏语法的特殊字符

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

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

用于转义字符的实体代码

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

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

给出的数字以 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
three
one
 
 
 
c2
c1
two
 
b2
b1
a2
a1

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

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

流程图

使用 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
three
one
 
 
 
 
 
 
c2
c1
two
 
b2
b1
a2
a1

子图中的方向

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

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
 
 
TOP
 
B1
 
f1
i1
B2
 
f2
i2
A
B

相互作用

可以将单击事件绑定到节点，单击可以导致 javascript 回调或将在新浏览器选项卡中打开的链接。注意：此功能在使用时禁用，在使用时securityLevel='strict'启用securityLevel='loose'。

click nodeId callback
click nodeId call callback()
  • nodeId 是节点的id
  • callback 是在显示图形的页面上定义的 javascript 函数的名称，该函数将以 nodeId 作为参数被调用。

下面的工具提示用法示例：

<script>
  var callback = function () {
      alert('A callback was triggered');
  };
</script>

工具提示文本用双引号括起来。工具提示的样式由类设置.mermaidTooltip。

flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.github.com" "This is a tooltip for a link"
    click A call callback() "Tooltip for a callback"
    click B href "https://www.github.com" "This is a tooltip for a link"
 
 
 
A
B
C
D

默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过将链接目标添加到点击定义来更改此设置（支持_self,_blank和）：_parent_top

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank
 
 
 
 
A
B
C
D
E

初学者提示——在 html 上下文中使用交互式链接的完整示例：

<body>
  <div class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
  </div>

  <script>
    var callback = function () {
        alert('A callback was triggered');
    };
    var config = {
        startOnLoad: true,
        flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
        securityLevel:'loose'
    };
    mermaid.initialize(config);
  </script>
</body>

注释

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

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

造型和课程

可以设置链接样式。例如，您可能想要对流中向后的链接进行样式设置。由于链接没有与节点相同的 id，因此需要其他方式来确定链接应附加到哪种样式。使用图表中定义链接时的顺序号代替 ids，或使用默认值应用于所有链接。在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：

linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

造型线曲线

如果默认方法不能满足您的需要，则可以设置用于项目之间线条的曲线类型。可用的曲线样式包括basis、bump、linear、monotoneX、monotoneY、natural、step、stepAfter和stepBefore。

在此示例中，从左到右的图形使用stepBefore曲线样式：

%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR

有关可用曲线的完整列表，包括自定义曲线的说明，请参阅d3-shape项目中的Shapes文档 。

样式化节点

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

flowchart 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
 
Start
Stop

课程

比每次都定义样式更方便的是定义一个样式类，并将该类附加到应该具有不同外观的节点上。

类定义如下例所示：

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

将类附加到节点按以下方式完成：

    class nodeId1 className;

也可以在一个语句中将一个类附加到节点列表：

    class nodeId1,nodeId2 className;

添加类的更短形式是使用运算符将​​类名附加到节点:::，如下所示：

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;
 
A
B

CSS类

也可以在 css 样式中预定义可以从图形定义中应用的类，如下例所示：

示例样式

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

示例定义

flowchart LR;
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
 
 
A
AAABBB
D

默认类

如果一个类被命名为 default ，它将被分配给所有没有特定类定义的类。

    classDef default fill:#f9f,stroke:#333,stroke-width:4px;

对 fontawesome 的基本支持

可以从 fontawesome 添加图标。

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

flowchart TD
    B["fab: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?

Code Chart 现在仅与 Font Awesome 版本 4、5 和 6 兼容。检查您使用的 Font Awesome 版本是否正确。

  • 在图形声明中，语句现在也可以不用分号结束。在 0.2.16 版本之后，以分号结束图形语句只是可选的。因此，下面的图形声明与图形的旧声明一起也是有效的。

  • 顶点和链接之间允许有一个空格。但是，顶点及其文本与链接及其文本之间不应有任何空格。图形声明的旧语法也可以使用，因此这个新特性是可选的，并被引入以提高可读性。

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

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Link text
 
One
Two
Hard edge
Round edge
Decision
Result one
Result two

配置...

是否可以调整渲染流程图的宽度。

这是通过定义mermaid.flowchartConfig来完成的。

mermaid.flowchartConfig = {
    width: 100%
}
posted @ 2022-10-19 19:42  ixiaoyang8  阅读(571)  评论(0)  编辑  收藏  举报