Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Markdown Preview Mermaid SupportNew to Visual Studio Code? Get it now.

Markdown Preview Mermaid Support

Matt Bierner

|
276,764 installs
| (22) | Free
Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
Install
Trouble Installing?

Markdown Preview Mermaid Support

Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview

A mermaid diagram in VS Code's built-in markdown preview

Usage

Create diagrams in markdown using mermaid fenced code blocks:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

You can also use ::: blocks:

::: mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
:::

Mermaid

Currently supports Mermaid version 8.13.10.

Add custom CSS support

You can use the built-in functionality to add custom CSS. More info can be found in the markdown.styles documentation

For example, add Font Awesome like this:

"markdown.styles": [
    "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
]

Use it like this:

```mermaid
graph LR
    fa:fa-check-->fa:fa-coffee
```
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft