mermaid

@renovamen/vuepress-plugin-mermaid@next

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

Demo

 

Install

# pnpm
pnpm install @renovamen/vuepress-plugin-mermaid@next
# yarn
yarn add @renovamen/vuepress-plugin-mermaid@next
# npm
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

Tips: The default theme and Gungnir theme will add a class name dark to the html element to enable dark mode.

 

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