vitepress-plugin-mermaid

Add mermaid support for Vitepress. It detects any dark theme that are set in body as long as it has dark in the name

See the docs 📕
and a complex example 😎

Install

npm

1npm i vitepress-plugin-mermaid mermaid -D

pnpm

1pnpm install --shamefully-hoist 

Setup it up

Add wrapper

1// .vitepress/config.js
2import { withMermaid } from "vitepress-plugin-mermaid";
3
4export default withMermaid({
5  // your existing vitepress config...
6  mermaid:{
7    //mermaidConfig !theme here works for ligth mode since dark theme is forced in dark mode
8  },
9  ...
10});

Use in any Markdown file

1<!---any-file.md-->
2
3```mermaid
4flowchart TD
5  Start --> Stop
6```