Mermaid语法-流程图

Mermaid语法收集

参考文档：Mermaid中文网

使用方法

屏幕截图 2024-12-24 230117.png

流程图 - 基础语法

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

警告
  如果你在流程图节点中使用单词 “end”，请将整个单词或任何字母大写（例如，”End” 或 “END”），或应用此 workaround。输入全部小写字母的 “end” 将破坏流程图。
  如果你使用字母 “o” 或 “x” 作为连接流程图节点的首字母，请在字母前添加空格或将字母大写（例如，”dev— ops”、”dev—Ops”）。输入 “A—oB” 将创建 circle edge。输入 “A—xB” 将创建 cross edge

一个节点（默认）

1
2
flowchart LR
    id

id 是框中显示的内容。除了flowchart，还可以使用 graph。

带有文本的节点

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

也可以在框中设置与 id 不同的文本。如果执行此操作多次，则它将是为要使用的节点找到的最后一个文本。此外，如果稍后为节点定义边，则可以省略文本定义。渲染盒子时将使用先前定义的值。

统一码文本

使用 " 将 unicode 文本括起来。

1
2
flowchart LR
    id["This ❤ Unicode"]

Markdown格式

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

1
2
3
4
5
6
7
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

方向

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

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

1
2
flowchart TD
    Start --> Stop

这声明流程图是从左到右定向的 (LR)。

1
2
flowchart LR
    Start --> Stop

可能的流程图方向是：

  • TB - 从上到下

  • TD - 自上而下/与自上而下相同

  • BT - 从下到上

  • RL - 右到左

  • LR - 左到右

节点形状

具有圆边的节点

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

体育场形状的节点

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

子程序形状中的节点

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

圆柱形节点

1
2
flowchart LR
    id1[(Database)]

一个圆形的节点

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

形状不对称的节点

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

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

节点

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

六边形节点

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

平行四边形

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

平行四边形 alt

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

梯形

1
2
flowchart TD
    A[/Christmas\]

梯形 alt

1
2
flowchart TD
    B[\Go shopping/]

双圈

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

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

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

形状定义的新语法

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

1
A@{ shape: rect }

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

新形状的完整列表

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

