Mermaid node labels clipped when web font loads after initial render

[puppylpg]

Checklist

• I have read the Contributing Guidelines.

How did you create the site?

Using the Chirpy gem (gem-based).

Describe the bug

Mermaid diagram node labels are visually clipped on the right edge when the page uses a web font loaded from a CDN (e.g. Google Fonts). The text fits inside the node box at first glance but the rightmost few pixels are cut off, most noticeable on longer labels.

Steps To Reproduce

1. Create a page with mermaid: true in front matter.
2. Add a flowchart diagram with labelled nodes.
3. Configure the site to load a web font from a CDN.
4. Open the page in a browser on a network connection where the font CDN is slightly slower than the page JS (or use DevTools Network throttling to slow fonts).
5. Observe that Mermaid node labels are clipped on the right side.

Reproducible consistently in production builds.

Expected Behavior

Node label text is fully visible and not clipped.

Root Cause

loadMermaid() in _javascript/modules/components/mermaid.js calls mermaid.initialize() without startOnLoad: false. With the default startOnLoad: true, Mermaid renders immediately and measures label widths using whatever font is available at that moment. If the web font has not yet loaded, it uses a narrower fallback font for measurement. When the web font arrives the glyphs are wider, but the SVG foreignObject box was already sized to the smaller measurement, so the text overflows and is clipped by the default overflow: hidden.

Environment

• Pure browser-side JavaScript issue; Ruby / Jekyll / Chirpy gem versions are not relevant.
• Reproducible with Mermaid v11 (the version referenced in _data/origin/cors.yml).
• Reproducible in Chromium and Firefox on any OS.

Anything else?

Fix: set startOnLoad: false in the Mermaid config and defer mermaid.run() until document.fonts.ready (with a 2.5 s timeout so a blocked font CDN never stalls rendering). This ensures label widths are always measured with the final font.

[cotes2020]

Despite the detailed description, I'm still unclear about the issue you are facing. Please provide a screenshot or a video recording to help us better understand the problem.