fix(build): remove unused imports in DiagramEditor and ReactFlowEditor

package-lock.json

@@ -43,6 +43,7 @@
         "dompurify": "^3.3.0",
         "file-saver": "^2.0.5",
         "highlight.js": "^11.11.1",
+        "html-to-image": "^1.11.13",
         "html2pdf.js": "^0.12.1",
         "js-beautify": "^1.15.4",
         "jspdf": "^3.0.3",
@@ -22984,6 +22985,12 @@
       "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
       "license": "MIT"
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.7",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.7.tgz",

package.json

@@ -39,6 +39,7 @@
     "dompurify": "^3.3.0",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",
+    "html-to-image": "^1.11.13",
     "html2pdf.js": "^0.12.1",
     "js-beautify": "^1.15.4",
     "jspdf": "^3.0.3",

src/pages/DiagramEditor.js

@@ -1,126 +1,121 @@
 import React, { useState, useRef, useEffect } from "react";
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-import mermaid from "mermaid";
 import {
   GitGraph,
   Plus,
   Upload,
   Download,
   Globe,
-  Edit3,
   Type,
   Columns,
   Maximize2,
   Minimize2,
-  Check,
-  Copy,
   FileImage,
   FileCode2,
-  ZoomIn,
-  ZoomOut,
-  Maximize,
-  FileDown,
   Eye,
   AlertTriangle,
+  FileText,
 } from "lucide-react";
 import ToolLayout from "../components/ToolLayout";
 import CodeMirrorEditor from "../components/CodeMirrorEditor";
-import AdvancedURLFetch from "../components/AdvancedURLFetch";
 import SEO from "../components/SEO";
 import RelatedTools from "../components/RelatedTools";