Semantic Name Shape Name Short Name Description Alias Supported
Card Notched Rectangle notch-rect Represents a card card, notched-rectangle
Collate Hourglass hourglass Represents a collate operation collate, hourglass
Com Link Lightning Bolt bolt Communication link com-link, lightning-bolt
Comment Curly Brace brace Adds a comment brace-l, comment
Comment Right Curly Brace brace-r Adds a comment
Comment with braces on both sides Curly Braces braces Adds a comment
Data Input/Output Lean Right lean-r Represents input or output in-out, lean-right
Data Input/Output Lean Left lean-l Represents output or input lean-left, out-in
Database Cylinder cyl Database storage cylinder, database, db
Decision Diamond diam Decision-making step decision, diamond, question
Delay Half-Rounded Rectangle delay Represents a delay half-rounded-rectangle
Direct Access Storage Horizontal Cylinder h-cyl Direct access storage das, horizontal-cylinder
Disk Storage Lined Cylinder lin-cyl Disk storage disk, lined-cylinder
Display Curved Trapezoid curv-trap Represents a display curved-trapezoid, display
Divided Process Divided Rectangle div-rect Divided process shape div-proc, divided-process, divided-rectangle
Document Document doc Represents a document doc, document
Event Rounded Rectangle rounded Represents an event event
Extract Triangle tri Extraction process extract, triangle
Fork/Join Filled Rectangle fork Fork or join in process flow join
Internal Storage Window Pane win-pane Internal storage internal-storage, window-pane
Junction Filled Circle f-circ Junction point filled-circle, junction
Lined Document Lined Document lin-doc Lined document lined-document
Lined/Shaded Process Lined Rectangle lin-rect Lined process shape lin-proc, lined-process, lined-rectangle, shaded-process
Loop Limit Trapezoidal Pentagon notch-pent Loop limit step loop-limit, notched-pentagon
Manual File Flipped Triangle flip-tri Manual file operation flipped-triangle, manual-file
Manual Input Sloped Rectangle sl-rect Manual input step manual-input, sloped-rectangle
Manual Operation Trapezoid Base Top trap-t Represents a manual task inv-trapezoid, manual, trapezoid-top
Multi-Document Stacked Document docs Multiple documents documents, st-doc, stacked-document
Multi-Process Stacked Rectangle st-rect Multiple processes processes, procs, stacked-rectangle
Odd Odd odd Odd shape
Paper Tape Flag flag Paper tape paper-tape
Prepare Conditional Hexagon hex Preparation or condition step hexagon, prepare
Priority Action Trapezoid Base Bottom trap-b Priority action priority, trapezoid, trapezoid-bottom
Process Rectangle rect Standard process shape proc, process, rectangle
Start Circle circ Starting point circ
Start Small Circle sm-circ Small starting point small-circle, start
Stop Double Circle dbl-circ Represents a stop point double-circle
Stop Framed Circle fr-circ Stop point framed-circle, stop
Stored Data Bow Tie Rectangle bow-rect Stored data bow-tie-rectangle, stored-data
Subprocess Framed Rectangle fr-rect Subprocess framed-rectangle, subproc, subprocess, subroutine
Summary Crossed Circle cross-circ Summary crossed-circle, summary
Tagged Document Tagged Document tag-doc Tagged document tag-doc, tagged-document
Tagged Process Tagged Rectangle tag-rect Tagged process tag-proc, tagged-process, tagged-rectangle
Terminal Point Stadium stadium Terminal point pill, terminal
Text Block Text Block text Text block

下面内容不支持

具有新形状的示例流程图

1
2
3
4
5
6
7
8
{% mermaid %}
flowchart RL
    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User   Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}
{% endmermaid %}

进程

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: rect, label: "This is a process" }
{% endmermaid %}

事件

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: rounded, label: "This is an event" }
{% endmermaid %}

~~终点 (体育场) ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: stadium, label: "Terminal point" }
{% endmermaid %}

~~子流程 ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: subproc, label: "This is a subprocess" }
{% endmermaid %}

~~数据库（圆柱体） ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: cyl, label: "Database" }
{% endmermaid %}

~~开始 (圆形) ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: circle, label: "Start" }
{% endmermaid %}

~~奇数 ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: odd, label: "Odd shape" }
{% endmermaid %}

~~决策（菱形） ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: diamond, label: "Decision" }
{% endmermaid %}

准备条件 (六边形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: hex, label: "Prepare conditional" }
{% endmermaid %}

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

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: lean-r, label: "Input/Output" }
{% endmermaid %}

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

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: lean-l, label: "Input/Output" }
{% endmermaid %}

优先操作(梯形底面底部)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: trap-b, label: "Priority action" }
{% endmermaid %}

~~手动操作 (梯形底面顶部) ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: trap-t, label: "Manual operation" }
{% endmermaid %}

~~停止 (双圆圈) ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: dbl-circ, label: "Stop" }
{% endmermaid %}

~~文本块 ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: text, label: "This is a text block" }
{% endmermaid %}

卡片（缺口矩形） 

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: notch-rect, label: "Card" }
{% endmermaid %}

~~带线/阴影流程 ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: lin-rect, label: "Lined process" }
{% endmermaid %}

~~开始 (小圆形) ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: sm-circ, label: "Small start" }
{% endmermaid %}

停止(带框的圆圈)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: framed-circle, label: "Stop" }
{% endmermaid %}

分叉/连接 (长矩形) 

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: fork, label: "Fork or Join" }
{% endmermaid %}

~~整理（沙漏） ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: hourglass, label: "Collate" }
{% endmermaid %}

~~注释（大括号） ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: comment, label: "Comment" }
{% endmermaid %}

