Mermaid.vue

<!-- this code is from 
    https://gitlab.com/dokos/documentation/-/blob/132cce8c6e2126d8dba8ad09b7c7dd6d08a7c461/components/content/Mermaid.vue
 -->

<template>
    <pre ref="el" :style="{ display: rendered ? 'block' : 'none' }">
      <slot />
    </pre>
</template>
  
<script setup lang="ts">
const slot = useSlots()
const el: Ref<HTMLElement | null> = ref(null)
const rendered = ref(false)

async function render() {
    if (!el.value) {
        return
    }
    if (el.value.querySelector('svg')) {
        // Already rendered
        return
    }

    // Iterate children to remove comments
    for (const child of el.value.childNodes) {
        if (child.nodeType === Node.COMMENT_NODE) {
            el.value.removeChild(child)
        }
    }
    const { default: mermaid } = await import("mermaid")
    el.value.classList.add('mermaid')
    rendered.value = true
    await mermaid.run({ nodes: [el.value] })
}

onMounted(() => {
    render()
})
</script>