Skip to content

chkohner/vscode-markdown-mermaid

 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 65.9%
  • TypeScript 34.1%