注释右侧（大括号右侧） 

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: brace-r, label: "Comment" }
{% endmermaid %}

注释两侧均带括号

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: braces, label: "Comment" }
{% endmermaid %}

~~Com Link（闪电） ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: bolt, label: "Communication link" }
{% endmermaid %}

~~文档 ~~

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: doc, label: "Document" }
{% endmermaid %}

延迟（半圆角矩形） 

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: delay, label: "Delay" }
{% endmermaid %}

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

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: das, label: "Direct access storage" }
{% endmermaid %}

磁盘存储 (带线圆柱体)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: lin-cyl, label: "Disk storage" }
{% endmermaid %}

显示 (弧形梯形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: curv-trap, label: "Display" }
{% endmermaid %}

分割流程 (分割矩形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: div-rect, label: "Divided process" }
{% endmermaid %}

提取(小三角形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: tri, label: "Extract" }
{% endmermaid %}

内部存储(窗格)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: win-pane, label: "Internal storage" }
{% endmermaid %}

连接(实心圆)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: f-circ, label: "Junction" }
{% endmermaid %}

带线文档

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: lin-doc, label: "Lined document" }
{% endmermaid %}

循环限制(缺口五边形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: notch-pent, label: "Loop limit" }
{% endmermaid %}

手动文件(翻转三角形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: flip-tri, label: "Manual file" }
{% endmermaid %}

手动输入(倾斜矩形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: sl-rect, label: "Manual input" }
{% endmermaid %}

多文档(堆叠文档)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: docs, label: "Multiple documents" }
{% endmermaid %}

多进程(堆叠矩形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: processes, label: "Multiple processes" }
{% endmermaid %}

纸带(标志)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: flag, label: "Paper tape" }
{% endmermaid %}

存储的数据(蝴蝶结矩形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: bow-rect, label: "Stored data" }
{% endmermaid %}

摘要(带十字的圆圈)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: cross-circ, label: "Summary" }
{% endmermaid %}

标记的文档

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: tag-doc, label: "Tagged document" }
{% endmermaid %}

标记的流程(标记矩形)

1
2
3
4
{% mermaid %}
flowchart TD
    A@{ shape: tag-rect, label: "Tagged process" }
{% endmermaid %}

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

Mermaid 还引入了 2 种特殊形状来增强你的流程图：图标和图片。这些形状允许你直接在流程图中包括图标和图片，从而提供更多的视觉背景和清晰度。

图标形状

你可以使用 icon 形状在流程图中包括图标。要使用图标，你需要先注册图标包。按照提供的说明。

定义图标形状的语法如下：

flowchart TD
    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
1
2
3
4
{% mermaid %}
flowchart TD
    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
{% endmermaid %}

参数

  • 图标：来自注册图标包的图标名称。

  • 表格：指定图标的背景形状。如果未定义，图标将没有背景。选项包括：

    • square

    • circle

    • rounded

  • 标签：与图标关联的文本标签。这可以是任何字符串。如果未定义，则不会显示任何标签。

  • pos：标签的位置。如果未定义，标签将默认为图标底部。可能的值是：

    • t

    • b

  • h：图标的高度。如果未定义，则默认为 48，这是最小值。

图片形状

你可以使用 image 形状在流程图中包括图片。定义图片形状的语法如下：

1
2
flowchart TD
    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }

参数

  • 图片：要显示的图片的 URL。

  • 标签：与图片关联的文本标签。这可以是任何字符串。如果未定义，则不会显示任何标签。

  • pos：标签的位置。如果未定义，则标签将默认为图片底部。可能的值是：

    • t

    • b

  • w：图片的宽度。如果未定义，则默认为图片的自然宽度。

  • h：图片的高度。如果未定义，则默认为图片的自然高度。

  • 约束：确定图片是否应限制节点大小。此设置还确保图片保持其原始纵横比，并根据宽度（w）调整高度（h）。如果未定义，则默认为 off，可能的值是：

    • on

    • off

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

