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

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

Last synced: 2 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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-27T01:32:29.000Z (5 months ago)
• Last Synced: 2024-03-27T04:25:09.616Z (3 months ago)
• Language: TypeScript
• Size: 9.63 MB
• Stars: 63
• Watchers: 3
• Forks: 17
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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

```

````