Mermaid improvements (outline#11874)

* 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>

Author: tommoor

package.json

@@ -169,7 +169,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^3.0.0",
-    "mermaid": "11.12.1",
+    "mermaid": "11.13.0",
     "mime-types": "^3.0.1",
     "mobx": "^4.15.4",
     "mobx-react": "^6.3.1",

shared/editor/extensions/Mermaid.ts

@@ -15,6 +15,7 @@ import { findParentNode } from "../queries/findParentNode";
 import type { NodeWithPos } from "../types";
 import type { Editor } from "../../../app/editor";
 import { LightboxImageFactory } from "../lib/Lightbox";
+import { hashString } from "../../utils/string";
 import { sanitizeUrl } from "../../utils/urls";
 
 export const pluginKey = new PluginKey("mermaid");
@@ -25,21 +26,72 @@ export type MermaidState = {
   editingId?: string;
 };
 
+const STORAGE_PREFIX = "mermaid:";
+const MAX_STORAGE_ENTRIES = 20;
+
 class Cache {
-  static get(key: string) {
-    return this.data.get(key);
+  /** Get a cached SVG by diagram text and theme. */
+  static get(key: string): string | undefined {
+    try {
+      const hash = hashString(key);
+      const value = sessionStorage.getItem(STORAGE_PREFIX + hash);
+      if (value) {
+        this.touchLru(hash);
+        return value;
+      }
+    } catch {
+      // sessionStorage unavailable
+    }
+    return undefined;
   }
 
+  /** Cache a rendered SVG in sessionStorage. */
   static set(key: string, value: string) {
-    this.data.set(key, value);
+    try {
+      const hash = hashString(key);
+      this.touchLru(hash);
+      this.pruneStorage();
+      sessionStorage.setItem(STORAGE_PREFIX + hash, value);
+    } catch {
+      // sessionStorage full or unavailable
+    }
+  }
 
-    if (this.data.size > this.maxSize) {
-      this.data.delete(this.data.keys().next().value);
+  /** Move or append a hash to the end (most recent) of the LRU list. */
+  private static touchLru(hash: string) {
+    const lru = this.getLru();
+    const idx = lru.indexOf(hash);
+    if (idx !== -1) {
+      lru.splice(idx, 1);
     }
+    lru.push(hash);
+    sessionStorage.setItem(STORAGE_PREFIX + "lru", JSON.stringify(lru));
   }
 
-  private static maxSize = 20;
-  private static data: Map<string, string> = new Map();
+  /** Evict least-recently-used entries when over the limit. */
+  private static pruneStorage() {
+    const lru = this.getLru();
+
+    while (lru.length > MAX_STORAGE_ENTRIES) {
+      const evict = lru.shift()!;
+      sessionStorage.removeItem(STORAGE_PREFIX + evict);
+    }
+
+    sessionStorage.setItem(STORAGE_PREFIX + "lru", JSON.stringify(lru));
+  }
+
+  /** Read the LRU order list from sessionStorage. */
+  private static getLru(): string[] {
+    try {
+      const raw = sessionStorage.getItem(STORAGE_PREFIX + "lru");
+      if (raw) {
+        return JSON.parse(raw);
+      }
+    } catch {
+      // corrupted or unavailable
+    }
+    return [];
+  }
 }
 
 let mermaid: typeof MermaidUnsafe;
@@ -104,16 +156,20 @@ class MermaidRenderer {
       return;
     }
 
-    // Create a temporary element that will render the diagram off-screen. This is necessary
-    // as Mermaid will error if the element is not visible or the element is removed while the
-    // diagram is being rendered.
+    // Create a temporary element for rendering. We use visibility:hidden instead of
+    // offscreen positioning so the browser computes correct bounding boxes for SVG
+    // elements — offscreen elements can produce incorrect getBBox() results, leading
+    // to wrong viewBox dimensions (see mermaid-js/mermaid#6146).
     const renderElement = document.createElement("div");
     const tempId =
       "offscreen-mermaid-" + Math.random().toString(36).substr(2, 9);
     renderElement.id = tempId;
-    renderElement.style.position = "absolute";
-    renderElement.style.left = "-9999px";
-    renderElement.style.top = "-9999px";
+    renderElement.style.position = "fixed";
+    renderElement.style.visibility = "hidden";
+    renderElement.style.top = "0";
+    renderElement.style.left = "0";
+    renderElement.style.width = "100%";
+    renderElement.style.zIndex = "-1";
     document.body.appendChild(renderElement);
 
     try {

shared/utils/string.test.ts

@@ -0,0 +1,19 @@
+import { hashString } from "./string";
+
+describe("hashString", () => {
+  it("returns a hex string", () => {
+    expect(hashString("hello")).toMatch(/^[0-9a-f]+$/);
+  });
+
+  it("returns consistent results for the same input", () => {
+    expect(hashString("test")).toBe(hashString("test"));
+  });
+
+  it("returns different hashes for different inputs", () => {
+    expect(hashString("abc")).not.toBe(hashString("def"));
+  });
+
+  it("handles empty string", () => {
+    expect(hashString("")).toMatch(/^[0-9a-f]+$/);
+  });
+});

shared/utils/string.ts

@@ -1,3 +1,17 @@
+/**
+ * Simple string hash using the djb2 algorithm, returns a hex string.
+ *
+ * @param str the string to hash.
+ * @returns a hex-encoded 32-bit hash.
+ */
+export function hashString(str: string): string {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash + str.charCodeAt(i)) | 0;
+  }
+  return (hash >>> 0).toString(16);
+}
+
 /**
  * Returns the index of the first occurrence of a substring in a string that matches a regular expression.
  *