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