diff --git a/src/components/PreProxy/index.astro b/src/components/PreProxy/index.astro
new file mode 100644
index 0000000000..413f26f1e6
--- /dev/null
+++ b/src/components/PreProxy/index.astro
@@ -0,0 +1,20 @@
+---
+// Conditionally process pre blocks with CodeBlockWrapper or leave untouched.
+// Not all pre blocks should be rendered by the CodeBlockWrapper.
+// For example, mermaid diagram declarations should be left alone so that mermaid can process them.  
+//   In those cases, the diagram source isn't intended for the user.
+
+import CodeBlockWrapper from '../CodeBlockWrapper/index.astro';
+
+const props = Astro.props;
+
+// Check if this is a mermaid block
+// The 'data-language' or 'class' usually contains the language name
+const isMermaid = props.class?.includes('mermaid') || props['data-language'] === 'mermaid';
+---
+
+{isMermaid ? (
+  <pre {...props}><slot /></pre>
+) : (
+  <CodeBlockWrapper {...props}><slot /></CodeBlockWrapper>
+)}
\ No newline at end of file
diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro
index 7107405d05..1dc8218ad9 100644
--- a/src/layouts/TutorialLayout.astro
+++ b/src/layouts/TutorialLayout.astro
@@ -4,6 +4,7 @@ import Head from "@components/Head/index.astro";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { setJumpToState } from "../globals/state";
 import FreeRatioImage from "@components/Image/FreeRatioImage.astro";
+import PreProxy from "@components/PreProxy/index.astro";
 import CodeBlockWrapper from "@components/CodeBlockWrapper/index.astro";
 import LinkWrapper from "@components/LinkWrapper/index.astro";
 import RelatedItems from "@components/RelatedItems/index.astro";
@@ -68,7 +69,7 @@ const relatedExamples =
       components={{
         ...components,
         img: FreeRatioImage,
-        pre: CodeBlockWrapper,
+        pre: PreProxy,
         a: LinkWrapper,
       }}
     />