Mermaid 使用教程之流程图 - 从入门到精通

news2025/1/11 11:42:41

本文由 Mermaid中文文档 整理而来，并且它同时提供了一个Mermaid在线编辑器。

Mermaid 流程图 - 基本语法​

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

WARNING

如果在流程图节点中使用“end”这个词，整个词或其中的字母必须大写（例如“End”或“END”）。在小写字母中输入“end”将会导致流程图出现问题。

WARNING

如果在连接的流程图节点中使用“o”或“x”作为首字母，请在前面加一个空格或将该字母大写（例如“dev--- ops”、“dev---Ops”）。 输入“A---oB”将创建一个[circle edge](#circle-edge-example)。 输入“A---xB”将创建一个[cross edge](#cross-edge-example)。

节点​

Code:
---
title: 节点
---
flowchart LR
    id

节点

NOTE

id是显示在框中的内容。

除了`flowchart`，也可以使用`graph`。

带文本的节点​

也可以设置与id不同的文本。 如果多次进行此操作，最后找到的文本将用于该节点。如果稍后为该节点定义边时，您可以省略文本定义。先前定义的文本将在渲染框时使用。

Code:
---
title: 带文本的节点
---
flowchart LR
    id1[这是框中的文本]

带文本的节点

Unicode文本​

使用"将unicode文本括起来。

Code:
flowchart LR
    id["这是 ❤ Unicode"]

Markdown格式化​

使用双引号和反引号 "` text `" 将Markdown文本括起来。

Code:
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`这一行 **是** _Markdown_`"]
    newLines["`Line 1
    Line 2
    Line 3`"]
    markdown --> newLines

方向​

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

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

Code:
flowchart TD
    Start --> Stop

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

Code:
flowchart LR
    Start --> Stop

可能的流程图方向:

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

节点形状​

带圆边的节点​

Code:
flowchart LR
    id1(这是框中的文本)

体育馆形状的节点​

Code:
flowchart LR
    id1([这是框中的文本])

子程序形状的节点​

Code:
flowchart LR
    id1[[这是框中的文本]]

圆柱形状的节点​

Code:
flowchart LR
    id1[(数据库)]

圆形的节点​

Code:
flowchart LR
    id1((这是圆形中的文本))

不对称形状的节点​

Code:
flowchart LR
    id1>这是框中的文本]

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

菱形节点​

Code:
flowchart LR
    id1{这是框中的文本}

六边形节点​

Code:

mermaid

flowchart LR
    id1{{这是框中的文本}}

平行四边形​

Code:
flowchart TD
    id1[/这是框中的文本/]

反平行四边形​

Code:
flowchart TD
    id1[\这是框中的文本\]

梯形​

Code:
flowchart TD
    A[/圣诞节\]

反梯形​

Code:
flowchart TD
    B[\去购物/]

双圈​

Code:

mermaid

flowchart TD
    id1(((这是圈中的文本)))

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

Mermaid引入30种新形状，以增强流程图创建的灵活性和精确性。这些新形状提供了更多选项，用于在流程图中可视化地表示过程、决策、事件、数据存储以及其他元素，提高了清晰度和语义意义。

新的形状定义语法

Mermaid现在支持一种通用语法来定义形状类型，以适应不断增长的形状数量。此语法允许您使用清晰和灵活的格式将特定形状分配给节点：

A@{ shape: rect }

此语法创建节点A为矩形。其渲染方式与A["A"]或A相同。

新形状的示例流程图​

以下是利用一些新引入的形状的示例流程图：

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

过程​

Code:
flowchart TD
    A@{ shape: rect, label: "这是一个过程" }

事件​

Code:
flowchart TD
    A@{ shape: rounded, label: "这是一个事件" }

终点（体育馆）​

Code:
flowchart TD
    A@{ shape: stadium, label: "终点" }

子过程​

Code:
flowchart TD
    A@{ shape: subproc, label: "这是一个子过程" }

数据库（圆柱）​

Code:
flowchart TD
    A@{ shape: cyl, label: "数据库" }

开始（圆形）​

Code:
flowchart TD
    A@{ shape: circle, label: "开始" }

不对称形状​

Code:
flowchart TD
    A@{ shape: odd, label: "不对称形状" }

决策（菱形）​

Code:
flowchart TD
    A@{ shape: diamond, label: "决策" }

准备条件（六边形）​

Code:
flowchart TD
    A@{ shape: hex, label: "准备条件" }

数据输入/输出（倾斜右）​

Code:
flowchart TD
    A@{ shape: lean-r, label: "输入/输出" }

数据输入/输出（倾斜左）​

Code:
flowchart TD
    A@{ shape: lean-l, label: "输出/输入" }

优先操作（底部梯形）​

Code:
flowchart TD
    A@{ shape: trap-b, label: "优先操作" }

手动操作（顶部梯形）​

Code:
flowchart TD
    A@{ shape: trap-t, label: "手动操作" }

停止（双圈）​

Code:

mermaid

flowchart TD
    A@{ shape: dbl-circ, label: "停止" }

文本块​

Code:
flowchart TD
    A@{ shape: text, label: "这是一个文本块" }

这是一个文本块

卡片（缺口矩形）​

Code:
flowchart TD
    A@{ shape: notch-rect, label: "卡片" }

有线/阴影过程​

Code:
flowchart TD
    A@{ shape: lin-rect, label: "有线过程" }

开始（小圆形）​

Code:
flowchart TD
    A@{ shape: sm-circ, label: "小开始" }

停止（框架圆形）​

Code:
flowchart TD
    A@{ shape: framed-circle, label: "停止" }

分叉/合并（长矩形）​

Code:
flowchart TD
    A@{ shape: fork, label: "分叉或合并" }

整理（沙漏）​

Code:
flowchart TD
    A@{ shape: hourglass, label: "整理" }

注释（大括号）​

Code:
flowchart TD
    A@{ shape: comment, label: "注释" }

右侧注释（右大括号）​

Code:
flowchart TD
    A@{ shape: brace-r, label: "注释" }

两侧都带大括号的注释​

Code:
flowchart TD
    A@{ shape: braces, label: "注释" }

通信链接（闪电）​

Code:
flowchart TD
    A@{ shape: bolt, label: "通信链接" }

文档​

Code:
flowchart TD
    A@{ shape: doc, label: "文档" }

延迟（半圆角矩形）​

Code:
flowchart TD
    A@{ shape: delay, label: "延迟" }

直接存储（横向圆柱）​

Code:
flowchart TD
    A@{ shape: das, label: "直接访问存储" }

磁盘存储（有线圆柱）​

Code:
flowchart TD
    A@{ shape: lin-cyl, label: "磁盘存储" }

显示（曲线梯形）​

Code:
flowchart TD
    A@{ shape: curv-trap, label: "显示" }

分割过程（分割矩形）​

Code:
flowchart TD
    A@{ shape: div-rect, label: "分割过程" }

提取（小三角形）​

Code:
flowchart TD
    A@{ shape: tri, label: "提取" }

内部存储（窗格）​

Code:
flowchart TD
    A@{ shape: win-pane, label: "内部存储" }

交点（填充圆形）​

Code:
flowchart TD
    A@{ shape: f-circ, label: "交点" }

有线文档​

Code:
flowchart TD
    A@{ shape: lin-doc, label: "有线文档" }

循环限制（缺口五边形）​

Code:
flowchart TD
    A@{ shape: notch-pent, label: "循环限制" }

手动文件（翻转三角形）​

Code:
flowchart TD
    A@{ shape: flip-tri, label: "手动文件" }

手动输入（倾斜矩形）​

Code:
flowchart TD
    A@{ shape: sl-rect, label: "手动输入" }

多文档（堆叠文档）​

Code:
flowchart TD
    A@{ shape: docs, label: "多个文档" }

多过程（堆叠矩形）​

Code:
flowchart TD
    A@{ shape: processes, label: "多个过程" }

纸带（标志）​

Code:
flowchart TD
    A@{ shape: flag, label: "纸带" }

存储数据（领结矩形）​

Code:
flowchart TD
    A@{ shape: bow-rect, label: "存储数据" }

总结（交叉圆形）​

Code:
flowchart TD
    A@{ shape: cross-circ, label: "总结" }

标记文档​

Code:
flowchart TD
    A@{ shape: tag-doc, label: "标记文档" }

标记过程（标记矩形）​

Code:
flowchart TD
    A@{ shape: tag-rect, label: "标记过程" }

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

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

图标形状​

您可以使用icon形状在流程图中包含一个图标。要使用图标，您需要先注册图标包。请按照此处提供的说明进行操作。定义图标形状的语法如下：

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

参数​

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

图像形状​

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

Code:
flowchart 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

这些新形状为您的流程图提供额外的灵活性和视觉吸引力，使其更具信息性和吸引力。

节点之间的链接​

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

带箭头的链接​

Code:
flowchart LR
    A-->B

开放链接​

Code:
flowchart LR
    A --- B

链接上的文本​

Code:
flowchart LR
    A-- 这是文本! ---B

或

Code:
flowchart LR
    A---|这是文本|B

带箭头和文本的链接​

Code:
flowchart LR
    A-->|文本|B

或

Code:
flowchart LR
    A-- 文本 -->B

虚线链接​

Code:
flowchart LR
   A-.->B;

带文本的虚线链接​

Code:
flowchart LR
   A-. 文本 .-> B

粗线链接​

Code:
flowchart LR
   A ==> B

带文本的粗线链接​

Code:

mermaid

flowchart LR
   A == 文本 ==> B

无形链接​

这在某些情况下是一个有用的工具，当你想更改节点的默认位置时。

Code:
flowchart LR
    A ~~~ B

链式连接​

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

Code:
flowchart LR
   A -- 文本 --> B -- 文本2 --> C

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

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

您可以以非常清晰的方式描述依赖关系。就像下面的一行代码：

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

如果您使用基本语法描述相同的图形，将需要四行代码。值得警告的是，人们可能在Markdown表单中过度使用此功能，使流程图更难阅读。瑞典词“lagom”浮现在我的脑海中。它的意思是，不太多也不少。对于表达式语法也是如此。

新箭头类型​

现在支持新的箭头类型：

  • 圆形边
  • 交叉边

圆形边示例​

Code:
flowchart LR
    A --o B

交叉边示例​

Code:
flowchart LR
    A --x B

多方向箭头​

可以使用多方向箭头。

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

链接的最小长度​

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

在下面的例子中，链接从节点_B_到节点_E_添加了两个额外的破折号，因此它跨度比常规链接多两个等级：

Code:
flowchart TD
    A[开始] --> B{是否是?}
    B -->|是| C[好的]
    C --> D[重新考虑]
    D --> B
    B ---->|否| E[结束]

注意 链接可能仍然超出所请求数量的等级，由渲染引擎调整以适应其他请求。

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

Code:
flowchart TD
    A[开始] --> B{是否是?}
    B -- 是 --> C[好的]
    C --> D[重新考虑]
    D --> B
    B -- 否 ----> E[结束]

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

长度123
正常------------
带箭头正常-->--->---->
粗线============
带箭头的粗线==>===>====>
虚线-.--..--...-
带箭头的虚线-.->-..->-...->

破坏语法的特殊字符​

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

Code:
flowchart LR
    id1["这是一段（文本）"]

转义字符的实体代码​

可以使用以下语法转义字符。

Code:
    flowchart LR
        A["一个双引号:#quot;"] --> B["十进制字符:#9829;"]

给定的数字是十进制，因此#可以被编码为#35;。同样也支持使用HTML字符名称。

子图​

subgraph title
    graph definition
end

以下是示例：

Code:
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

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

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

流程图​

使用图形类型流程图，还可以将边设置到子图及其返回，如下所示：

Code:
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

子图中的方向​

使用图类型流程图，可以使用方向语句设置子图的渲染方向，如下所示。

Code:
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

限制​

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

Code:

mermaid

flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ 这些子图是相同的，只是在于他们的链接：

    %% 链接到subgraph1: subgraph1的方向得以保持
    outside --> subgraph1
    %% 链接在subgraph2内：
    %% subgraph2继承了顶层图的方向（LR）
    outside ---> top2

Markdown字符串​

“Markdown Strings”功能通过提供更灵活的字符串类型，增强了流程图和思维导图，支持文本格式化选项，如粗体和斜体，并自动在标签内换行文本。

Code:

mermaid

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
subgraph "One"
  a("`这只 **猫** 在帽子里`") -- "边标签" --> b{{"`这只 **狗** 在母猪里`"}}
end
subgraph "`**Two**`"
  c("`这只 **猫** 在帽子里`") -- "`粗体 **边标签**`" --> d("这只狗在母猪里")
end

格式化：

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

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

自动换行可以通过使用

---
config:
  markdownAutoWrap: false
---
graph LR

禁用。

交互​

可以将点击事件绑定到节点，点击可以引导至javascript回调或将在新浏览器标签中打开的链接。

NOTE

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

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

以下是tooltip使用的示例：

<script>
  window.callback = function () {
    alert('回调被触发');
  };
</script>

tooltip文本用双引号括起来。tooltip的样式由类.mermaidTooltip设置。

Code:
flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "回调的tooltip"
    click B "https://www.github.com" "这是一个链接的tooltip"
    click C call callback() "回调的tooltip"
    click D href "https://www.github.com" "这是一个链接的tooltip"

成功 tooltip功能和链接URL的能力从版本0.5.2开始可用。

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

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

Code:
flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "在新标签中打开" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "在新标签中打开" _blank

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

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "tooltip"
        click B "https://www.github.com" "这是一个链接"
        click C call callback() "tooltip"
        click D href "https://www.github.com" "这是一个链接"
  </pre>

  <script>
    window.callback = function () {
      alert('回调被触发');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

注释​

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

样式和类​

样式链接​

可以给链接添加样式。例如，您可能想样式化流程中的反向链接。由于链接没有与节点相同的id，因此需要另一种方式来决定应该附加什么样的样式。链接样式将根据链接在图中的定义顺序编号，或使用default来应用于所有链接。在以下示例中，链接样式声明中定义的样式将属于图中的第四个链接：

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。

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

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

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

样式化节点​

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

Code:
flowchart LR
    id1(开始)-->id2(停止)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style 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;

使用:::运算符将类附加到节点的简化形式，如下所示：

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

此形式可用于在节点之间声明多个链接：

Code:
flowchart 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>

示例定义

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

默认类​

如果类名为default，则会分配给所有没有特定类定义的类。

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

Fontawesome的基本支持​

可以从fontawesome添加图标。

图标通过语法fa:#图标名称#访问。

Code:
flowchart TD
    B["fa:fa-twitter 以和平为主题"]
    B-->C[fa:fa-ban 禁止]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro 也许?)

Mermaid支持Font Awesome，只要CSS包含在网站中。Mermaid对可以使用的Font Awesome版本没有任何限制。

请查阅官方Font Awesome文档了解如何在您的网站上包含它。

在<head>中添加此代码片段将添加对Font Awesome v6.5.1的支持

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

自定义图标​

只要网站导入相应的工具包，就可以使用从Font Awesome平台提供的自定义图标。

请注意，这目前是Font Awesome的一项付费功能。

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

示例

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

尝试渲染它

Code:
flowchart TD
    B["fa:fa-twitter 以和平为主题"]
    B-->C["fab:fa-truck-bold 自定义图标"]

图表声明之间的空格和无需分号​

  • 在图表声明中，语句现在也可以在没有分号的情况下结束。在0.2.16版本发布后，以分号结束图表声明已成为可选，因此以下图表声明也是有效的，同时旧的图表声明也保持有效。

  • 节点和链接之间允许单个空格。但是，节点与其文本之间以及链接与其文本之间不得存在空格。图表边缘的新声明如下所示，该声明也与旧的图表边缘声明有效。

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

配置​

渲染器​

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

从Mermaid版本9.4开始，可以使用一个名为elk的替代渲染器。elk渲染器更适合大型和/或更复杂的图。

elk渲染器是一个实验性特性。

您可以通过添加这个指令将渲染器更改为elk：

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

NOTE

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

宽度​

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

这可以通过定义mermaid.flowchartConfig或通过CLI使用JSON文件与配置来完成。关于如何使用CLI的信息可以在mermaidCLI页面上找到。

mermaid.flowchartConfig = {
    width: 100%
}

​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2274883.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Flink系统知识讲解之：如何识别反压的源头

Flink系统知识讲解之：如何识别反压的源头

Flink系统知识之&#xff1a;如何识别反压的源头 什么是反压 Ufuk Celebi 在一篇古老但仍然准确的文章中对此做了很好的解释。如果您不熟悉这个概念&#xff0c;强烈推荐您阅读这篇文章。如果想更深入、更低层次地了解该主题以及 Flink 网络协议栈的工作原理&#xff0c;这里有…
阅读更多...
网络-ping包分析

网络-ping包分析

-a&#xff1a;使 ping 在收到响应时发出声音&#xff08;适用于某些操作系统&#xff09;。-b&#xff1a;允许向广播地址发送 ping。-c count&#xff1a;指定发送的 ping 请求的数量。例如&#xff0c;ping -c 5 google.com 只发送 5 个请求。-i interval&#xff1a;指定两…
阅读更多...
国产linux系统（银河麒麟，统信uos）使用 PageOffice 实现后台生成单个PDF文档

国产linux系统（银河麒麟，统信uos）使用 PageOffice 实现后台生成单个PDF文档

PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;、龙芯&#xff08;LoogArch&#xff09;芯片架构。 PageOffice 版本&…
阅读更多...
Win10微调大语言模型ChatGLM2-6B

Win10微调大语言模型ChatGLM2-6B

在《Win10本地部署大语言模型ChatGLM2-6B-CSDN博客》基础上进行&#xff0c;官方文档在这里&#xff0c;参考了这篇文章 首先确保ChatGLM2-6B下的有ptuning AdvertiseGen下载地址1&#xff0c;地址2&#xff0c;文件中数据留几行 模型文件下载地址 &#xff08;注意&#xff1…
阅读更多...
Windows11环境下设置MySQL8字符集utf8mb4_unicode_ci

Windows11环境下设置MySQL8字符集utf8mb4_unicode_ci

1.关闭MySQL8的服务CTRLshiftESC&#xff0c;找到MySQL关闭服务即可 2.找到配置文件路径&#xff08;msi版本默认&#xff09; C:\ProgramData\MySQL\MySQL Server 8.0 3.使用管理员权限编辑my.ini文件并保存 # Other default tuning values # MySQL Server Instance Config…
阅读更多...
js代理模式

js代理模式

允许在不改变原始对象的情况下&#xff0c;通过代理对象来访问原始对象。代理对象可以在访问原始对象之前或之后&#xff0c;添加一些额外的逻辑或功能。 科学上网过程 一般情况下,在访问国外的网站,会显示无法访问 因为在dns解析过程,这些ip被禁止解析,所以显示无法访问 引…
阅读更多...
vue3 + ts + element-plus（el-upload + vuedraggable实现上传OSS并排序）

vue3 + ts + element-plus（el-upload + vuedraggable实现上传OSS并排序）

这里创建项目就不多说了 安装element-plus npm install element-plus 安装vuedraggable npm install vuedraggable 安装ali-oss npm install ali-oss 这里是封装一下&#xff1a;在components创建文件夹jc-upload>jc-upload.vue 在封装的过程中遇到了一个问题就是dr…
阅读更多...
理解Unity脚本编译过程：程序集

理解Unity脚本编译过程：程序集

https://docs.unity3d.com/Manual/script-compilation.html 关于Unity C#脚本编译的细节&#xff0c;其中一个比较重要的知识点就是如何自定义Assembly。 预定义的assembly 默认情况下&#xff0c;Unity会按照这个规则进行编译。 PhaseAssembly nameScript files1Assembly-…
阅读更多...
设计模式 行为型 责任链模式（Chain of Responsibility Pattern）与 常见技术框架应用 解析

设计模式 行为型 责任链模式（Chain of Responsibility Pattern）与 常见技术框架应用 解析

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许将请求沿着处理者链进行发送。每个处理者对象都有机会处理该请求&#xff0c;直到某个处理者决定处理该请求为止。这种模式的主要目的是避免请求的发送者和接收者之间…
阅读更多...
VS2022如何修改我们新建工程打开新建文件中，默认输入我们的main函数和宏定义

VS2022如何修改我们新建工程打开新建文件中，默认输入我们的main函数和宏定义

1.右击我们的VS环境&#xff0c;选择【打开文件位置】 2. 进入C:\Program Files\Microsoft Visual Studio\2022\Community\Common7\IDE 目录 进入【VC】文件夹 进入【VCProjectItems】文件夹 3. 修改newcfile.cpp文件 右击选择【打开方式】选择【记事本】 添加如下内容 #defi…
阅读更多...
2025-1-10-sklearn学习(36、37) 数据集转换-无监督降维+随机投影 沙上并禽池上暝。云破月来花弄影。

2025-1-10-sklearn学习(36、37) 数据集转换-无监督降维+随机投影 沙上并禽池上暝。云破月来花弄影。

文章目录 sklearn学习(36、37) 数据集转换-无监督降维随机投影sklearn学习(36) 数据集转换-无监督降维36.1 PCA: 主成份分析36.2 随机投影36.3 特征聚集 sklearn学习(37) 数据集转换-随机投影37.1 Johnson-Lindenstrauss 辅助定理37.2 高斯随机投影37.3 稀疏随机矩阵 sklearn学…
阅读更多...
openssl编译

openssl编译

关于windows下&#xff0c;openssl编译 环境准备 安装 perl:https://djvniu.jb51.net/200906/tools/ActivePerl5_64.rar安装nasm&#xff1a;https://www.nasm.us/pub/nasm/releasebuilds/2.13.01/win64/nasm-2.13.01-installer-x64.exe下载opensll源码&#xff1a;https://o…
阅读更多...
2025-1-9 QT 使用 QXlsx库 读取 .xlsx 文件 —— 导入 QXlsx库以及读取 .xlsx 的源码 实践出真知，你我共勉

2025-1-9 QT 使用 QXlsx库 读取 .xlsx 文件 —— 导入 QXlsx库以及读取 .xlsx 的源码 实践出真知，你我共勉

文章目录 1. 导入QXlsx库2. 使用 QXlsx库 读取 .xlsx 文件小结 网上有很多教程&#xff0c;但太费劲了&#xff0c;这里有个非常简便的好方法&#xff0c;分享给大家。 1. 导入QXlsx库 转载链接 &#xff1a;https://github.com/QtExcel/QXlsx/blob/master/HowToSetProject.md…
阅读更多...
先辑芯片HPM5300系列之SEI多摩川协议命令表问题研究

先辑芯片HPM5300系列之SEI多摩川协议命令表问题研究

多摩川协议有9条命令&#xff0c;但是先辑SEI的命令表只有8张。0-6是可用的&#xff0c;第7张是黑洞表&#xff0c;所以只有7张可用。 命令表的限制颇多&#xff0c;比如命令表只能按顺序使用 &#xff1a;例如0、1、3&#xff0c;那么命令表3是不能用的。 如果想要实现9个命令…
阅读更多...
kotlin项目无法访问Java类的问题

kotlin项目无法访问Java类的问题

使用IntelliJ创建一个Kotlin项目&#xff0c;然后在src/main/kotlin中创建一个java接口&#xff1a;Animal.java&#xff0c;然后在Main.kt中打印这个java接口&#xff0c;如下&#xff1a; fun main() {println(Animal::class.java) }代码在编辑器中并没有报错&#xff0c;但…
阅读更多...
全栈面试（一）Basic/微服务

全栈面试（一）Basic/微服务

文章目录 项目地址一、Basic InterviewQuestions1. tell me about yourself?2. tell me about a time when you had to solve a complex code problem?3. tell me a situation that you persuade someone at work?4. tell me a about a confict with a teammate and how you…
阅读更多...
医疗可视化大屏 UI 设计新风向

医疗可视化大屏 UI 设计新风向

智能化交互 借助人工智能与机器学习技术&#xff0c;实现更智能的交互功能。如通过语音指令或手势控制来操作大屏&#xff0c;医护人员无需手动输入&#xff0c;可更便捷地获取和处理信息。同时&#xff0c;系统能根据用户的操作习惯和数据分析&#xff0c;自动推荐相关的医疗…
阅读更多...
Angular由一个bug说起之十三：Cross Origin

Angular由一个bug说起之十三：Cross Origin

跨域 想要了解跨域&#xff0c;首要要了解源 什么是源&#xff0c;源等于协议加域名加端口号 只有这三个都相同&#xff0c;才是同源&#xff0c;反之则是非同源。 比如下面这四个里&#xff0c;只有第4个是同源 而浏览器给服务器发送请求时&#xff0c;他们的源一样&#xff0…
阅读更多...
【LeetCode Hot100 贪心算法】 买卖股票的最佳时机、跳跃游戏、划分字母区间

【LeetCode Hot100 贪心算法】 买卖股票的最佳时机、跳跃游戏、划分字母区间

贪心算法 买卖股票的最佳时机买卖股票的最佳时机II跳跃游戏跳跃游戏II划分字母区间 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的…
阅读更多...
MCANet: 基于多模态字幕感知的大语言模型训练无关视频异常检测

MCANet: 基于多模态字幕感知的大语言模型训练无关视频异常检测

目录 摘要01 引言02 相关工作2.1 视频异常检测2.2 基于视频的大语言模型&#xff08;VLLMs&#xff09; 03 方法论3.1 问题定义3.2 MCANet3.3 图像字幕分支3.4 音频字幕分支3.5 基于LLM的异常评分3.6 视频-文本分数优化 04 实验4.1 数据集和评估指标4.2 实现细节4.3 定性结果4.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023