Previews Mermaid diagrams
Clone or download

README.md

Mermaid diagram previewer for Visual Studio Code

Build Status Greenkeeper badge

Usage

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

activate

usage

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

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.