Mermaid diagram previewer for Visual Studio Code

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!
```

Standalone Mermaid files

Files with extension .mmd with plain Mermaid diagram content:

sequenceDiagram
  A-->B: Works!

Customize diagrams

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.