diff --git a/packages/react-notion-x/package.json b/packages/react-notion-x/package.json
index 915abf031..94b2cd4c0 100644
--- a/packages/react-notion-x/package.json
+++ b/packages/react-notion-x/package.json
@@ -25,6 +25,7 @@
     "@fisch0920/medium-zoom": "^1.0.7",
     "@matejmazur/react-katex": "^3.1.3",
     "katex": "^0.15.3",
+    "mermaid": "^10.2.3",
     "notion-types": "^6.16.0",
     "notion-utils": "^6.16.0",
     "prismjs": "^1.27.0",
diff --git a/packages/react-notion-x/src/third-party/code.tsx b/packages/react-notion-x/src/third-party/code.tsx
index baec68cb6..1c6803326 100644
--- a/packages/react-notion-x/src/third-party/code.tsx
+++ b/packages/react-notion-x/src/third-party/code.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import copyToClipboard from 'clipboard-copy'
+import mermaid from 'mermaid'
 import { CodeBlock } from 'notion-types'
 import { getBlockTitle } from 'notion-utils'
 import { highlightElement } from 'prismjs'
@@ -44,6 +45,29 @@ export const Code: React.FC<{
     }
   }, [codeRef])
 
+  React.useEffect(() => {
+    const renderMermaid = async () => {
+      try {
+        if (language === 'mermaid') {
+          mermaid.initialize({
+            startOnLoad: true,
+            theme: 'dark',
+            flowchart: {
+              useMaxWidth: false,
+              htmlLabels: true,
+              curve: 'linear'
+            }
+          })
+          await mermaid.run({ querySelector: 'code.language-mermaid' })
+        }
+      } catch (err) {
+        console.warn('mermaid highlight error', err)
+      }
+    }
+
+    renderMermaid()
+  }, [language])
+
   const onClickCopyToClipboard = React.useCallback(() => {
     copyToClipboard(content)
     setIsCopied(true)