Mermaid diagram previewer for Visual Studio Code

The plugin enables live editing and visualization of mermaid supported diagrams.

Related plugins:

• syntax highlighting

Usage

0. Open a file containing Mermaid diagram
1. Choose Preview Mermaid Diagram
2. Move cursor inside the diagram

Supported formats

The plugin detects mermaid diagrams in the following formats:

HTML tag

<div class="mermaid">
  sequenceDiagram A-->B: Works!
</div>

Markdown fenced code

```mermaid
sequenceDiagram
  A-->B: Works!
```

HUGO shortcodes

{{<mermaid attr="val">}} sequenceDiagram A-->B: Works! {{</mermaid>}}

Sphinx directives

.. mermaid:: :parameters: are optional sequenceDiagram A-->B: Works!

The plugin does not preview diagrams in external files:

.. mermaid:: graphs/mygraph.mmd

Standalone Mermaid files

Files with extension .mmd with plain Mermaid diagram content:

sequenceDiagram
  A-->B: Works!

Customize diagrams

Rendering

You can customize the appearence of the previewed diagrams by setting the mermaid configuration in the workspace settings:

{
  "mermaid": {
    "sequenceDiagram": {
      "mirrorActors": false
    }
  }
}

All mermaid configuration options are supported.

Custom theme

You can render the diagram using a custom theme by providing the following configuration properties:

{
  "mermaid": {
    "theme": null,
    "themeCSS": "the theme as string"
  }
}

⚠️ The value null for theme disables the authomatic theme detection, so you are responsible for providing a proper theme in themeCSS for all diagrams used in the settings' scope.