Mermaid流程图Skill mermaid-flowchart

流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid代码定义了如何制作节点和边，并适应不同类型的箭头、多向箭头以及与子图的任何链接。

如果你在流程图节点中使用“end”这个词，请将整个词或任意字母大写（例如，“End”或“END”），或应用这个[解决方案](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)。使用全部小写的“end”将破坏流程图。

如果你在连接流程图节点中使用字母“o”或“x”作为第一个字母，请在字母前加空格或将字母大写（例如，“dev--- ops”、“dev---Ops”）。

输入“A---oB”将创建一个[圆形边](#circle-edge-example)。

输入“A---xB”将创建一个[交叉边](#cross-edge-example)。

默认的节点

---
标题：节点
---
流程图 LR
    id

id是显示在框中的文本。

除了`流程图`，也可以使用`图`。

带文本的节点

也可以设置框中的文本，使其与id不同。如果这样做了几次，将使用为节点找到的最后一个文本。此外，如果你稍后为节点定义了边缘，可以省略文本定义。渲染框时将使用先前定义的文本。

---
标题：带文本的节点
---
流程图 LR
    id1[这是框中的文本]

Unicode文本

使用"包围Unicode文本。

流程图 LR
    id["这是❤Unicode"]

Markdown格式

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

---
配置：
  流程图：
    htmlLabels: false
---
流程图 LR
    Markdown["`这是**Markdown**`"]
    newLines["`Line1
     Line 2
     Line 3`"]
    Markdown --> newLines

方向

这个声明声明了流程图的方向。

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

流程图 TD
    开始 --> 停止

这声明了流程图从左到右（LR）的方向。

流程图 LR
    开始 --> 停止

可能的流程图方向有：

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

节点形状

带圆角的节点

流程图 LR
    id1(这是框中的文本)

体育场形状的节点

流程图 LR
    id1([这是框中的文本])

子程序形状的节点

流程图 LR
    id1[[这是框中的文本]]

圆柱形状的节点

流程图 LR
    id1[(数据库)]

圆形节点

流程图 LR
    id1((这是圆圈中的文本))

不对称形状的节点

流程图 LR
    id1]这是框中的文本>

目前只可能上述形状，而不是其镜像。这可能会随着未来版本的发布而改变。

菱形节点

流程图 LR
    id1{这是框中的文本}

六边形节点

流程图 LR
    id1{{这是框中的文本}}

平行四边形

流程图 TD
    id1[/这是框中的文本/]

平行四边形alt

流程图 TD
    id1[\这是框中的文本\]

梯形

流程图 TD
    A[/圣诞节\]

梯形alt

流程图 TD
    B[\去购物/]

双圆圈

流程图 TD
    id1((这是圆圈中的文本)))

Mermaid流程图中的扩展节点形状（v11.3.0+）

Mermaid引入了30种新形状，以增强流程图创建的灵活性和精确性。这些新形状提供了更多的选项来直观表示流程、决策、事件、数据存储等流程图中的其他元素，提高清晰度和语义含义。

新的形状定义语法

Mermaid现在支持通用的节点形状定义语法，以适应越来越多的形状。这种语法允许你使用清晰灵活的格式为节点分配特定形状：

A@{ shape: rect }

这种语法创建了一个矩形节点A。它的渲染方式与A["A"]或A相同。

新形状的完整列表

以下是新引入的形状及其对应的语义含义、简称和别名的完整列表：

<!–@include: virtual:shapesTable -->

使用新形状的示例流程图

这是一个使用一些新引入的形状的示例流程图：

流程图 RL
    A@{ shape: manual-file, label: "文件处理"}
    B@{ shape: manual-input, label: "用户输入"}
    C@{ shape: docs, label: "多个文档"}
    D@{ shape: procs, label: "流程自动化"}
    E@{ shape: paper-tape, label: "纸质记录"}

流程

流程图 TD
    A@{ shape: rect, label: "这是一个流程" }

事件

流程图 TD
    A@{ shape: rounded, label: "这是一个事件" }

终端点（体育场）

流程图 TD
    A@{ shape: stadium, label: "终端点" }

子流程

流程图 TD
    A@{ shape: subproc, label: "这是一个子流程" }

数据库（圆柱）

流程图 TD
    A@{ shape: cyl, label: "数据库" }

开始（圆形）

流程图 TD
    A@{ shape: circle, label: "开始" }

奇数

流程图 TD
    A@{ shape: odd, label: "奇数形状" }

决策（菱形）

流程图 TD
    A@{ shape: diamond, label: "决策" }

准备条件（六边形）

流程图 TD
    A@{ shape: hex, label: "准备条件" }

数据输入/输出（右倾）

流程图 TD
    A@{ shape: lean-r, label: "输入/输出" }

数据输入/输出（左倾）

流程图 TD
    A@{ shape: lean-l, label: "输出/输入" }

优先操作（梯形底边）

流程图 TD
    A@{ shape: trap-b, label: "优先操作" }

手动操作（梯形顶边）

流程图 TD
    A@{ shape: trap-t, label: "手动操作" }

停止（双圆圈）

流程图 TD
    A@{ shape: dbl-circ, label: "停止" }

文本块

流程图 TD
    A@{ shape: text, label: "这是一个文本块" }

卡片（带凹槽的矩形）

流程图 TD
    A@{ shape: notch-rect, label: "卡片" }

带线/阴影的流程

流程图 TD
    A@{ shape: lin-rect, label: "带线流程" }

开始（小圆圈）

流程图 TD
    A@{ shape: sm-circ, label: "小开始" }

停止（带框的圆圈）

流程图 TD
    A@{ shape: framed-circle, label: "停止" }

分叉/合并（长矩形）

流程图 TD
    A@{ shape: fork, label: "分叉或合并" }

整理（沙漏）

流程图 TD
    A@{ shape: hourglass, label: "整理" }

注释（花括号）

流程图 TD
    A@{ shape: comment, label: "注释" }

注释右侧（花括号右侧）

流程图 TD
    A@{ shape: brace-r, label: "注释" }

注释两侧都有大括号

流程图 TD
    A@{ shape: braces, label: "注释" }

通信链接（闪电）

流程图 TD
    A@{ shape: bolt, label: "通信链接" }

文档

流程图 TD
    A@{ shape: doc, label: "文档" }

延迟（半圆形矩形）

流程图 TD
    A@{ shape: delay, label: "延迟" }

直接访问存储（水平圆柱）

流程图 TD
    A@{ shape: das, label: "直接访问存储" }

磁盘存储（带线圆柱）

流程图 TD
    A@{ shape: lin-cyl, label: "磁盘存储" }

显示（圆角梯形）

流程图 TD
    A@{ shape: curv-trap, label: "显示" }

分割流程（分割矩形）

流程图 TD
    A@{ shape: div-rect, label: "分割流程" }

提取（小三角形）

流程图 TD
    A@{ shape: tri, label: "提取" }

内部存储（窗格）

流程图 TD
    A@{ shape: win-pane, label: "内部存储" }

连接（实心圆）

流程图 TD
    A@{ shape: f-circ, label: "连接" }

带线文档

流程图 TD
    A@{ shape: lin-doc, label: "带线文档" }

循环限制（带凹槽的五边形）

流程图 TD
    A@{ shape: notch-pent, label: "循环限制" }

手动文件（翻转三角形）

流程图 TD
    A@{ shape: flip-tri, label: "手动文件" }

手动输入（倾斜矩形）

流程图 TD
    A@{ shape: sl-rect, label: "手动输入" }

多文档（堆叠文档）

流程图 TD
    A@{ shape: docs, label: "多个文档" }

多流程（堆叠矩形）

流程图 TD
    A@{ shape: processes, label: "多个流程" }

纸带（旗帜）

流程图 TD
    A@{ shape: flag, label: "纸带" }

存储数据（蝴蝶结矩形）

流程图 TD
    A@{ shape: bow-rect, label: "存储数据" }

汇总（交叉圆圈）

流程图 TD
    A@{ shape: cross-circ, label: "汇总" }

标记文档

流程图 TD
    A@{ shape: tag-doc, label: "标记文档" }

标记流程（标记矩形）

流程图 TD
    A@{ shape: tag-rect, label: "标记流程" }

Mermaid流程图中的特殊形状（v11.3.0+）

Mermaid还引入了2种特殊形状，以增强你的流程图：图标和图像。这些形状允许你直接在流程图中包含图标和图像，提供更多的视觉上下文和清晰度。

图标形状

你可以使用图标形状在流程图中包含一个图标。要使用图标，你需要先注册图标包。按照添加自定义图标的说明进行操作。定义图标形状的语法如下：

流程图 TD
    A@{ icon: "fa:user", form: "square", label: "用户图标", pos: "t", h: 60 }

参数

• icon: 注册的图标包中的图标名称。
• form: 指定图标的背景形状。如果没有定义，则图标没有背景。选项包括：
  • square
  • circle
  • rounded
• label: 与图标关联的文本标签。这可以是任何字符串。如果没有定义，则不显示标签。
• pos: 标签的位置。如果没有定义，默认标签位于图标底部。可能的值是：
  • t
  • b
• h: 图标的高度。如果没有定义，默认为48，这是最小值。

图像形状

你可以使用图像形状在流程图中包含一个图像。定义图像形状的语法如下：

流程图 TD
    A@{ img: "https://example.com/image.png", label: "图像标签", pos: "t", w: 60, h: 60, constraint: "off" }

参数

• img: 要显示的图像的URL。
• label: 与图像关联的文本标签。这可以是任何字符串。如果没有定义，则不显示标签。
• pos: 标签的位置。如果没有定义，默认标签位于图像底部。可能的值是：
  • t
  • b
• w: 图像的宽度。如果没有定义，默认为图像的自然宽度。
• h: 图像的高度。如果没有定义，默认为图像的自然高度。
• constraint: 确定图像是否应该限制节点大小。此设置还确保图像保持原始纵横比，根据高度（h）相应调整宽度（w）。如果没有定义，默认为off可能的值是：
  • on
  • off

如果你想调整图像大小，但保持相同的纵横比，设置h，并将constraint: on设置为限制纵横比。例如

流程图 TD
  %% 我的图像保持约束纵横比
  A@{ img: "https://mermaid.js.org/favicon.svg", label: "我的示例图像标签", pos: "t", h: 60, constraint: "on" }

节点之间的链接

节点可以通过链接/边连接。可以有不同类型的链接，或在链接上附加一个文本字符串。

带箭头头的链接

流程图 LR
    A-->B

开放链接

流程图 LR
    A --- B

链接上的文本

流程图 LR
    A-- 这是文本! ---B

或

流程图 LR
    A---|这是文本|B

带箭头头和文本的链接

流程图 LR
    A-->|文本|B

或

流程图 LR
    A-- 文本 -->B

点状链接

流程图 LR
   A-.->B;

带文本的点状链接

流程图 LR
   A-. 文本 .-> B

粗链接

流程图 LR
   A ==> B

带文本的粗链接

流程图 LR
   A == 文本 ==> B

隐形链接

这在某些情况下可能是一个有用的工具，如果你想改变节点的默认位置。

流程图 LR
    A ~~~ B

链接的链式声明

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

流程图 LR
   A -- 文本 --> B -- 文本2 --> C

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

流程图 LR
   a --> b & c--> d

然后你可以以非常富有表现力的方式描述依赖关系。像下面的一行代码：

流程图 TB
    A & B--> C & D

如果你使用基本语法描述相同的图表，将需要四行。瑞典语lagom这个词浮现在脑海中。它的意思是，不多也不少。这也适用于富有表现力的语法。

流程图 TB
    A --> C
    A --> D
    B --> C
    B --> D

给边附加ID

Mermaid现在支持给边附加ID，类似于可以给节点附加ID和元数据。这个特性为更高级的样式、类和动画功能奠定了基础。

语法：

要给边一个ID，在边的语法前加上ID，后跟@字符。例如：

流程图 LR
  A e1@--> B

在这个例子中，e1是连接A到B的边的ID。然后你可以像节点一样，在后续定义或样式声明中使用这个ID。

打开动画

一旦给边分配了ID，你可以通过定义边的属性来打开该边的动画：

流程图 LR
  A e1@==> B
  e1@{ animate: true }

这告诉Mermaid边e1应该有动画效果。

选择动画类型

在初始版本中，支持两种动画速度：fast和slow。选择特定的动画类型等同于启用动画并一次性设置动画速度。

示例：

流程图 LR
  A e1@--> B
  e1@{ animation: fast }

这等同于{ animate: true, animation: fast }。

使用classDef语句进行动画

你也可以通过给它们分配一个类，然后定义一个classDef语句中的动画属性来给边添加动画。例如：

流程图 LR
  A e1@--> B
  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate

在这个片段中：

• e1@-->创建了一个ID为e1的边。
• classDef animate定义了一个名为animate的类，具有样式和动画属性。
• class e1 animate将animate类应用到边e1。

关于转义逗号的注释： 当设置stroke-dasharray属性时，记得将逗号转义为\,，因为逗号在Mermaid的风格定义中用作分隔符。

新箭头类型

支持新类型的箭头：

• 圆形边
• 交叉边

圆形边示例

流程图 LR
    A --o B

交叉边示例

流程图 LR
    A --x B

多向箭头

可以使用方法向箭头。

流程图 LR
    A o--o B
    B <--> C
    C x--x D

链接的最小长度

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

在以下示例中，在节点_B_到节点_E的链接中添加了两个额外的破折号，使其跨越比常规链接多两个等级：

流程图 TD
    A[开始] --> B{是吗？}
    B -->|是| C[OK]
    C --> D[重新思考]
    D --> B
    B ---->|不是| E[结束]

注意 链接可能仍然比请求的数量更长 由渲染引擎决定以适应其他请求。

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

流程图 TD
    A[开始] --> B{是吗？}
    B -- 是 --> C[OK]
    C --> D[重新思考]
    D --> B
    B -- 不 ----> E[结束]

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

长度	1	2	3
正常	---	----	-----
正常带箭头	-->	--->	---->
粗	===	====	=====
粗带箭头	==>	===>	====>
点状	-.-	-..-	-...-
点状带箭头	-.->	-..->	-...->

破坏语法的特殊字符

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

流程图 LR
    id1["这是框中的（文本）"]

实体代码转义字符

可以使用示例中的风格转义字符。

    流程图 LR
        A["A双引号：#quot;"] --> B["A十进制字符：#9829;"]

给出的数字是十进制，所以#可以编码为#35;。也支持使用HTML字符名称。

子图

子图 title
    图定义
结束

下面是一个示例：

流程图 TB
    c1-->a2
    子图 one
    a1-->a2
    结束
    子图 two
    b1-->b2
    结束
    子图 three
    c1-->c2
    结束

也可以为子图设置显式ID。

流程图 TB
    c1-->a2
    子图 ide1 [one]
    a1-->a2
    结束

流程图

使用流程图类型的图，也可以像下面的流程图一样，将边设置到子图和从子图：

流程图 TB
    c1-->a2
    子图 one
    a1-->a2
    结束
    子图 two
    b1-->b2
    结束
    子图 three
    c1-->c2
    结束
    one --> two
    three --> two
    两个 --> c2

子图方向

使用流程图类型的图，可以使用方向声明来设置子图的渲染方向，如下例所示。

流程图 LR
 子图 TOP
    方向 TB
    子图 B1
        方向 RL
        i1 -->f1
    结束
    子图 B2
        方向 BT
        i2 -->f2
    结束
  结束
  A --> TOP --> B
  B1 --> B2

限制

如果任何子图的节点链接到外部，子图方向将被忽略。相反，子图将继承父图的方向：

流程图 LR
    子图 subgraph1
        方向 TB
        顶部1[顶部] --> 底部1[底部]
    结束
    子图 subgraph2
        方向 TB
        顶部2[顶部] --> 底部2[底部]
    结束
    %% ^ 这些子图是相同的，除了链接到它们的方式：

    %% 链接*到*子图1：保持子图1的方向
    外部 --> 子图1
    %% 链接*在*子图2内：
    %% 子图2继承顶级图（LR）的方向
    外部 ---> 顶部2

Markdown字符串

“Markdown字符串”功能通过提供更多样化的字符串类型来增强流程图和思维导图，该类型支持文本格式选项，如粗体和斜体，并自动包装标签中的文本。

---
配置：
  流程图：
    htmlLabels: false
---
流程图 LR
子图 "One"
  a("`猫**
  在帽子里`") -- "边标签" --> b{{"`狗**在猪圈里`"}}
结束
子图 "`**Two**`"
  c("`猫**
  在帽子里`") -- "`粗体**边标签**`" --> d("狗在猪圈里")
结束

格式：

• 对于粗体文本，使用双星号（**）在文本前后。
• 对于斜体，使用单星号（*）在文本前后。
• 使用传统字符串时，你需要添加<br>标签以在节点中包装文本。然而，Markdown字符串在文本过长时自动包装文本，并允许你通过简单地使用换行符而不是<br>标签来开始新一行。

这个功能适用于节点标签、边标签和子图标签。

自动包装可以通过使用

---
配置：
  markdownAutoWrap: false
---
图 LR

交互

可以为节点绑定点击事件，点击可以导致JavaScript回调或链接打开在新的浏览器标签页中。

当使用`securityLevel='strict'`时，此功能被禁用，使用`securityLevel='loose'`时启用。```

点击 nodeId 回调 点击 nodeId 调用 callback()

- nodeId是节点的ID
- callback是在显示图表的页面上定义的JavaScript函数的名称，该函数将使用nodeId作为参数被调用。

以下是工具提示使用的示例：

```html
<script>
  window.callback = function (){
    alert('触发了一个回调');
  };
</script>

工具提示文本被双引号包围。工具提示的样式由类.mermaidTooltip设置。

流程图 LR
    A-->B
    B-->C
    C-->D
    点击 A 回调 "工具提示用于回调"
    点击 B "https://www.github.com" "这是一个工具提示用于链接"
    点击 C 调用 callback() "工具提示用于回调"
    点击 D href "https://www.github.com" "这是一个工具提示用于链接"

成功 工具提示功能和链接到URL的能力从版本0.5.2开始可用。

?> 由于Docsify处理JavaScript回调函数的限制，上述代码的替代工作演示可以在这个jsfiddle查看。

链接默认在同一个浏览器标签页/窗口中打开。可以通过添加链接目标到点击定义（支持_self、_blank、_parent和_top）来更改这一点：

流程图 LR
    A-->B
    B-->C
    C-->D
    D-->E
    点击 A "https://www.github.com" _blank
    点击 B "https://www.github.com" "在这个新标签页中打开" _blank
    点击 C href "https://www.github.com" _blank
    点击 D href "https://www.github.com" "在这个新标签页中打开" _blank

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

<body>
  <pre class="mermaid">
    流程图 LR
        A-->B
        B-->C
        C-->D
        点击 A 回调 "工具提示"
        点击 B "https://www.github.com" "这是一个链接"
        点击 C 调用 callback() "工具提示"
        点击 D href "https://www.github.com" "这是一个链接"
  </pre>

  <script>
    window.callback = function (){
      alert('触发了一个回调');
    };
    const config = {
      startOnLoad: true,
      流程图: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      安全等级：'宽松',
    };
    mermaid.initialize(config);
  </script>
</body>

注释

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

流程图 LR
%% 这是一个注释 A -- 文本 --> B{节点}
   A -- 文本 --> B -- 文本2 --> C

样式和类

链接样式

可以对链接进行样式设置。例如，你可能想要对逆流程的链接进行样式设置。由于链接没有像节点那样的ID，需要另一种方式来决定应该附加哪种样式到链接上。而不是ID，使用的是链接在图中定义的顺序号，或者使用默认值来应用于所有链接。在下面的示例中，链接样式声明中定义的样式将属于图中的第四个链接：

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

也可以在单个声明中为多个链接添加样式，通过用逗号分隔链接编号：

linkStyle 1,2,7 color:blue;

样式线条曲线

可以对线条的类型进行样式设置，如果默认方法不能满足你的需求。 可用的曲线风格包括basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、 natural、step、stepAfter和stepBefore。

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

线条样式可以通过两种方式实现：

1. 更改所有线条的曲线风格
2. 更改特定线条的曲线风格

图级别曲线风格

在这个例子中，一个从左到右的图表使用stepBefore曲线风格：

---
配置：
  流程图：
    curve: stepBefore
---
图 LR

边级别曲线风格使用边ID（v11.10.0+）

可以给边分配ID。分配ID后，可以使用以下语法修改边的curve属性来修改线条样式：

流程图 LR
    A e1@==> B
    A e2@--> C
    e1@{ curve: linear }
    e2@{ curve: natural }

任何在边级别修改的边曲线风格都会覆盖图级别风格。

如果同一个边被修改多次，最后一个修改将被渲染。

节点样式

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

流程图 LR
    id1(开始)-->id2(停止)
    样式 id1 fill:#f9f,stroke:#333,stroke-width:4px
    样式 id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

类

更方便的是定义一个类样式，然后将其附加到具有不同外观的节点上。

一个类定义看起来像下面的例子：

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

也可以在一个声明中为多个类定义样式：

    classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点的操作如下：

    class nodeId1 className;

也可以在一个声明中将类附加到一组节点：

    class nodeId1,nodeId2 className;

添加类的更短形式是使用:::操作符将类名附加到节点：

流程图 LR
    A:::someclass --> B
    classDef someclass fill:#f96

当声明多个节点链接时也可以使用这种形式：

流程图 LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

CSS类

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

示例样式

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

示例定义

流程图 LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    类 A cssClass

默认类

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

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

对fontawesome的基本支持

可以使用fontawesome中的图标。

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

流程图 TD
    B["fa:fa-twitter 和平"]
    B-->C[fa:fa-ban 禁止]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro 也许？)

显示这些FontAwesome图标有两种方式：

注册FontAwesome图标包（v11.7.0+）

可以按照“注册图标包”说明注册自己的FontAwesome图标包。

支持的前缀：fa、fab、fas、far、fal、fad。

请注意，如果没有注册FontAwesome包，将回退到FontAwesome CSS。

注册FontAwesome CSS

Mermaid支持FontAwesome，只要网站包含CSS即可。

Mermaid对可以使用的FontAwesome版本没有任何限制。

请参阅官方FontAwesome文档了解如何在网站上包含它。

在<head>中添加此片段将添加对FontAwesome v6.5.1的支持

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
  rel="stylesheet"
/>

自定义图标

只要网站导入相应的工具包，就可以使用来自FontAwesome的自定义图标。

请注意，这目前是FontAwesome的付费功能。

对于自定义图标，需要使用fak前缀。

示例

流程图 TD
    B[fa:fa-twitter] %% 标准图标
    B-->E(fak:fa-custom-icon-name) %% 自定义图标

并尝试渲染它

流程图 TD
    B["fa:fa-twitter 和平"]
    B-->C["fab:fa-truck-bold 一个自定义图标"]

图声明中顶点和链接之间有空格，并且没有分号

• 在图声明中，语句也可以在没有分号的情况下结束。在0.2.16版本之后，用分号结束图声明是可选的。因此，下面的图声明与旧的图声明一样有效。

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

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

流程图 LR
    A[硬边] -->|链接文本| B(圆边)
    B --> C{决策}
    C -->|一| D[结果一]
    C -->|二| E[结果二]

配置

渲染器

图表的布局由渲染器完成。默认渲染器是dagre。

从Mermaid版本9.4开始，可以使用名为elk的备用渲染器。elk渲染器对于更大和/或更复杂的图表更好。

_elk_渲染器是一个实验性功能。 你可以通过添加此指令将渲染器更改为elk：

配置：
  流程图：
    defaultRenderer: "elk"

请注意，网站需要使用Mermaid版本9.4+才能正常工作，并在此功能启用的延迟加载配置中。

宽度

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

这是通过定义mermaid.flowchartConfig或使用CLI使用JSON文件配置来完成的。如何使用CLI在mermaidCLI页面中描述。 mermaid.flowchartConfig可以设置为带有配置参数的JSON字符串或相应的对象。

mermaid.flowchartConfig = {
    宽度: 100%
}

<!— cspell:ignore lagom —>