fix: Skip mermaid blocks in CodeBlock and rehype-onboarding-lines

src/components/codeBlock/index.tsx

@@ -85,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;

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);
 }