Mermaid diagrams are broken

[NanoSector]

This is a Bug Report

Problem:
The graphs on the Ingress page are broken in Firefox, but seem to work properly in Chromium. I am unsure if this happens on other pages as well.

Firefox:

Chromium:

Proposed Solution:
The graphs should be working in Firefox, possibly by fixing the unknown "syntax error".

Page to Update:
https://kubernetes.io/docs/concepts/services-networking/ingress/

Additional Information:

• Firefox 97.0.1
• Chromium 98
• Ubuntu 20.04.4

[jihoon-seo]

For me:

• Ubuntu 18.04, Firefox 97.0 (64-bit)
  (I cannot reproduce on here)
  
• Windows 10, Firefox 97.0.1 (latest) (64-bit)
  (I cannot reproduce on here)
  

I googled and found some links:

• https://addons.mozilla.org/en/firefox/addon/github-mermaid/
• Refreshing page will show Syntax error in mermaid graph sometimes squidfunk/mkdocs-material#3232
• Syntax Error Due to Incorrect Generated HTML File fralau/mkdocs-mermaid2-plugin#11

[sftim]

I can reproduce this using Firefox 97.0 on Ubuntu

/triage accepted
/priority important-longterm
/area web-development

[NanoSector]

I can consistently reproduce this on macOS 12.2.1.

This is a fresh Firefox installation without any add-ons.

However, switching to another network seems to fix the issue. Switching to my phone's tethered 4G network causes it to load properly in Firefox on macOS, switching back to our office network breaks it again.

I cannot find any console logs and network requests seem to successfully go through as well. Downloading mermaid.min.js on both networks and comparing hashes results in the same hash for both files.

Artificially throttling the request to "Regular 4G" using Firefox's developer tools seems to fix the issue on our office network. Maybe it is a race condition? Your first link seems to suggest a fix is published, maybe an update of the site generation tools would fix this?

[sftim]

/retitle Mermaid graphs are broken (replicable with Firefox)

[sftim]

/retitle Mermaid diagrams are broken (replicable with Firefox)

[chrismetz09]

Cannot reproduce using firefox 95.0.2 (64-bit) on mac 10.15.7.
Cannot reproduce using firefox 98.0 on mac 10.15.7.
Cannot reproduce in mermaid live editor that uses Mermaid 8.14.0

@sftim, thoughts on this?

[chrismetz09]

/assign @chrismetz09

[sftim]

I can reproduce this reliably but not on first page load.

[sftim]

This is a multihomed PC by the way; 2 IPv4 addresses and 4 IPv6 addresses, so the browser will be using something similar to Happy Eyeballs.

[chrismetz09]

Random number of reloads DOES produce the error using firefox 98.0 on mac 10.15.7.
Random number of reloads DOES produce the error using safari Version 14.1 (15611.1.21.161.7, 15611) on mac 10.15.7.

I was able to reproduce @NanoSector observation describing firefox 4G throttling that seems to mitigate the problem.

[chrismetz09]

@sftim @NanoSector @jihoon-seo
Possible fix (but still testing):

1. Refreshing page will show Syntax error in mermaid graph sometimes #3232 noted ...If Mermaid.js is loaded from cache, Mermaid will sometimes not pick up the configuration and start processing before one can tell it to not startOnLoad. ...

2. Looked into Firefox loading pages from cache after latest update.

3. @sftim observed I can reproduce this reliably but not on first page load. Does this mean initial page load IS NOT from cache? I think so? I can reproduce error after initial page load by hitting multiple subsequent page reloads.

4. Tried shift + Reload described in Firefox loading pages from cache after latest update. I could not reproduce error.

5. There is a No-Cache No-Store for Selected Hosts add-on. Have not tested this yet.

Still testing and will report back.

[chrismetz09]

1. Tested [No-Cache No-Store for Selected Hosts add-on.). Did not work. Removed add-on then reproduced error.

Do we want to tell users to install add-on before using?

2. I could not reproduce error using Shift + command/R in Firefox.

@sftim, guidance requested. Options I see are:

a) close the issue with a firefox mitigation note. Also add note in Diagram Guide.

b) Pass it on to web-dev folks?

tx

[sftim]

@chrismetz09 would you be willing to add this to the agenda for the next SIG Docs meeting and / or highlight this via Slack as an issue that needs attention?

[chrismetz09]

Will do.

[chrismetz09]

Updated to Mermaid 8.14.0 on test branch.

Replicated previously observed behavior:

1. Chrome renders okay, although you do see rare mis-renders when pounding the reload button.
2. FF shows frequent mis-renders. Shift + command R seems to clear the error and correctly renders the diagram.

As mentioined in very rare chrome occurrence and frequent FF reloads, you see the following:

---

Verified checksums to ensure downloaded mermaid.min.js file is placed in proper /website/static/js directory.

➜  ~ curl https://unpkg.com/mermaid@8.14.0/dist/mermaid.min.js | shasum
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 1080k    0 1080k    0     0  5272k      0 --:--:-- --:--:-- --:--:-- 5298k
bb450af2b99ae0904a7264b06ef9d98017a8f417  -

➜  ~ shasum mermaid.min.js
bb450af2b99ae0904a7264b06ef9d98017a8f417  mermaid.min.js

