@d0rich/nuxt-content-mermaid

This layer allows you to use mermaid in your nuxt content markdown files.

Setup

1. Add @d0rich/nuxt-content-mermaid dependency to your project

npm install @d0rich/nuxt-content-mermaid # or yarn add @d0rich/nuxt-content-mermaid

2. Add @d0rich/nuxt-content-mermaid to the buildModules section of nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    // Put this layer before one with nuxt content
    '@d0rich/nuxt-content-mermaid'
  ]
})

3. Configure layer in app.config.ts

export default defineAppConfig({
  contentMermaid: {
    enabled: true,
    /**
     * @default 'default'
     * @description 'default' or '@nuxtjs/color-mode'
     */
    color: 'default',
    spinnerComponent: 'DAnimationSpinner'
  }
})

4. Add code block to your markdown file with mermaid language specified.