Mermaid does not render on page load from SPA route changes

[manastalukdar]

Overview

Mermaid has a direct dependency on window.load event to start rendering. This is triggered when a page initially loads, or when the page is refreshed. In applications based on many javascript frameworks, entering a page using a router usually does not invoke the window.load event. As a result mermaid does not render the text definitions.

A workaround is to initialize mermaid using the (deprecated) mermaid.init() method and point it to a specific container. There are few disadvantages of this approach:

1. mermaid.init() is deprecated and kept around only for backwards compatibility. Their documentation clearly recommends not to use it.
2. If the goal is to render all containers in a page decorated with the class name mermaid, this approach does not work. It works only when the page contains a single container where the text definitions needs to be rendered.

There is a related issue in the mermaid repo.

This issue is to explore a solution to this behavior.

Potential Solutions

1. https://github.com/yuzutech/kroki
2. https://mermaid.ink

[xifenghuyang]

it should be note in the document of mermaidAPI. for i saw not a api called init and the render doesn,t work.
when can fix the render function?

[Sun-ZhenXing]

I solved this problem by using the code below the type: activate re-rendering using the run().

<script setup lang="ts">
import mermaid from 'mermaid'

const value = defineModel<string>('value', { required: true })
const throttled = refThrottled(value, 500)
mermaid.initialize({ startOnLoad: false })

const html = computed(() => {
  return renderMarkdown(throttled.value)
})

watch(throttled, () => {
  setTimeout(() => {
    mermaid.run()
  })
}, { immediate: true })
</script>