pschaeflein/vscode-markdown-mermaid

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

Markdown Preview Mermaid Support

Adds Mermaid diagram and flowchart support to VS Code's builtin 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.7.0.

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