From e8e73f6ded2abdab909c1826dd4656c2b8d8fa63 Mon Sep 17 00:00:00 2001
From: Sergiy Dybskiy <sergiy.dybskiy@sentry.io>
Date: Wed, 12 Nov 2025 14:27:31 -0500
Subject: [PATCH 1/2] fix: Skip mermaid blocks in CodeBlock and
 rehype-onboarding-lines to prevent processing interference with client-side
 mermaid rendering (regression from #15473)

---
 src/components/codeBlock/index.tsx | 5 +++++
 src/rehype-onboarding-lines.js     | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/components/codeBlock/index.tsx b/src/components/codeBlock/index.tsx
index 11ce2217f080a..5ba4230ca1865 100644
--- a/src/components/codeBlock/index.tsx
+++ b/src/components/codeBlock/index.tsx
@@ -54,6 +54,11 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
 
+  // Mermaid blocks should not be processed by CodeBlock - they need special client-side rendering
+  if (language === 'mermaid') {
+    return <>{children}</>;
+  }
+
   // Show the copy button after js has loaded
   // otherwise the copy button will not work
   const [showCopyButton, setShowCopyButton] = useState(false);
diff --git a/src/rehype-onboarding-lines.js b/src/rehype-onboarding-lines.js
index 58c0e27296b83..b1b86a6f89167 100644
--- a/src/rehype-onboarding-lines.js
+++ b/src/rehype-onboarding-lines.js
@@ -29,6 +29,10 @@ function visitor(node) {
   if (!node.properties.className?.includes('code-highlight')) {
     return;
   }
+  // ignore mermaid code blocks - they have special client-side rendering
+  if (node.properties.className?.includes('language-mermaid')) {
+    return;
+  }
   handle_inline_options(node);
 }
 

From 93e6548df4e2a3a710e5e5d0f43fcedca87e4356 Mon Sep 17 00:00:00 2001
From: paulj <jaffrepaul@gmail.com>
Date: Wed, 12 Nov 2025 15:34:00 -0500
Subject: [PATCH 2/2] move early return to comply with hooks rules

---
 src/components/codeBlock/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/codeBlock/index.tsx b/src/components/codeBlock/index.tsx
index 5ba4230ca1865..310df8d13b5a9 100644
--- a/src/components/codeBlock/index.tsx
+++ b/src/components/codeBlock/index.tsx
@@ -54,11 +54,6 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
 
-  // Mermaid blocks should not be processed by CodeBlock - they need special client-side rendering
-  if (language === 'mermaid') {
-    return <>{children}</>;
-  }
-
   // Show the copy button after js has loaded
   // otherwise the copy button will not work
   const [showCopyButton, setShowCopyButton] = useState(false);
@@ -90,6 +85,11 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
 
   useCleanSnippetInClipboard(codeRef, {language});
 
+  // Mermaid blocks should not be processed by CodeBlock - they need special client-side rendering
+  if (language === 'mermaid') {
+    return <div className="language-mermaid">{children}</div>;
+  }
+
   async function copyCodeOnClick() {
     if (codeRef.current === null) {
       return;