README_EN.md

vuepress-plugin-mermaid-next

This plugin is only for vuepress-next

Installation

# use npm
npm install mermaid vuepress-plugin-mermaid-next

Usage

.vuepress/config.ts or (config.js)

import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'

export default {
  plugins: [
    MermaidPlugin({
      theme: Themes.sky,
      darkTheme: Themes.forest, // not required, default value is `dark`
    }),
  ],
}

The plugin support out-of-the-box dark mode , you can specified dark mode theme with darkTheme field. If darkTheme is null or unavaliable value, it use dark as default.

Mermaid config

You can use the plugin config to customize the Mermaid, the config will be used for mermaid.initialize(config)

The full list of Mermaid configuration can be found in Mermaid - Configuration

Theme config

Except Mermaid built-in theme, the plugin add some additional themes like:

Light Mode Themes

• Themes.sky: light blue

Dark Mode Themes

• Themes.brown
• Themes.plain

Theme customization

If you want to modify the part of theme colors, you can use themeVariables field to overwrite the theme color configuration.

The full list of themeVariables can be found in Mermaid Theming

import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'
export default {
  plugins: [
    MermaidPlugin({
      theme: Themes.sky,
      themeVariables: {
        fontSize: '14px',
        primaryColor: '#FFC3A1',
      }
    })
  ]
}

Or you want to create a new theme, just use registerTheme(id, themeVariables).

import { MermaidPlugin, Themes, registerTheme } from 'vuepress-plugin-mermaid-next'

const fire = registerTheme('fire', {
  background: '#FFC3A1',
  fontSize: '14px',
  primaryColor: '#FFC3A1',
  noteBkgColor: '#F0997D',
  noteTextColor: '#333',
  lineColor: '#A75D5D',
})

export default {
  plugins: [
    MermaidPlugin({
      theme: fire,
    })
  ]
}

Feature

• Dark mode supported
• mermaid config supported
• Preset themes
• External Diagrams(MindMap)