Mermaid Diagrams Not Rendering in Diagram Guide

[niranjandarshann]

Description
Mermaid diagrams in the diagram-guide folder are not rendering when the site is served.Instead of displaying the expected diagrams, a blank space is shown.

Steps to Reproduce:

Clone the kubernetes/website repository.
Navigate to the diagram-guide folder.
Start the local server using hugo server.
Observe that Mermaid diagrams are missing, replaced by blank spaces.

Expected Behavior:
The Mermaid diagrams should render correctly, showing the visual representation of the diagrams as intended.

[k8s-ci-robot]

This issue is currently awaiting triage.

SIG Docs takes a lead on issue triage for this website, but any Kubernetes member can accept issues by applying the triage/accepted label.

The triage/accepted label can be added by org members by writing /triage accepted in a comment.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[niranjandarshann]

/kind bug
/language en
/sig docs

[niranjandarshann]

Page Related issue : https://kubernetes.io/docs/contribute/style/diagram-guide/

Snapview of the page

[niranjandarshann]

Here after Figure1 there is blank space inside box instead of Figure.

[aakankshabhende]

@niranjandarshann This seems to work fine for me. Could you please try again after a hard refresh?

[sftim]

Folks, please note the name and version of the web browsers you're using.

[aakankshabhende]

Google chrome v131

[niranjandarshann]

Is this vary from version of the web browser we are using?

[shurup]

I'm experiencing the same issue. It's more general for mermaid diagrams throughout the website. E.g., here's what I see on this page:

My browser is Firefox 133.0.3 (64-bit) / Linux (from Mozilla snap for Ubuntu). Interestingly, this issue is reproduced randomly if I refresh the page, meaning that sometimes I can see the figures, but sometimes not.

The same figures always render fine in my Google Chrome/Linux.

[niranjandarshann]

What i think is this not looks good as image depends on version of browser think about New readers who may visit the site first time he/she dont know whether to use the updated browser or not in case readers have the old browser then it look not good . We should think on it. As i several times faced the issue.
folks,WDYT!

[shurup]

The bug persists in my local website setup as well. I thought it could be caused by a JS error produced by banner-dismiss.js, but that doesn't seem to be a culprit (I'll open another issue for that a bit later though).

Thus, it could be a Mermaid-related problem (such as mermaid-js/mermaid#6112). What surprised me was that while we have the assets/js/mermaid-10.6.1.min.js file in the repo, the actual library in use seems to be <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" ... in the layouts/partials/scripts.html, am I correct?

[sftim]

Is this a duplicate of #49053?

[sftim]

What surprised me was that while we have the assets/js/mermaid-10.6.1.min.js file in the repo, the actual library in use seems to be <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" ... in the layouts/partials/scripts.html, am I correct?

We recently switched to Docsy 0.6 and to loading Mermaid from a CDN, the way that Docsy 0.6 does it.
We could remove our local vendored Mermaid and rely on Docsy's Mermaid support.

[niranjandarshann]

The bug persists in my local website setup as well. I thought it could be caused by a JS error produced by banner-dismiss.js, but that doesn't seem to be a culprit (I'll open another issue for that a bit later though).

Thus, it could be a Mermaid-related problem (such as mermaid-js/mermaid#6112). What surprised me was that while we have the assets/js/mermaid-10.6.1.min.js file in the repo, the actual library in use seems to be <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" ... in the layouts/partials/scripts.html, am I correct?

yes , Exactly

[niranjandarshann]

Is this a duplicate of #49053?

Yes that issue is also related to mermaid diagram

[shurup]

We recently switched to Docsy 0.6 and to loading Mermaid from a CDN, the way that Docsy 0.6 does it.
We could remove our local vendored Mermaid and rely on Docsy's Mermaid support.

Thanks for this clarification! JFYI: according to my local tests, even updating Mermaid to its latest release (v11.4.1) doesn't bring any magic. I'm still experiencing the same issue in Firefox.

Perhaps we'd better close this issue in favour of the one created earlier?