效果

因为写成了 vue 组件，在 template 里或在 mdc 中写都行

[md]<mermaid>
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
</mermaid>

Install

[ts]plugins/mermaid.client.tsimport mermaid from 'mermaid'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('mermaid', () => mermaid)
})

[ts]index.d.tsimport type { Mermaid } from 'mermaid'

declare module '#app' {
  interface NuxtApp {
    $mermaid(): Mermaid
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $mermaid(): Mermaid
  }
}

export {}

[vue]components/global/mermaid.vue<script setup lang="ts">
let show = ref(false)

const { $mermaid } = useNuxtApp()

onMounted(async () => {
  show.value = true
  $mermaid().initialize({ startOnLoad: true })
  await nextTick()
  $mermaid().init()
})
</script>

<template>
  <div class="mermaid" v-if="show">
    <slot></slot>
  </div>
</template>