https://github.com/emersonbottero/vitepress-plugin-mermaid

Add mermaid support for Vitepress
https://github.com/emersonbottero/vitepress-plugin-mermaid

Last synced: 3 months ago
JSON representation

Add mermaid support for Vitepress

• Host: GitHub
• URL: https://github.com/emersonbottero/vitepress-plugin-mermaid
• Owner: emersonbottero
• License: mit
• Created: 2022-03-10T00:43:49.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-24T01:33:59.000Z (4 months ago)
• Last Synced: 2024-09-24T02:25:48.406Z (4 months ago)
• Language: TypeScript
• Size: 12.2 MB
• Stars: 87
• Watchers: 5
• Forks: 20
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vitepress-v1 - Diagramming and Charting with Mermaid - Diagramming and charting tool using [Mermaid](https://mermaid.js.org/) (:electric_plug: Plugins / Community Plugins)

README

        
# 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 📕](https://emersonbottero.github.io/vitepress-plugin-mermaid/)  

and a [complex example 😎](https://emersonbottero.github.io/vitepress-plugin-mermaid/guide/more-examples.html#render)

## Install

npm

```bash

npm i vitepress-plugin-mermaid mermaid -D

```

pnpm

```bash

pnpm install --shamefully-hoist 

```

## Setup it up

Add wrapper

```js

// .vitepress/config.js

import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({

  // your existing vitepress config...

  mermaid:{

    //mermaidConfig !theme here works for ligth mode since dark theme is forced in dark mode

  },

  ...

});

```

Use in any Markdown file

````md

```mermaid

flowchart TD

  Start --> Stop

```

````