fix: Mermaid diagrams not rendered on race condition

Appears to be race condition when using Mermaid's automatic rendering with `startOnLoad: true` option.

Workaround by manually rendering diagrams.

wowchemy/assets/js/wowchemy-slides.js

@@ -143,6 +143,6 @@ if (params.slides.diagram) {
 
   // Fix Mermaid conflict with Hightlight JS.
   document.addEventListener('DOMContentLoaded', function () {
-    fixMermaid();
+    fixMermaid(false);
   });
 }

wowchemy/assets/js/wowchemy-theming.js

@@ -7,6 +7,7 @@
  **************************************************/
 
 import {fadeIn} from './wowchemy-animation';
+import {fixMermaid} from './wowchemy-utils';
 
 const body = document.body;
 
@@ -191,7 +192,8 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) {
       console.debug('Initializing Mermaid with light theme');
       if (init) {
         /** @namespace window.mermaid **/
-        window.mermaid.initialize({startOnLoad: true, theme: 'default', securityLevel: 'loose'});
+        window.mermaid.initialize({startOnLoad: false, theme: 'default', securityLevel: 'loose'});
+        fixMermaid(true);
       } else {
         // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks.
         location.reload();
@@ -217,7 +219,8 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) {
       console.debug('Initializing Mermaid with dark theme');
       if (init) {
         /** @namespace window.mermaid **/
-        window.mermaid.initialize({startOnLoad: true, theme: 'dark', securityLevel: 'loose'});
+        window.mermaid.initialize({startOnLoad: false, theme: 'dark', securityLevel: 'loose'});
+        fixMermaid(true);
       } else {
         // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks.
         location.reload();

wowchemy/assets/js/wowchemy-utils.js

@@ -8,8 +8,9 @@
 /**
  * Fix Mermaid.js clash with Highlight.js.
  * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
+ * @param {boolean} render
  */
-function fixMermaid() {
+function fixMermaid(render = false) {
   let mermaids = [];
   // Note that `language-mermaid` class is applied to <code> block within <pre>, so we wish to replace parent node.
   [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
@@ -19,8 +20,14 @@ function fixMermaid() {
     let newElement = document.createElement('div');
     newElement.innerHTML = mermaidCodeElement.innerHTML;
     newElement.classList.add('mermaid');
+    if (render) {
+      window.mermaid.mermaidAPI.render(`mermaid-${i}`, newElement.textContent, function (svgCode) {
+        newElement.innerHTML = svgCode;
+      });
+    }
     mermaidCodeElement.parentNode.replaceWith(newElement);
   }
+  console.debug(`Processed ${mermaids.length} Mermaid code blocks`);
 }
 
 /**

wowchemy/assets/js/wowchemy.js

@@ -7,7 +7,7 @@
 
 import mediumZoom from './_vendor/medium-zoom.esm';
 import {hugoEnvironment, codeHighlighting, searchEnabled} from '@params';
-import {fixMermaid, scrollParentToChild} from './wowchemy-utils';
+import {scrollParentToChild} from './wowchemy-utils';
 import {
   changeThemeModeClick,
   initThemeVariation,
@@ -423,7 +423,10 @@ function getSiblings(elem) {
 
 $(document).ready(function () {
   fixHugoOutput();
-  fixMermaid();
+
+  // Render theme variation, including any HLJS and Mermaid themes.
+  let {isDarkTheme, themeMode} = initThemeVariation();
+  renderThemeVariation(isDarkTheme, themeMode, true);
 
   // Initialise code highlighting if enabled for this page.
   // Note: this block should be processed after the Mermaid code-->div conversion.
@@ -431,10 +434,6 @@ $(document).ready(function () {
     hljs.initHighlighting();
   }
 
-  // Render theme variation, including any HLJS and Mermaid themes.
-  let {isDarkTheme, themeMode} = initThemeVariation();
-  renderThemeVariation(isDarkTheme, themeMode, true);
-
   // Scroll Book page's active menu sidebar link into view.
   let child = document.querySelector('.docs-links .active');
   let parent = document.querySelector('.docs-links');