-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mermaid.js won't render SVG images until refresh or color toggle. #536
Comments
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:
Possible cause: Does the browser you are using load mermaid.js normally? |
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. :) |
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 :) |
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 |
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. |
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. |
I am also facing this issue... toggling the light/dark mode does trigger it... but that doesnt work for users of course. |
@clearbluejar can you tell me where you put this? |
Copy https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html locally to jekyll-theme-chirpy/_includes/mermaid.html Lines 55 to 57 in 3969b28
|
this worked wonderfully. Thank you for taking the time to reply and share!! |
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. |
@clearbluejar Frankly, I don't think this is an appropriate workaround. Looks like the Here is my solution: In |
My workaround was definitely a temporary fix. I'll try out your changes here shortly and confirm. |
I was able to upgrade to 5.3.2 and it looks good so far. Thanks for digging into this. |
(cherry picked from commit 48f14e3)
Checklist
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.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:
Expected behavior
Mermaid charts render when page is loaded initially.
Screenshots
Environment
ruby -v
gem -v
bundle -v
bundle exec jekyll -v
bundle info jekyll-theme-chirpy
Desktop
Smartphone
Additional context
The text was updated successfully, but these errors were encountered: