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

import mermaid from 'mermaid'

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

import type { Mermaid } from 'mermaid'

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

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

export {}

<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>