jekyll-theme-chirpy: Mermaid.js won't render SVG images until refresh or color toggle.
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
masterbranch.
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:
- Open a jekyll-theme-chirpy created site with mermaid.js items within the page.
- Either local dev or a hosted github page.
- Notice mermaid object isn’t render
- Refresh page or change theme
- 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 15 (3 by maintainers)
Commits related to this issue
- fix: `mermaid` occasionally fails to initialize (#536) — committed to cotes2020/jekyll-theme-chirpy by cotes2020 2 years ago
- fix: `mermaid` occasionally fails to initialize (#536) — committed to shihtiy-tw/shihtiy-tw.github.io by cotes2020 2 years ago
- fix: `mermaid` occasionally fails to initialize (#536) — committed to sanjidnet/sanjidnet.github.io by cotes2020 2 years ago
- fix: `mermaid` occasionally fails to initialize (#536) (cherry picked from commit 48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae) — committed to linkliu/game-tech-post-old by cotes2020 2 years ago
- Update theme (#3) * fix(PWA): sometimes update notification is not triggered * fix: exclude CHANGELOG from output * chore(release): 5.2.1 * feat(i18n): add Bulgarian support (#612) * fix... — committed to TechPulse/jekyll-theme-chirpy-old by marksie1988 a year ago
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 😃