Mermaid

mermaid snippets can be converted into images automatically in any code snippet tagged with the mermaid language and a +render tag:

```mermaid +render
sequenceDiagram
    Mark --> Bob: Hello!
    Bob --> Mark: Oh, hi mark!
```

This requires having mermaid-cli installed.

Note that because the mermaid CLI will spin up a browser under the hood, this may not work in all environments and can also be a bit slow (e.g. ~2 seconds to generate every image). Mermaid graphs are rendered asynchronously by a number of threads that can be configured in the configuration file. This configuration value currently defaults to 2.

The size of the rendered image can be configured by changing:

• The mermaid.scale configuration parameter.
• Using the +width:<number>% attribute in the code snippet.

For example, this diagram will take up 50% of the width of the window and will preserve its aspect ratio:

```mermaid +render +width:50%
sequenceDiagram
    Mark --> Bob: Hello!
    Bob --> Mark: Oh, hi mark!
```

It is recommended to change the mermaid.scale parameter until images look big enough and then adjust on an image by image case if necessary using the +width attribute. Otherwise, using a small scale and then scaling via +width may cause the image to become blurry.

Theme

The theme of the rendered mermaid diagrams can be changed through the following theme parameters:

• mermaid.background the background color passed to the CLI (e.g., transparent, red, #F0F0F0).
• mermaid.theme the mermaid theme to use.