Mermaid diagrams

Quarkdown offers full Mermaid interoperability via the .mermaid block function, bringing Mermaid diagrams and charts into your documents.

The block parameter accepts the Mermaid code content. Refer to Mermaid’s documentation for information about its powerful syntax to create flowcharts, pie charts, class and sequence diagrams, and much more.

Example 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

The Mermaid code accepts Quarkdown function calls.

Example 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])

Diagram from file

Since function calls can be used inside the block argument, you can leverage use the .read function to load text from a file.

.mermaid
    .read {chart.mmd}

Diagram caption and numbering

An optional caption argument assigns a caption to the diagram and lets the block be numbered according to the document’s figure numbering.

Example 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

Example 4

To number the diagram without a caption, pass an empty string as the caption value.

.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

On this page

Mermaid diagrams

Diagram from file

Diagram caption and numbering