/

Mermaid 图表

Quarkdown 通过 .mermaid 块函数提供对 Mermaid 的完全互操作,将 Mermaid 图表与图示带入你的文档。

块级参数接受 Mermaid 代码内容。有关其创建流程图、饼图、类图、时序图等强大语法的信息,请参阅 Mermaid 的文档

示例 1

.mermaid
    flowchart TD
        A([Start]) --> B[Enter username and password]
        B --> C{Correct?}
        C -- Yes --> D[Redirect to dashboard]
        C -- No --> E[Show error message]
        D --> F([End])
        E --> F
flowchart TD
    A([Start]) --> B[Enter username and password]
    B --> C{Correct?}
    C -- Yes --> D[Redirect to dashboard]
    C -- No --> E[Show error message]
    D --> F([End])
    E --> F

Mermaid 代码接受 Quarkdown 函数调用。

示例 2

.var {n1} {2}
.var {n2} {3}

.mermaid
    flowchart TD
        A([Start]) --> B{.n1 + .n2 = ?}
        B -- .sum {.n1} {.n2} --> C([Correct])
flowchart TD
    A([Start]) --> B{2 + 3 = ?}
    B -- 5 --> C([Correct])

从文件加载图表

由于函数调用可以用在块级参数内部,你可以利用 .read 函数从文件中加载文本。

.mermaid
    .read {chart.mmd}

图表标题与编号

一个可选的 caption 参数为图表分配标题,并让该块根据文档的插图编号 进行编号。

示例 3

.mermaid caption:{My Mermaid diagram.}
    flowchart TD
        A([Start]) --> B[Enter username and password]
        B --> C{Correct?}
        C -- Yes --> D[Redirect to dashboard]
        C -- No --> E[Show error message]
        D --> F([End])
        E --> F
Diagram with caption

示例 4

要不带标题地对图表进行编号,请将空字符串作为标题值传入。

.mermaid caption:{}
    flowchart TD
        A([Start]) --> B[Enter username and password]
        B --> C{Correct?}
        C -- Yes --> D[Redirect to dashboard]
        C -- No --> E[Show error message]
        D --> F([End])
        E --> F
Diagram with empty caption