-
+import ReactFlowEditor from "../components/diagram/ReactFlowEditor";
-// Debounce helper
+import FullscreenAdBanner from "../components/FullscreenAdBanner";
-const useDebounce = (value, delay) => {
+import { toPng } from "html-to-image";
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => clearTimeout(handler);
-  }, [value, delay]);
-  return debouncedValue;
-};
 
 const DIAGRAM_TEMPLATES = {
-  flowchart: `flowchart TD
+  flowchart: {
-    A[Start] --> B{Is it?};
+    nodes: [
-    B -- Yes --> C[OK];
+      {
-    C --> D[Rethink];
+        id: "1",
-    D --> B;
+        type: "process",
-    B -- No ----> E[End];`,
+        position: { x: 250, y: 50 },
-  sequence: `sequenceDiagram
+        data: { label: "Start" },
-    participant Alice
+      },
-    participant Bob
+      {
-    Alice->>John: Hello John, how are you?
+        id: "2",
-    loop Healthcheck
+        type: "decision",
-        John->>John: Fight against hypochondria
+        position: { x: 250, y: 150 },
-    end
+        data: { label: "Is it OK?" },
-    Note right of John: Rational thoughts <br/>prevail!
+      },
-    John-->>Alice: Great!
+      {
-    John->>Bob: How about you?
+        id: "3",
-    Bob-->>John: Jolly good!`,
+        type: "process",
-  class: `classDiagram
+        position: { x: 100, y: 250 },
-    Animal <|-- Duck
+        data: { label: "Fix it" },
-    Animal <|-- Fish
+      },
-    Animal <|-- Zebra
+      {
-    Animal : +int age
+        id: "4",
-    Animal : +String gender
+        type: "database",
-    Animal: +isMammal()
+        position: { x: 400, y: 250 },
-    Animal: +mate()
+        data: { label: "Save to DB" },
-    class Duck{
+      },
-      +String beakColor
+      {
-      +swim()
+        id: "5",
-      +quack()
+        type: "process",
-    }
+        position: { x: 250, y: 350 },
-    class Fish{
+        data: { label: "End" },
-      -int sizeInFeet
+      },
-      -canEat()
+    ],
-    }
+    edges: [
-    class Zebra{
+      { id: "e1-2", source: "1", target: "2" },
-      +bool is_wild
+      {
-      +run()
+        id: "e2-3",
-    }`,
+        source: "2",
-  state: `stateDiagram-v2
+        target: "3",
-    [*] --> Still
+        sourceHandle: "left",
-    Still --> [*]
+        label: "No",
-
+      },
-    Still --> Moving
+      {
-    Moving --> Still
+        id: "e2-4",
-    Moving --> Crash
+        source: "2",
-    Crash --> [*]`,
+        target: "4",
-  er: `erDiagram
+        sourceHandle: "right",
-    CUSTOMER ||--o{ ORDER : places
+        label: "Yes",
-    ORDER ||--|{ LINE-ITEM : contains
+      },
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`,
+      { id: "e3-2", source: "3", target: "2", targetHandle: "left" },
-  gantt: `gantt
+      {
-    title A Gantt Diagram
+        id: "e4-5",
-    dateFormat  YYYY-MM-DD
+        source: "4",
-    section Section
+        target: "5",
-    A task           :a1, 2014-01-01, 30d
+        sourceHandle: "bottom",
-    Another task     :after a1  , 20d
+        targetHandle: "right",
-    section Another
+      },
-    Task in sec      :2014-01-12  , 12d
+    ],
-    another task      : 24d`,
+  },
-  pie: `pie title Pets adopted by volunteers
+  database: {
-    "Dogs" : 386
+    nodes: [
-    "Cats" : 85
+      {
-    "Rats" : 15`,
+        id: "users",
-  git: `gitGraph
+        type: "database",
-    commit
+        position: { x: 100, y: 100 },
-    commit
+        data: { label: "Users Table" },
-    branch develop
+      },
-    checkout develop
+      {
-    commit
+        id: "orders",
-    commit
+        type: "database",
-    checkout main
+        position: { x: 400, y: 100 },
-    merge develop
+        data: { label: "Orders Table" },
-    commit
+      },
-    commit`,
+      {
+        id: "process",
+        type: "process",
+        position: { x: 250, y: 250 },
+        data: { label: "Order Processor" },
+      },
+    ],
+    edges: [
+      { id: "eu-p", source: "users", target: "process", label: "Read" },
+      { id: "ep-o", source: "process", target: "orders", label: "Write" },
+    ],
+  },
 };
 
 const DiagramEditor = () => {
-  const [code, setCode] = useState(DIAGRAM_TEMPLATES.flowchart);
+  const [graphData, setGraphData] = useState(DIAGRAM_TEMPLATES.flowchart);
-  const debouncedCode = useDebounce(code, 500); // 500ms debounce
+  const [code, setCode] = useState(
+    JSON.stringify(DIAGRAM_TEMPLATES.flowchart, null, 2),
+  );
 
   const [activeTab, setActiveTab] = useState("create");
   const [viewMode, setViewMode] = useState(() =>
@@ -132,66 +127,34 @@ const DiagramEditor = () => {
   const [fetching, setFetching] = useState(false);
   const [selectedTemplate, setSelectedTemplate] = useState("flowchart");
 
-  const [svgContent, setSvgContent] = useState("");
+  const reactFlowWrapper = useRef(null);
-  const svgContainerRef = useRef(null);
   const fileInputRef = useRef(null);
 
-  // Initialize Mermaid
+  // Sync JSON text input to Graph data
   useEffect(() => {
-    mermaid.initialize({
+    try {
-      startOnLoad: false,
+      const parsed = JSON.parse(code);
-      theme: "default", // We can sync this with dark mode later
+      if (parsed.nodes && parsed.edges) {
-      securityLevel: "loose",
+        setGraphData(parsed);
-      fontFamily:
+        setError(null);
-        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    });
-  }, []);
-
-  // Render diagram when debounced code changes
-  useEffect(() => {
-    const renderDiagram = async () => {
-      try {
-        setError(null); // Clear previous errors
-        if (!debouncedCode.trim()) {
-          setSvgContent("");
-          return;
-        }
-
-        // Validate syntax first
-        const isValid = await mermaid.parse(debouncedCode, {
-          suppressErrors: true,
-        });
-
-        if (isValid) {
-          const id = `mermaid-${Date.now()}`;
-          const { svg } = await mermaid.render(id, debouncedCode);
-          setSvgContent(svg);
-        } else {
-          // If parse returns false but doesn't throw, it's still invalid
-          setError("Syntax error in diagram code");
-        }
-      } catch (err) {
-        console.error("Mermaid parsing error:", err);
-        // Extract the most readable part of the error
-        let errorMessage = "Syntax error";
-        if (err.message) {
-          errorMessage = err.message.split("\n")[0] || "Syntax error";
-        } else if (typeof err === "string") {
-          errorMessage = err.split("\n")[0];
-        }
-        setError(errorMessage);
       }
-    };
+    } catch (err) {
+      setError(err.message);
+    }
+  }, [code]);
 
-    renderDiagram();
+  const handleGraphChange = (newGraphData) => {
-  }, [debouncedCode]);
+    setGraphData(newGraphData);
+    setCode(JSON.stringify(newGraphData, null, 2));
+  };
 
   // Input Handlers
   const handleTemplateChange = (e) => {
     const template = e.target.value;
     setSelectedTemplate(template);
     if (DIAGRAM_TEMPLATES[template]) {
-      setCode(DIAGRAM_TEMPLATES[template]);
+      setGraphData(DIAGRAM_TEMPLATES[template]);
+      setCode(JSON.stringify(DIAGRAM_TEMPLATES[template], null, 2));
     }
   };
 
@@ -234,7 +197,7 @@ const DiagramEditor = () => {
     }
   };
 
-  // Export Handlers
+  // Export Handlers (Updated for ReactFlow)
   const downloadFile = (content, filename, mimeType) => {
     const blob = new Blob([content], { type: mimeType });
     const url = URL.createObjectURL(blob);
@@ -247,41 +210,33 @@ const DiagramEditor = () => {
     URL.revokeObjectURL(url);
   };
 
-  const exportSVG = () => {
+  const exportJSON = () => {
-    if (!svgContent) return;
+    downloadFile(code, "diagram.json", "application/json");
-    downloadFile(svgContent, "diagram.svg", "image/svg+xml");
   };
 
   const exportPNG = () => {
-    if (!svgContent) return;
+    const flowElement = document.querySelector(".react-flow");
-    const canvas = document.createElement("canvas");
+    if (!flowElement) return;
-    const ctx = canvas.getContext("2d");
-    const img = new Image();
 
-    // Create blob URL from SVG
+    toPng(flowElement, {
-    const svg = new Blob([svgContent], { type: "image/svg+xml;charset=utf-8" });
+      backgroundColor: "#ffffff",
-    const DOMURL = window.URL || window.webkitURL || window;
+      width: flowElement.offsetWidth,
-    const url = DOMURL.createObjectURL(svg);
+      height: flowElement.offsetHeight,
-
+      style: {
-    img.onload = () => {
+        width: "100%",
-      canvas.width = img.width * 2; // High DPI
+        height: "100%",
-      canvas.height = img.height * 2;
+        transform: "translate(0, 0)",
-      ctx.fillStyle = "white"; // Background
+      },
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    })
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      .then((dataUrl) => {
-
+        const a = document.createElement("a");
-      const pngUrl = canvas.toDataURL("image/png");
+        a.setAttribute("download", "diagram.png");
-      const a = document.createElement("a");
+        a.setAttribute("href", dataUrl);
-      a.download = "diagram.png";
+        a.click();
-      a.href = pngUrl;
+      })
-      a.click();
+      .catch((error) => {
-      DOMURL.revokeObjectURL(url);
+        setError("Failed to export PNG: " + error.message);
-    };
+      });
-    img.src = url;
-  };
-
-  const exportCode = () => {
-    downloadFile(code, "diagram.mmd", "text/plain");
   };
 
   return (
@@ -298,38 +253,59 @@ const DiagramEditor = () => {
         description="Create diagrams as code using Mermaid.js with live preview and multi-format export."
         icon={GitGraph}
       >
-        {/* Input Tabs */}
+        {/* Input Section - Always visible */}
         <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Get Started
+            </h3>
+          </div>
+
+          {/* Tab Navigation */}
           <div className="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
             <button
               onClick={() => setActiveTab("create")}
-              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
+              className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
                 activeTab === "create"
                   ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
                   : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
               }`}
             >
-              <Edit3 className="h-4 w-4" /> Templates
+              <Plus className="h-4 w-4 flex-shrink-0" />
+              Create New
             </button>
             <button
               onClick={() => setActiveTab("url")}
-              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
+              className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
                 activeTab === "url"
                   ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
                   : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
               }`}
             >
-              <Globe className="h-4 w-4" /> URL Fetch
+              <Globe className="h-4 w-4 flex-shrink-0" />
+              URL Fetch
+            </button>
+            <button
+              onClick={() => setActiveTab("paste")}
+              className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
+                activeTab === "paste"
+                  ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
+                  : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
+              }`}
+            >
+              <FileText className="h-4 w-4 flex-shrink-0" />
+              Paste
             </button>
             <button
               onClick={() => setActiveTab("open")}
-              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
+              className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
                 activeTab === "open"
                   ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500"
                   : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
               }`}
             >
-              <Upload className="h-4 w-4" /> Open File
+              <Upload className="h-4 w-4 flex-shrink-0" />
+              Open File
             </button>
           </div>
 
@@ -346,17 +322,14 @@ const DiagramEditor = () => {
                     className="tool-input w-full max-w-xs"
                   >
                     <option value="flowchart">Flowchart</option>
-                    <option value="sequence">Sequence Diagram</option>
+                    <option value="database">Database/ER</option>
-                    <option value="class">Class Diagram</option>
-                    <option value="state">State Diagram</option>
-                    <option value="er">Entity Relationship (ER)</option>
-                    <option value="gantt">Gantt Chart</option>
-                    <option value="pie">Pie Chart</option>
-                    <option value="git">Git Graph</option>
                   </select>
                 </div>
                 <button
-                  onClick={() => setCode("")}
+                  onClick={() => {
+                    setGraphData({ nodes: [], edges: [] });
+                    setCode(JSON.stringify({ nodes: [], edges: [] }, null, 2));
+                  }}
                   className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                 >
                   Clear Editor
@@ -388,6 +361,19 @@ const DiagramEditor = () => {
               </div>
             )}
 
+            {activeTab === "paste" && (
+              <div className="space-y-3">
+                <div className="flex gap-2">
+                  <textarea
+                    value={code}
+                    onChange={(e) => setCode(e.target.value)}
+                    placeholder="Paste your diagram JSON here..."
+                    className="tool-input h-32 flex-1"
+                  />
+                </div>
+              </div>
+            )}
+
             {activeTab === "open" && (
               <div className="space-y-3">
                 <input
@@ -404,13 +390,13 @@ const DiagramEditor = () => {
 
         {/* Main Editor Section */}
         <div
-          className={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden min-w-0 w-full max-w-full ${isFullscreen ? "fixed inset-0 z-50 flex flex-col !mt-0" : "mb-6"}`}
+          className={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden min-w-0 w-full max-w-full ${isFullscreen ? "fixed inset-0 z-[9999] flex flex-col !mt-0" : "mb-6"}`}
         >
           {/* Header & Controls */}
           <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800 z-10 flex flex-wrap justify-between items-center gap-3">
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
               <GitGraph className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-              Workspace
+              Diagram Editor
             </h3>
 
             <div className="flex items-center gap-2">
@@ -453,18 +439,19 @@ const DiagramEditor = () => {
 
           {/* Split View Content */}
           <div
-            className={`${viewMode === "split" ? "grid grid-cols-1 lg:grid-cols-2" : ""} overflow-hidden min-w-0 w-full flex-1`}
+            className={`${viewMode === "split" ? "grid grid-cols-1 lg:grid-cols-2" : ""} overflow-hidden min-w-0 w-full flex-1 relative`}
           >
+            {isFullscreen && <FullscreenAdBanner />}
             {/* Editor Pane */}
             {(viewMode === "editor" || viewMode === "split") && (
               <div
-                className={`${viewMode === "split" ? "border-r border-gray-200 dark:border-gray-700" : ""} h-[600px] w-full min-w-0 flex flex-col relative`}
+                className={`${viewMode === "split" ? "border-r border-gray-200 dark:border-gray-700" : ""} ${isFullscreen ? "h-[calc(100vh-60px)] pb-[90px]" : "h-[600px]"} w-full min-w-0 flex flex-col relative`}
               >
                 <CodeMirrorEditor
                   value={code}
                   onChange={setCode}
-                  language="markdown" // Mermaid syntax is closest to markdown structurally
+                  language="json"
-                  placeholder="Write your mermaid code here..."
+                  placeholder="Write your diagram JSON here..."
                   showToggle={false}
                   maxLines={999}
                   height="100%"
@@ -475,8 +462,10 @@ const DiagramEditor = () => {
 
             {/* Preview Pane */}
             {(viewMode === "preview" || viewMode === "split") && (
-              <div className="h-[600px] w-full min-w-0 bg-slate-50 dark:bg-slate-900 flex flex-col relative">
+              <div
-                {error ? (
+                className={`${isFullscreen ? "h-[calc(100vh-60px)] pb-[90px]" : "h-[600px]"} w-full min-w-0 bg-slate-50 dark:bg-slate-900 flex flex-col relative`}
+              >
+                {error && (
                   <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center z-10 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
                     <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-full mb-3">
                       <AlertTriangle className="h-8 w-8 text-red-500" />
@@ -488,60 +477,17 @@ const DiagramEditor = () => {
                       {error}
                     </p>
                   </div>
-                ) : !svgContent ? (
+                )}
-                  <div className="absolute inset-0 flex items-center justify-center text-gray-400">
-                    <p>Start typing to render diagram...</p>
-                  </div>
-                ) : null}
 
                 <div
                   className="flex-1 relative overflow-hidden"
-                  ref={svgContainerRef}
+                  ref={reactFlowWrapper}
                 >
-                  <TransformWrapper
+                  <ReactFlowEditor
-                    initialScale={1}
+                    initialNodes={graphData.nodes}
-                    minScale={0.1}
+                    initialEdges={graphData.edges}
-                    maxScale={10}
+                    onGraphChange={handleGraphChange}
-                    centerOnInit={true}
+                  />
-                    wheel={{ step: 0.1 }}
-                  >
-                    {({ zoomIn, zoomOut, resetTransform }) => (
-                      <>
-                        <div className="absolute top-4 right-4 z-10 flex flex-col gap-2 bg-white dark:bg-gray-800 p-1.5 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-                          <button
-                            onClick={() => zoomIn()}
-                            className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-                            title="Zoom In"
-                          >
-                            <ZoomIn className="h-4 w-4" />
-                          </button>
-                          <button
-                            onClick={() => zoomOut()}
-                            className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-                            title="Zoom Out"
-                          >
-                            <ZoomOut className="h-4 w-4" />
-                          </button>
-                          <div className="h-px bg-gray-200 dark:bg-gray-700 w-full" />
-                          <button
-                            onClick={() => resetTransform()}
-                            className="p-1.5 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-                            title="Fit to Screen"
-                          >
-                            <Maximize className="h-4 w-4" />
-                          </button>
-                        </div>
-                        <TransformComponent
-                          wrapperStyle={{ width: "100%", height: "100%" }}
-                        >
-                          <div
-                            className="w-full h-full flex items-center justify-center p-8"
-                            dangerouslySetInnerHTML={{ __html: svgContent }}
-                          />
-                        </TransformComponent>
-                      </>
-                    )}
-                  </TransformWrapper>
                 </div>
               </div>
             )}
@@ -557,7 +503,7 @@ const DiagramEditor = () => {
                 Export Diagram
               </h3>
             </div>
-            <div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="p-4 sm:p-6 grid grid-cols-1 sm:grid-cols-2 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"
@@ -572,25 +518,14 @@ const DiagramEditor = () => {
               </button>
 
               <button
-                onClick={exportSVG}
+                onClick={exportJSON}
-                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"
-              >
-                <FileImage 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">
-                  SVG Vector
-                </span>
-                <span className="text-xs text-gray-500">Scalable format</span>
-              </button>
-
-              <button
-                onClick={exportCode}
                 className="flex flex-col items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all group"
               >
                 <FileCode2 className="h-6 w-6 text-gray-500 group-hover:text-purple-500 mb-2" />
                 <span className="font-medium text-gray-900 dark:text-white">
-                  Raw Code
+                  JSON Schema
                 </span>
-                <span className="text-xs text-gray-500">.mmd file format</span>
+                <span className="text-xs text-gray-500">.json data format</span>
               </button>
             </div>
           </div>