vitepress-mermaid

Add Mermaid diagram support to VitePress sites with a small wrapper around your existing config.

This fork is published as vitepress-mermaid and is maintained at
https://github.com/kiaarmani/vitepress-mermaid

Install

Using npm:

npm i vitepress-mermaid mermaid -D

Using pnpm:

pnpm add vitepress-mermaid mermaid -D

Usage

Wrap your existing VitePress config with withMermaid:

// .vitepress/config.[js|ts|mts]
import { withMermaid } from "vitepress-mermaid";

export default withMermaid({
  // your existing vitepress config...
  mermaid: {
    // mermaid configuration
  },
  mermaidPlugin: {
    // optional plugin configuration, e.g.
    class: "mermaid my-class",
  },
});

Then use Mermaid code blocks in any Markdown file:

```mermaid
flowchart TD
  Start --> Stop
```

The plugin registers a global <Mermaid> component and takes care of wiring up Vite/VitePress aliases and optimizeDeps so diagrams render correctly in dev and production builds.