Add Mermaid MDX component and docs for diagram rendering

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

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",

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>