diff --git a/src/pages/DiagramEditor.js b/src/pages/DiagramEditor.js
index 0533de90..f3e3b4f0 100755
--- a/src/pages/DiagramEditor.js
+++ b/src/pages/DiagramEditor.js
@@ -14,6 +14,7 @@ import {
   Eye,
   AlertTriangle,
   FileText,
+  Copy,
 } from "lucide-react";
 import ToolLayout from "../components/ToolLayout";
 import CodeMirrorEditor from "../components/CodeMirrorEditor";
@@ -22,6 +23,7 @@ import RelatedTools from "../components/RelatedTools";
 import ReactFlowEditor from "../components/diagram/ReactFlowEditor";
 import FullscreenAdBanner from "../components/FullscreenAdBanner";
 import { toPng } from "html-to-image";
+import { generateMermaidFromGraph } from "../utils/mermaidGenerator";
 
 const DIAGRAM_TEMPLATES = {
   flowchart: {
@@ -214,6 +216,28 @@ const DiagramEditor = () => {
     downloadFile(code, "diagram.json", "application/json");
   };
 
+  const exportMermaid = () => {
+    const mermaidCode = generateMermaidFromGraph(
+      graphData.nodes,
+      graphData.edges,
+    );
+    downloadFile(mermaidCode, "diagram.mmd", "text/plain");
+  };
+
+  const copyMermaid = () => {
+    const mermaidCode = generateMermaidFromGraph(
+      graphData.nodes,
+      graphData.edges,
+    );
+    navigator.clipboard
+      .writeText(mermaidCode)
+      .then(() => {
+        // Could add toast notification here
+        console.log("Mermaid code copied!");
+      })
+      .catch((err) => console.error("Failed to copy", err));
+  };
+
   const exportPNG = () => {
     const flowElement = document.querySelector(".react-flow");
     if (!flowElement) return;
@@ -503,7 +527,7 @@ const DiagramEditor = () => {
                 Export Diagram
               </h3>
             </div>
-            <div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
               <button
                 onClick={exportPNG}
                 className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all group"
@@ -527,6 +551,28 @@ const DiagramEditor = () => {
                 </span>
                 <span className="text-xs text-gray-500">.json data format</span>
               </button>
+
+              <button
+                onClick={exportMermaid}
+                className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition-all group"
+              >
+                <FileCode2 className="h-6 w-6 text-gray-500 group-hover:text-green-500 mb-2" />
+                <span className="font-medium text-gray-900 dark:text-white">
+                  Mermaid File
+                </span>
+                <span className="text-xs text-gray-500">.mmd raw code</span>
+              </button>
+
+              <button
+                onClick={copyMermaid}
+                className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-all group"
+              >
+                <Copy className="h-6 w-6 text-gray-500 group-hover:text-orange-500 mb-2" />
+                <span className="font-medium text-gray-900 dark:text-white">
+                  Copy Mermaid
+                </span>
+                <span className="text-xs text-gray-500">To clipboard</span>
+              </button>
             </div>
           </div>
         )}