Mermaid diagram previewer for Visual Studio Code
Usage
- Open a file containing Mermaid diagram
- Choose
Preview Mermaid Diagram
- 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.