节点之间的链接

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

带箭头的链接

1
2
3
4
{% mermaid %}
flowchart LR
    A-->B
{% endmermaid %}

一个打开的链接

1
2
3
4
{% mermaid %}
flowchart LR
    A --- B
{% endmermaid %}

链接上的文本

1
2
3
4
{% mermaid %}
flowchart LR
    A-- This is the text! ---B
{% endmermaid %}

带有箭头和文本的链接

1
2
3
4
{% mermaid %}
flowchart LR
    A-->|text|B
{% endmermaid %}

虚线链接

1
2
3
4
{% mermaid %}
flowchart LR
   A-.->B;
{% endmermaid %}

带文本的虚线链接

1
2
3
4
{% mermaid %}
flowchart LR
   A-. text .-> B
{% endmermaid %}

粗链接

1
2
3
4
{% mermaid %}
flowchart LR
   A ==> B
{% endmermaid %}

带文本的粗链接

1
2
3
4
{% mermaid %}
flowchart LR
   A == text ==> B
{% endmermaid %}

看不见的链接

1
2
3
4
{% mermaid %}
flowchart LR
    A ~~~ B
{% endmermaid %}

链接的链接

1
2
3
4
{% mermaid %}
flowchart LR
   A -- text --> B -- text2 --> C
{% endmermaid %}

新的箭头类型

支持新类型的箭头：

  • 圆边

  • 交叉边缘

圆边示例

1
2
3
4
{% mermaid %}
flowchart LR
    A --o B
{% endmermaid %}

交叉边缘示例

1
2
3
4
{% mermaid %}
flowchart LR
    A --x B
{% endmermaid %}

多方向箭头

1
2
3
4
5
6
{% mermaid %}
flowchart LR
    A o--o B
    B <--> C
    C x--x D
{% endmermaid %}

链接的最小长度

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

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

1
2
3
4
5
6
7
8
{% mermaid %}
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
{% endmermaid %}

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

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

1
2
3
4
5
6
7
8
{% mermaid %}
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
{% endmermaid %}

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

长度 1 2 3
普通的 --- ---- -----
正常带箭头 --> ---> ---->
厚的 === ==== =====
粗带箭头 ==> ===> ====>
点状 -.- -..- -...-
带有箭头的虚线 -.-> -..-> -...->

破坏语法的特殊字符

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

1
2
3
4
{% mermaid %}
flowchart LR
    id1["This is the (text) in the box"]
{% endmermaid %}

用于转义字符的实体代码

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

1
2
3
4
{% mermaid %}
flowchart LR
    A["A double quote:#quot;"] --> B["A dec char:#9829;"]
{% endmermaid %}

给出的数字以 10 为基数，因此 # 可以编码为 #35;。还支持使用 HTML 字符名称。

子图

1
2
3
subgraph title
    graph definition
end

下面是一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% mermaid %}
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
{% endmermaid %}

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

1
2
3
4
5
6
7
{% mermaid %}
flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
{% endmermaid %}

流程图

使用图形类型流程图，还可以设置子图的边和子图的边，如下流程图所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% mermaid %}
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
{% endmermaid %}

子图中的方向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% mermaid %}
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
{% endmermaid %}

使用 graphtype 流程图，你可以使用方向语句来设置子图渲染的方向，如本例所示。

局限性

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% mermaid %}
flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Link *within* subgraph2:
    %% subgraph2 inherits the direction of the top-level graph (LR)
    outside ---> top2
{% endmermaid %}

Markdown 字符串

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

