Alexa Kristensen e44889768c ux: improve Mermaid rendering and theme switching (#26304) ...

## Summary

**Problem:** Mermaid diagrams briefly showed their raw source before the
SVG appeared, stayed on the wrong palette after a light/dark theme
toggle, and could leave Mermaid's error graphic in the page when a
diagram failed to parse.

**Why this change:** Diagrams are used more often in the docs, so the
renderer needs to match the site theme and avoid flashing source text
while SVGs load.

**Solution:** Replace `mermaid.run()` with a controlled
`mermaid.render()` loop that caches each block's source, skips stale
async results, re-renders when the `<html>` dark class changes,
suppresses Mermaid's default error SVG, and hides `pre.mermaid` until an
SVG is present (or a render error sets `data-error` so the source can
still be inspected).

@netlify /get-started/docker-concepts/the-basics/what-is-a-registry/

Preview:
https://deploy-preview-26304--docsdocker.netlify.app/get-started/docker-concepts/the-basics/what-is-a-registry/
Example of pre-fix behavior:
https://deploy-preview-26283--docsdocker.netlify.app/accounts/organization/

Generated by Cursor

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-10-08 10:41:05 -05:00

3.7 KiB

Raw Permalink Blame History

View Raw