Merge pull request #2 from mertguvencli/feat/mermaid-support

feat: add mermaid diagram support

Author: mertguvencli

lib/default-markdown.ts

@@ -118,6 +118,21 @@ Inline HTML is supported, just like on GitHub.
 
 ---
 
+## Diagrams
+
+Mermaid diagrams are rendered automatically from fenced code blocks.
+
+\`\`\`mermaid
+graph TD
+    A[Write Markdown] --> B[Live Preview]
+    B --> C{Satisfied?}
+    C -->|Yes| D[Export PDF]
+    C -->|No| A
+    D --> E[Done!]
+\`\`\`
+
+---
+
 ## Images
 
 ![Placeholder](https://placehold.co/800x300/f4f4f5/a1a1aa?text=MarkBloom+Image+Preview)

lib/markdown-components.tsx

@@ -1,9 +1,63 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import type { Components } from "react-markdown";
 import type { BundledLanguage } from "shiki";
 
+function MermaidBlock({ children }: { children: string }) {
+  const id = useId().replace(/:/g, "m");
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    import("mermaid").then(({ default: mermaid }) => {
+      if (cancelled) return;
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: "neutral",
+        securityLevel: "loose",
+      });
+      mermaid
+        .render(`mermaid-${id}`, children.replace(/\n$/, ""))
+        .then(({ svg: renderedSvg }: { svg: string }) => {
+          if (!cancelled) setSvg(renderedSvg);
+        })
+        .catch((err: unknown) => {
+          if (!cancelled) setError(String(err));
+        });
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [children, id]);
+
+  if (error) {
+    return (
+      <pre className="mb-5 rounded-lg border border-red-300 bg-red-50 text-red-700 p-4 text-sm">
+        <code>{error}</code>
+      </pre>
+    );
+  }
+
+  if (svg) {
+    return (
+      <div
+        className="mb-5 flex justify-center rounded-lg border border-zinc-200 bg-white p-4 [&_svg]:max-w-full"
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    );
+  }
+
+  return (
+    <div className="mb-5 flex justify-center rounded-lg border border-zinc-200 bg-zinc-50 p-8 text-zinc-400 text-sm">
+      Rendering diagram…
+    </div>
+  );
+}
+
 function CodeBlock({
   language,
   children,
@@ -77,6 +131,9 @@ export const markdownComponents: Components = {
   code: ({ children, className }) => {
     const match = className?.match(/language-(\w+)/);
     if (match) {
+      if (match[1] === "mermaid") {
+        return <MermaidBlock>{String(children)}</MermaidBlock>;
+      }
       return <CodeBlock language={match[1]} children={String(children)} />;
     }
     // Block code without a language (inside <pre>)

package.json

@@ -21,6 +21,7 @@
     "html2canvas-pro": "^2.0.2",
     "jspdf": "^4.2.1",
     "lucide-react": "^1.8.0",
+    "mermaid": "^11.14.0",
     "next": "16.2.3",
     "radix-ui": "^1.4.3",
     "react": "19.2.4",