1
2
3
4
5
6
7
8
9
10
11
12
{% mermaid %}
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
subgraph "One"
  a("`The **cat**
  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
  c("`The **cat**
  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
{% endmermaid %}

格式设置：

  • 对于粗体文本，请在文本前后使用双星号 (**)。

  • 对于斜体，请在文本前后使用单个星号 (*)。

  • 对于传统字符串，你需要添加 <br> 标签以使文本换行在节点中。但是，当文本变得太长时，Markdown 字符串会自动换行，并允许你只需使用换行符而不是 <br> 标记来开始新行。

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

可以通过使用禁用自动换行。

1
2
3
4
5
---
config:
  markdownAutoWrap: false
---
graph LR

相互作用

可以将单击事件绑定到节点，单击可以导致 JavaScript 回调或将在新浏览器选项卡中打开的链接。

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

1
2
click nodeId callback
click nodeId call callback()

  • nodeId 是节点的 id

  • 回调是在显示图形的页面上定义的 javascript 函数的名称，该函数将以 nodeId 作为参数进行调用。

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

1
2
3
4
5
<script>
  window.callback = function () {
    alert('A callback was triggered');
  };
</script>

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

1
2
3
4
5
6
7
8
9
10
{% mermaid %}
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 C call callback() "Tooltip for a callback"
    click D href "https://www.github.com" "This is a tooltip for a link"
{% endmermaid %}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
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
{% endmermaid %}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
  <pre 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"
  </pre>
  <script>
    window.callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

注释

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

1
2
3
4
5
{% mermaid %}
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
{% endmermaid %}

样式和类别

设置链接样式

可以设置链接样式。例如，你可能想要设计一个在流程中向后移动的链接。由于链接没有像节点一样的 id，因此需要其他一些方法来决定链接应附加到什么样式。使用图表中定义链接时的顺序号来代替 ids，或者使用默认值应用于所有链接。在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：

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

还可以通过用逗号分隔链接编号，在单个语句中向多个链接添加样式：

1
linkStyle 1,2,7 color:blue;

样式线条曲线

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

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

1
2
3
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
```

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

设置节点样式

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

1
2
3
4
5
6
{% mermaid %}
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
{% endmermaid %}

类

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

类定义如下例所示：

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

此外，还可以在一条语句中为多个类定义样式：

1
classDef firstClassName,secondClassName font-size:12pt;

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

1
class nodeId1 className;

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

1
class nodeId1,nodeId2 className;

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

1
2
3
4
5
{% mermaid %}
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96
{% endmermaid %}

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

1
2
3
4
5
6
7
{% mermaid %}
flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f
{% endmermaid %}

CSS 类

还可以在 CSS 样式中预定义类，这些类可以从图形定义中应用，如下例所示：

示例样式

1
2
3
4
5
6
7
<style>
  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

定义示例

1
2
3
4
5
6
{% mermaid %}
flowchart LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
{% endmermaid %}

默认类别

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

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

对 fontawesome 的基本支持

可以添加来自 fontawesome 的图标。

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

1
2
3
4
5
6
7
{% mermaid %}
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
{% endmermaid %}

如果网站上包含 CSS，Mermaid 支持 Font Awesome。Mermaid 对可以使用的 Font Awesome 版本没有任何限制。

请参阅 官方 Font Awesome 文档 了解如何将其包含在你的网站中。

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

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

自定义图标

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

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

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

示例

1
2
3
flowchart TD
    B[fa:fa-twitter] %% standard icon
    B-->E(fak:fa-custom-icon-name) %% custom icon

并尝试渲染它

1
2
3
4
5
{% mermaid %}
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C["fab:fa-truck-bold a custom icon"]
{% endmermaid %}

图形声明的顶点和链接之间有空格且没有分号 ​

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

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

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

1
2
3
4
5
6
7
{% mermaid %}
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{% endmermaid %}

配置

渲染器

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

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

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

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

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

宽度

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

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

1
2
3
mermaid.flowchartConfig = {
    width: 100%
}
这是我自己搭建的blog网站，用来记录和分享我自己研究的健身造型知识，类似于一个知识库。可以把这个网站分享给你身边的健身爱好者，转载或节选引，用务必注明为“李瑶的原创”，您的支持和尊重是我更新的动力！
理型健