Skip to content

Mermaid improvements#11874

Merged
tommoor merged 4 commits into
mainfrom
tommoor/mermaid-issue-11782
Mar 26, 2026
Merged

Mermaid improvements#11874
tommoor merged 4 commits into
mainfrom
tommoor/mermaid-issue-11782

Conversation

@tommoor

@tommoor tommoor commented Mar 26, 2026

Copy link
Copy Markdown
Member

Related #11782

tommoor and others added 3 commits March 25, 2026 22:07
Includes a fix for incorrect viewBox casing in Radar and Packet diagram
renderers (mermaid-js/mermaid#7076) and other improvements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Instead of positioning the temporary render element offscreen at
-9999px, use visibility:hidden with position:fixed so the browser
computes correct bounding boxes for SVG elements. Offscreen elements
can produce incorrect getBBox() results, leading to wrong viewBox
dimensions and diagrams rendering too big or too small.

Fixes #11782

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings March 26, 2026 02:31

This comment was marked as resolved.

Track access order via a dedicated LRU index key so the cache evicts
least-recently-used entries rather than arbitrary ones.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@tommoor tommoor merged commit 979d9a4 into main Mar 26, 2026
16 checks passed
@tommoor tommoor deleted the tommoor/mermaid-issue-11782 branch March 26, 2026 02:59
NoWauu pushed a commit to NoWauu/outline that referenced this pull request May 12, 2026
* fix: Upgrade mermaid to 11.13.0

Includes a fix for incorrect viewBox casing in Radar and Packet diagram
renderers (mermaid-js/mermaid#7076) and other improvements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: Use visibility:hidden for mermaid rendering element

Instead of positioning the temporary render element offscreen at
-9999px, use visibility:hidden with position:fixed so the browser
computes correct bounding boxes for SVG elements. Offscreen elements
can produce incorrect getBBox() results, leading to wrong viewBox
dimensions and diagrams rendering too big or too small.

Fixes outline#11782

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add session storage for generated diagrams to reduce relayout

* fix: Use LRU eviction for mermaid sessionStorage cache

Track access order via a dedicated LRU index key so the cache evicts
least-recently-used entries rather than arbitrary ones.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
renderElement.style.visibility = "hidden";
renderElement.style.top = "0";
renderElement.style.left = "0";
renderElement.style.width = "100%";

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% binds rendering to viewport. Shouldn’t this use the editor width instead? Thinks this could break scaling/wide screens/virtual desktops.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mermaid diagram renders too big or too small

3 participants