plugin-mermaid

Plugin @renovamen/vuepress-plugin-mermaid@next for adding Mermaid to VuePress 2 to create complex diagrams in Markdown.

# Install

pnpm install @renovamen/vuepress-plugin-mermaid@next

yarn add @renovamen/vuepress-plugin-mermaid@next

npm install @renovamen/vuepress-plugin-mermaid@next

Then add it to your .vuepress/config.js:

const { mermaidPlugin } = require("@renovamen/vuepress-plugin-mermaid");

module.exports = {
  plugins: [
    mermaidPlugin()
  ]
}

# Options

# token

• Type: string

• Default: "mermaidjs"

• Details: Custom token of the fenced code block.

# theme

• Type: string

• Default: "default"

• Details: Theme (here are all themes supported by Mermaid)

# darkTheme

• Type: string

• Default: "dark"

• Details: Theme for dark mode. Only works when darkSelector and darkClass are set.

# darkSelector

• Type: string

• Default: undefined

• Details

  • A CSS selector for the plugin to select an element and check if the dark mode is enabled by darkClass
  • For default theme and Gungnir theme, this option should be html

# darkClass

• Type: string

• Default: undefined

• Details

  • A class name for the plugin to check if the dark mode is enabled
  • For default theme and Gungnir theme, this option should be dark

# Usage

The token info of the code block should be mermaidjs (or options.token if you set), for example:

```mermaidjs
sequenceDiagram
  Alice->John: Hello John, how are you?
  loop Every minute
    John-->Alice: Great!
  end
```

Refer to the documentation of Mermaid for more information.

# License

MIT