diff --git a/src/components/common/PageContent.tsx b/src/components/common/PageContent.tsx
index 08190988..c4df6ba9 100644
--- a/src/components/common/PageContent.tsx
+++ b/src/components/common/PageContent.tsx
@@ -24,7 +24,6 @@ export const PageContent: React.FC<{
 }) => {
   const $articleRef = useRef<HTMLDivElement>(null)
   useCodeCopy()
-  useMermaid($articleRef)
 
   const inParsedContent = useMemo(() => {
     if (parsedContent) {
@@ -36,6 +35,7 @@ export const PageContent: React.FC<{
       return null
     }
   }, [content, parsedContent])
+  useMermaid($articleRef, inParsedContent?.element)
 
   return (
     <div
diff --git a/src/css/code.css b/src/css/code.css
index f55e897d..0ebf3fb8 100644
--- a/src/css/code.css
+++ b/src/css/code.css
@@ -17,3 +17,7 @@ pre {
   @apply inline-block w-4 text-right mr-5 -ml-2 text-zinc-400;
   content: attr(line);
 }
+
+pre.mermaid {
+  @apply bg-transparent flex justify-center;
+}
diff --git a/src/hooks/useMermaid.ts b/src/hooks/useMermaid.ts
index 855f10f9..22d07e2e 100644
--- a/src/hooks/useMermaid.ts
+++ b/src/hooks/useMermaid.ts
@@ -9,6 +9,7 @@ declare global {
 
 export const useMermaid = (
   contentRef: React.MutableRefObject<HTMLElement | null>,
+  deps: any,
 ) => {
   useEffect(() => {
     if (contentRef.current) {
@@ -28,5 +29,5 @@ export const useMermaid = (
         }
       })
     }
-  }, [contentRef])
+  }, [contentRef, deps])
 }
diff --git a/src/markdown/rehype-wrap-code.ts b/src/markdown/rehype-wrap-code.ts
index f0842d0a..d829d191 100644
--- a/src/markdown/rehype-wrap-code.ts
+++ b/src/markdown/rehype-wrap-code.ts
@@ -6,7 +6,12 @@ import { visit } from "unist-util-visit"
 export const rehypeWrapCode: Plugin<Array<void>, Root> = () => {
   return (tree) => {
     visit(tree, { type: "element", tagName: "pre" }, (node, index, parent) => {
-      if (parent && typeof index === "number") {
+      if (
+        parent &&
+        typeof index === "number" &&
+        // @ts-ignore
+        node?.properties?.className?.[0] !== "mermaid"
+      ) {
         const wrapper = u("element", {
           tagName: "div",
           properties: {
diff --git a/src/markdown/remark-mermaid.ts b/src/markdown/remark-mermaid.ts
index 57ae0bc4..0168155d 100644
--- a/src/markdown/remark-mermaid.ts
+++ b/src/markdown/remark-mermaid.ts
@@ -7,7 +7,7 @@ export const remarkMermaid: Plugin<Array<void>, Root> = () => (tree, file) => {
     if (node.type === "code" && node.lang === "mermaid") {
       // @ts-ignore
       node.type = "html"
-      node.value = `<div class="mermaid">${node.value}</div>`
+      node.value = `<pre class="mermaid" data-mermaid='true'>${node.value}</pre>`
     }
   })
 }