Getting Started

This section will help you add mermaid support for VitePress.

Install

npm i vitepress-plugin-mermaid mermaid -D

Setup it up

Add wrapper

// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
    // your existing vitepress config...
    // optionally, you can pass MermaidConfig
    mermaid: {
      // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
    },
    // optionally set additional config for plugin itself with MermaidPluginConfig
    mermaidPlugin: {
      class: "mermaid my-class", // set additional css classes for parent container 
    },
});

Code with ```mmd

flowchart LR
  Start --> Stop

Visualize with ```mermaid