From c7ed68ee21601b90dd9172a5329acf62793f67ca Mon Sep 17 00:00:00 2001
From: Clickin <josh87786@gmail.com>
Date: Mon, 9 Mar 2026 19:24:06 +0900
Subject: [PATCH] refactor: bundle mermaid via npm dependency

---
 README.md                    | 23 +++++++++++
 package.json                 |  3 +-
 src/components/Mermaid.astro | 79 ++++++++++++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Mermaid.astro

diff --git a/README.md b/README.md
index b93a7d6..c7794bf 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,29 @@ src/content/posts/YYYY-MM-DD-slug/
 └── image.png    # Co-located assets (optional)
 ```
 
+
+## Mermaid Diagram (MDX Component)
+
+다이어그램을 이미지 파일 대신 코드로 관리하려면 MDX에서 `Mermaid` 컴포넌트를 import해서 사용하세요.
+
+```mdx
+---
+title: "diagram post"
+---
+
+import Mermaid from "../../../components/Mermaid.astro";
+
+<Mermaid
+  chart={`
+flowchart TD
+  A[Write Mermaid code in MDX] --> B[Build Astro]
+  B --> C[Diagram renders in post]
+`}
+/>
+```
+
+> `mermaid`는 npm dependency로 관리되며, Astro 번들 단계에서 처리됩니다.
+
 ## License
 
 MIT
diff --git a/package.json b/package.json
index 9335249..65c4442 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "astro-og-canvas": "^0.10.1",
     "canvaskit-wasm": "^0.40.0",
     "tailwindcss": "^4.1.18",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "mermaid": "^11.12.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
diff --git a/src/components/Mermaid.astro b/src/components/Mermaid.astro
new file mode 100644
index 0000000..f690a03
--- /dev/null
+++ b/src/components/Mermaid.astro
@@ -0,0 +1,79 @@
+---
+interface Props {
+  chart: string;
+  class?: string;
+}
+
+const { chart, class: className = "" } = Astro.props;
+---
+
+<div class={`mermaid-diagram ${className}`.trim()} data-mermaid-root>
+  <pre class="mermaid" data-mermaid-source={chart}>{chart}</pre>
+</div>
+
+<script type="module">
+  import mermaid from "mermaid";
+
+  const getTheme = () => (document.documentElement.classList.contains("dark") ? "dark" : "default");
+  let initializedTheme = "";
+
+  const ensureInitialized = () => {
+    const theme = getTheme();
+    if (initializedTheme === theme) return;
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: "strict",
+      theme,
+    });
+    initializedTheme = theme;
+  };
+
+  const resetRenderedCharts = () => {
+    const rendered = document.querySelectorAll("[data-mermaid-root][data-mermaid-rendered] .mermaid");
+    rendered.forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      const source = node.dataset.mermaidSource;
+      if (!source) return;
+      node.removeAttribute("data-processed");
+      node.innerHTML = source;
+    });
+    document
+      .querySelectorAll("[data-mermaid-root][data-mermaid-rendered]")
+      .forEach((container) => container.removeAttribute("data-mermaid-rendered"));
+  };
+
+  const renderMermaid = async () => {
+    ensureInitialized();
+    const containers = document.querySelectorAll("[data-mermaid-root]:not([data-mermaid-rendered])");
+    if (!containers.length) return;
+
+    const nodes = [];
+    containers.forEach((container) => {
+      const target = container.querySelector(".mermaid");
+      if (target instanceof Element) nodes.push(target);
+    });
+
+    if (!nodes.length) return;
+    await mermaid.run({ nodes });
+    containers.forEach((container) => container.setAttribute("data-mermaid-rendered", "true"));
+  };
+
+  renderMermaid();
+
+  let themeObserverQueued = false;
+  const observer = new MutationObserver(() => {
+    if (themeObserverQueued) return;
+    themeObserverQueued = true;
+    requestAnimationFrame(() => {
+      themeObserverQueued = false;
+      if (initializedTheme === getTheme()) return;
+      resetRenderedCharts();
+      renderMermaid();
+    });
+  });
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+</script>