[danieltharp]

Just noting this persists on Firefox 100.0b3 on the first load, and cleared up after a refresh..

[sftim]

Maybe Mermaid 9.0.0 would help?

[dprotaso]

I just encoutered this today using Firefox 108.0.2 (64-bit) on macOS Monterey v12.6.2

[allan-kg]

Confirmed for me too, using :

• chromium 108.0.5359.94-1~deb11u1
• firefox-esr 102.6.0esr-1~deb11u1
• System : debian bullseye
• Sample page
  • Chromium
    
  • Firefox
    

As a plus, earlier today I had created like 5 mermaids to document a code. All of them worked fine (on firefox) using an online processor, like this one.

[sftim]

/retitle Mermaid diagrams are broken

AIUI, we see this in more than one browser

[sftim]

Duplicated by #39413

[YoinkBird]

Confirmed for me too, using :

* chromium `108.0.5359.94-1~deb11u1`

* firefox-esr `102.6.0esr-1~deb11u1`

* System : debian bullseye

* [Sample page](https://kubernetes.io/docs/tasks/run-application/horizontal-pod-autoscale/)
  
  * Chromium
    ![image](https://user-images.githubusercontent.com/3980933/213699054-cc6369cb-3132-4261-805f-ee6808011b8c.png)
  * Firefox
    ![image](https://user-images.githubusercontent.com/3980933/213699245-74b40b67-60c0-47b7-99f0-1e5f2a770812.png)

As a plus, earlier today I had created like 5 mermaids to document a code. All of them worked fine (on firefox) using an online processor, like this one.

Confirmation
I encountered this as well; image loads in firefox private window but not a "normal" window.
Disabling the "DuckDuckGo Privacy Essentials" extension allowed the SVG to load.

Details:

• firefox: Mozilla Firefox 110.0

Speculation
Not to over-speculate, but as an extra datapoint, "googletagmanager" is blocked by DuckDuckGo Privacy Essentials in a normal firefox window, but not in the private window. So this might be related to googletagmanager not being able to load:

[mrgiles]

I can confirm that The diagram How does a HorizontalPodAutoscaler work also fails to render in Firefox (112.0.1) in both standard and private modes.
Note: I don't have the DuckDuckGo Privacy Essentials extension installed.

[sftim]

If we have duplicates of this issue and either:

• the person who filed the issue is happy to have it closed
• it's been marked as a duplicate for over 15 days

then it's OK to close that duplicate issue - not this one - with an explanatory note.

[sftim]

Duplicated by #42625

[junktext]

FYI: I ran into this bug today and for me I figured out that the Privacy Badger v2023.10.31 extension in Firefox was causing issues with mermaid for some reason. Once I disabled Privacy Badger protection, the diagrams loaded up just fine. Privacy Badger was only detecting 3 potential trackers, which even if I manually allowed those connections to go through, the diagrams would still not work properly.

I was using Firefox v119.0.1 on Ubuntu Linux 22.04. The Kubernetes documentation page I saw this issue on today was here: https://kubernetes.io/docs/tasks/run-application/horizontal-pod-autoscale/

Lastly, for what it's worth when the diagram fails to load it mentions that mermaid v8.13.4 is used, but that was released two years ago on 2021-11-18. As of this writing, mermaid is on v10.6.1 (2023-11-06), so I'm wondering if a version upgrade for mermaid may help fix this bug?

[sftim]

Help is very welcome!

[Gauravpadam]

I'll help with this, This needs some debugging

[sftim]

Looks like we load the Mermaid script in two places. I'm not sure that's helpful.

See #44644 (review)

[Gauravpadam]

Also see #44768

[brc]

Latest report details to help @chrismetz09 debug it:

• Reproducible with latest 64-bit Firefox on Linux, v122.0.
• Reproducible in Private Browsing mode with NO extensions enabled.
• Must use non-cached page loads (i.e., bypass browser cache) to eventually get a successful render;
  • Once broken, can never get successful render when reloading from cache.
• No apparent pattern to intermittent flapping;
  • Sometimes it renders every other load;
  • Sometimes it renders every 3rd, 4th, or 5th load;
  • It usually works within < 10 loads ("hard" reloads that bypass cache);
  • It never worked twice in a row.
• Failures never indicated any problem with HTTP requests while inspecting network traffic with FF Web Developer Tools.
• Problem is unrelated to Google Tag Manager (www.googletagmanager.com) because Mermaid will successfully render even when DNS resolution is blackholed for this domain query;
  • I use Pi-Hole to effectively block this domain.
• I saw errors in the Developer Tools console about:

Source map error: Error: request failed with status 404
Resource URL: https://kubernetes.io/js/bootstrap-4.6.1.min.js
Source Map URL: bootstrap.min.js.map

    ...but these errors appeared even when the diagrams rendered successfully, AFAICT.

I have basically ignored Javascript since the 1990s (on purpose), so I am slow at debugging front-end issues across different frameworks and browser platforms.

Hope this helps.

[dennis-benzinger-hybris]

Happens to me on Safari 17.4

For example on https://kubernetes.io/docs/concepts/scheduling-eviction/topology-spread-constraints/ :

A reload solved it for now