Mermaid.js won't render SVG images until refresh or color toggle.

[clearbluejar]

Checklist

• I have read the tutorials and know the correct effect of the functional design.
• There are no similar reports on existing issues (including closed ones).
• I found the bug on the latest code of the master branch.

Describe the bug

When attempting to render a standard mermaid.js svg chart image using Google Chrome latest ( Version 99.0.4844.74 (Official Build) (arm64) ), the mermaid charts remain as text and will not render until a refresh has occurred. Another way to trigger the render is to toggle dark/light mode. It seems like the updateMermaid function is not called until one of those events occurred.

Looking at the mermaid.js loader, and admittedly being no expert with javascript, I was able to add a workaround by adding the following snippet for force a call to updateMermaid on my site.

    // *******
    // added this to fix mermaid failing to render without refresh
    const toggle = new ModeToggle();
    toggle.notify();
    /// ********

This is obviously not the best way to handle it, but the toggle notify call ends up posting a message forcing a call to updateMermaid.

To Reproduce

Steps to reproduce the behavior:

1. Open a jekyll-theme-chirpy created site with mermaid.js items within the page.
2. Either local dev or a hosted github page.
3. Notice mermaid object isn't render
4. Refresh page or change theme
5. Notice mermaid object is rendered.

Expected behavior

Mermaid charts render when page is loaded initially.

Screenshots

Environment

Command	Version
ruby -v	ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux-musl]
gem -v	3.2.24
bundle -v	Bundler version 2.2.24
bundle exec jekyll -v	jekyll 4.2.1
bundle info jekyll-theme-chirpy	* jekyll-theme-chirpy (5.1.0)

Desktop

• OS: [e.g. macOS 12.2.1]
• Browser: latest Chrome or Firefox ( maybe others?)
  • Chrome Version 99.0.4844.74 (Official Build) (arm64)

Smartphone

Additional context

[cotes2020]

Hi there,

Thanks for contacting us. Unfortunately, neither running it locally nor on the demo site on GitHub Pages has reproduced this issue. The initialization of Mermaid is done with this line:

jekyll-theme-chirpy/_includes/mermaid.html

Line 53 in 3969b28

mermaid.initialize(mermaidConf);

Possible cause: Does the browser you are using load mermaid.js normally?

[clearbluejar]

Yes. Mermaid normally loads in other sites that I browse. For example I am often building charts in the mermaid live editor.

I tried closing down Chrome completely and reopened and you are correct, the mermaid rendered first time. However, when I tried it from incognito mode (which I assumed clears all the state) I still ran into the issue, even after restarting the browser. How could the mermaid.js code from one session break that in another? Perhaps, this is actually a deeper issue in mermaid.

This is the page I am testing: https://clearbluejar.github.io/posts/these-are-your-first-steps/ with the mermaid chart at the bottom. You will recognize the template. :)

[clearbluejar]

Could also be that my site (and the dev site) were in my local shortcuts on my home page...

So perhaps the pages were be preloaded?? When I removed the shortcuts from my homepage, the failure to render went away. I think it's safe to close this issue. Thank you for taking a look.

[cotes2020]

Alright, I'm about to record a demo that Mermaid rendering works fine in incognito mode, and since you've solved the problem, I'm not going to make a video :)

[jamolnng]

Although this issue is closed, I am also seeing this exact same behavior on Firefox and Edge (Chromium based) where the first time the page is loaded Mermaid works fine but then after that it does not work

[clearbluejar]

I have also seen the issues since, but it isn't consistent. I will likely add my workaround to my local https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html.

[masq]

Just chiming in to say that I'm having this issue as well (when testing on localhost / updating my posts live). I haven't tried restarting the browser or anything like that, so maybe that will "fix" the issue, but it seems worth mentioning that this is still a thing that happens in some situations.

[MartyF81]

I am also facing this issue... toggling the light/dark mode does trigger it... but that doesnt work for users of course.

[MartyF81]

    // *******
    // added this to fix mermaid failing to render without refresh
    const toggle = new ModeToggle();
    toggle.notify();
    /// ********

@clearbluejar can you tell me where you put this?

[clearbluejar]

Copy https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html locally to _includes/mermaid.html. Then add that code after the event listener before the closing bracket here

jekyll-theme-chirpy/_includes/mermaid.html

Lines 55 to 57 in 3969b28

	window.addEventListener("message", updateMermaid);
	});
	</script>

[MartyF81]

Copy https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html locally to _includes/mermaid.html. Then add that code after the event listener before the closing bracket here

jekyll-theme-chirpy/_includes/mermaid.html

Lines 55 to 57 in 3969b28

	window.addEventListener("message", updateMermaid);
	});
	</script>

this worked wonderfully. Thank you for taking the time to reply and share!!

[clearbluejar]

Glad it worked. It might only work for localhost. I had to make one last tweak to make it work on my deployed site. See my file here:

https://github.com/clearbluejar/clearbluejar.github.io/blob/main/_includes/mermaid.html#L55-L62

The comments had to match the other comment style in the file. This make it work for both Chrome and Safari for me.

[cotes2020]

https://github.com/clearbluejar/clearbluejar.github.io/blob/89d3a353d210e9b2ab24d23f802a782dad5b5c39/_includes/mermaid.html#L57-L60

    /* fix mermaid failing to render without refresh */
    const toggle = new ModeToggle();
    toggle.notify();
    /* end fix */

@clearbluejar Frankly, I don't think this is an appropriate workaround.

Looks like the $( document ).ready() of jQuery will occasionally affect mermaid.initialize(), even if Mermaid doesn't complain about any errors. Although it is not clear which step inside Mermaid conflicts with jQuery, as long as the $( document ).ready() of jQuery is replaced with a native JS function, this issue can be solved.

Here is my solution:

In _includes/mermaid.html, change $(function(){ ... }); to (function(){ ... })();

[clearbluejar]

My workaround was definitely a temporary fix. I'll try out your changes here shortly and confirm.

[clearbluejar]

I was able to upgrade to 5.3.2 and it looks good so far. Thanks for digging into this.