What happened
A Mermaid diagram is parsed, laid out, rendered, and sanitized again every time the same Markdown content remounts. Long conversations containing several Mermaid diagrams therefore repeat expensive work during transcript remounts and theme-driven rerenders, causing avoidable UI latency.
The expected behavior is to reuse a previously sanitized render for the same Mermaid version, source, and theme while keeping memory bounded and preserving valid, instance-local SVG IDs.
How to reproduce
- Open a long Desktop conversation containing several Mermaid code fences.
- Navigate away and back, or otherwise remount the transcript.
- Instrument
mermaid.render or record a performance profile.
- Observe that every unchanged diagram calls
mermaid.render again and repeats SVG sanitization.
- Repeat the remount; the same full work occurs on each pass.
A component regression can reproduce this deterministically by mounting, unmounting, and remounting MermaidDiagram with identical source and theme, then asserting that mermaid.render was called once rather than twice.
Environment
- Maka commit: 554b864
- OS: macOS
- Surface: Desktop / shared UI
- Node.js: 24.x
Logs, screenshots, or additional context
A safe cache must be bounded by both entry count and rendered size, include Mermaid version and theme in its key, avoid caching failures, coalesce concurrent identical renders, and rewrite Mermaid SVG IDs/references for each mounted instance. Mermaid sequence diagrams include fixed IDs such as actor1 and root-1, so replacing only the top-level render namespace is insufficient.
Automated submission by Codex on behalf of @liuxiaocs7.
What happened
A Mermaid diagram is parsed, laid out, rendered, and sanitized again every time the same Markdown content remounts. Long conversations containing several Mermaid diagrams therefore repeat expensive work during transcript remounts and theme-driven rerenders, causing avoidable UI latency.
The expected behavior is to reuse a previously sanitized render for the same Mermaid version, source, and theme while keeping memory bounded and preserving valid, instance-local SVG IDs.
How to reproduce
mermaid.renderor record a performance profile.mermaid.renderagain and repeats SVG sanitization.A component regression can reproduce this deterministically by mounting, unmounting, and remounting
MermaidDiagramwith identical source and theme, then asserting thatmermaid.renderwas called once rather than twice.Environment
Logs, screenshots, or additional context
A safe cache must be bounded by both entry count and rendered size, include Mermaid version and theme in its key, avoid caching failures, coalesce concurrent identical renders, and rewrite Mermaid SVG IDs/references for each mounted instance. Mermaid sequence diagrams include fixed IDs such as
actor1androot-1, so replacing only the top-level render namespace is insufficient.Automated submission by Codex on behalf of @liuxiaocs7.