Mermaid diagrams

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

Its block parameter accepts the Mermaid code content. Please refer to Mermaid's documentation for information about its powerful syntax to create flowcharts, pie charts, class and sequence diagrams, and many more.

.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

 

The Mermaid code accepts Quarkdown function calls:

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

 

Diagram from file

Since function calls can be used inside the block argument, the .read function can be used as well to load text from file.

.mermaid
  .read {chart.mmd}

Diagram caption & numbering

An optional caption argument assigns a caption to the diagram, and lets the block be numbered according to the document's figure numbering:

.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

 

To number the diagram without a caption, pass an empty string as an argument:

.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