Fix Mermaid block diagrams not rendering (RND-11167)

Mermaid's block layout keeps a d3 selection on each block's size and then
JSON.stringifies the blocks for a debug log. The selection references
<html>, which React hydrates with circular fiber properties, so rendering
throws and the block falls back to a plain code block. Patch Mermaid to
drop the unused selection, and version the runtime URL by patch hash so
cached runtimes are not reused.

bun.lock

@@ -343,6 +343,7 @@
   "patchedDependencies": {
     "decode-named-character-reference@1.0.2": "patches/decode-named-character-reference@1.0.2.patch",
     "next@16.3.8": "patches/next@16.3.8.patch",
+    "mermaid@11.14.0": "patches/mermaid@11.14.0.patch",
   },
   "overrides": {
     "@codemirror/state": "6.4.1",

package.json

@@ -67,6 +67,7 @@
     "patchedDependencies": {
         "decode-named-character-reference@1.0.2": "patches/decode-named-character-reference@1.0.2.patch",
         "@vercel/next@4.4.2": "patches/@vercel%2Fnext@4.4.2.patch",
-        "next@16.3.8": "patches/next@16.3.8.patch"
+        "next@16.3.8": "patches/next@16.3.8.patch",
+        "mermaid@11.14.0": "patches/mermaid@11.14.0.patch"
     }
 }

packages/gitbook/scripts/generate-mermaid-runtime.ts

@@ -1,5 +1,6 @@
 import { build } from 'bun';
-import { mkdir, rename, rm } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, rename, rm } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -12,14 +13,20 @@ const temporaryDir = join(outputDir, '.build');
 const require = createRequire(import.meta.url);
 const mermaidPackage = require('mermaid/package.json') as { version: string };
 const zenumlPackage = require('@mermaid-js/mermaid-zenuml/package.json') as { version: string };
+const mermaidPatch = await readFile(
+    join(scriptDir, `../../../patches/mermaid@${mermaidPackage.version}.patch`)
+).catch(() => null);
+const mermaidPatchSuffix = mermaidPatch
+    ? `-patch.${createHash('sha256').update(mermaidPatch).digest('hex').slice(0, 8)}`
+    : '';
 
-// The runtime URL is served as immutable, it has to change whenever the bundled versions change.
+// The runtime URL is served as immutable, it has to change whenever the bundled versions or patch change.
 if (
     MERMAID_RUNTIME_PATH !==
-    `mermaid/mermaid@${mermaidPackage.version}-zenuml@${zenumlPackage.version}.mjs`
+    `mermaid/mermaid@${mermaidPackage.version}${mermaidPatchSuffix}-zenuml@${zenumlPackage.version}.mjs`
 ) {
     throw new Error(
-        'Update MERMAID_RUNTIME_PATH for the installed mermaid and @mermaid-js/mermaid-zenuml versions'
+        'Update MERMAID_RUNTIME_PATH for the installed mermaid and @mermaid-js/mermaid-zenuml versions and the mermaid patch'
     );
 }
 

packages/gitbook/src/components/DocumentView/CodeBlock/mermaid-runtime-path.ts

@@ -1 +1 @@
-export const MERMAID_RUNTIME_PATH = 'mermaid/mermaid@11.14.0-zenuml@0.2.2.mjs';
+export const MERMAID_RUNTIME_PATH = 'mermaid/mermaid@11.14.0-patch.b4f92f7b-zenuml@0.2.2.mjs';

patches/mermaid@11.14.0.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs b/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs
+index f37722f2f65d3c49904ec704998a9a0ce6f01d21..0b97ddef583d120235530222990f08db3de83e5d 100644
+--- a/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs
++++ b/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs
+@@ -3658,7 +3658,7 @@ async function calculateBlockSize(elem, block, db2) {
+   const nodeEl = await insertNode(elem, node, { config: config2 });
+   const boundingBox = nodeEl.node().getBBox();
+   const obj = db2.getBlock(node.id);
+-  obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
++  obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0 };
+   db2.setBlock(obj);
+   nodeEl.remove();
+ }