587 lines
22 KiB
JavaScript
Executable File
587 lines
22 KiB
JavaScript
Executable File
import React, { useState, useRef, useEffect } from "react";
|
|
import {
|
|
GitGraph,
|
|
Plus,
|
|
Upload,
|
|
Download,
|
|
Globe,
|
|
Type,
|
|
Columns,
|
|
Maximize2,
|
|
Minimize2,
|
|
FileImage,
|
|
FileCode2,
|
|
Eye,
|
|
AlertTriangle,
|
|
FileText,
|
|
Copy,
|
|
} from "lucide-react";
|
|
import ToolLayout from "../components/ToolLayout";
|
|
import CodeMirrorEditor from "../components/CodeMirrorEditor";
|
|
import SEO from "../components/SEO";
|
|
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: {
|
|
nodes: [
|
|
{
|
|
id: "1",
|
|
type: "process",
|
|
position: { x: 250, y: 50 },
|
|
data: { label: "Start" },
|
|
},
|
|
{
|
|
id: "2",
|
|
type: "decision",
|
|
position: { x: 250, y: 150 },
|
|
data: { label: "Is it OK?" },
|
|
},
|
|
{
|
|
id: "3",
|
|
type: "process",
|
|
position: { x: 100, y: 250 },
|
|
data: { label: "Fix it" },
|
|
},
|
|
{
|
|
id: "4",
|
|
type: "database",
|
|
position: { x: 400, y: 250 },
|
|
data: { label: "Save to DB" },
|
|
},
|
|
{
|
|
id: "5",
|
|
type: "process",
|
|
position: { x: 250, y: 350 },
|
|
data: { label: "End" },
|
|
},
|
|
],
|
|
edges: [
|
|
{ id: "e1-2", source: "1", target: "2" },
|
|
{
|
|
id: "e2-3",
|
|
source: "2",
|
|
target: "3",
|
|
sourceHandle: "left",
|
|
label: "No",
|
|
},
|
|
{
|
|
id: "e2-4",
|
|
source: "2",
|
|
target: "4",
|
|
sourceHandle: "right",
|
|
label: "Yes",
|
|
},
|
|
{ id: "e3-2", source: "3", target: "2", targetHandle: "left" },
|
|
{
|
|
id: "e2-5",
|
|
source: "2",
|
|
target: "5",
|
|
sourceHandle: "bottom",
|
|
targetHandle: "top",
|
|
},
|
|
],
|
|
},
|
|
database: {
|
|
nodes: [
|
|
{
|
|
id: "users",
|
|
type: "database",
|
|
position: { x: 100, y: 100 },
|
|
data: { label: "Users Table" },
|
|
},
|
|
{
|
|
id: "orders",
|
|
type: "database",
|
|
position: { x: 400, y: 100 },
|
|
data: { label: "Orders Table" },
|
|
},
|
|
{
|
|
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 [graphData, setGraphData] = useState(DIAGRAM_TEMPLATES.flowchart);
|
|
const [code, setCode] = useState(
|
|
JSON.stringify(DIAGRAM_TEMPLATES.flowchart, null, 2),
|
|
);
|
|
|
|
const [activeTab, setActiveTab] = useState("create");
|
|
const [viewMode, setViewMode] = useState(() =>
|
|
window.innerWidth < 1024 ? "editor" : "split",
|
|
);
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
const [fetchUrl, setFetchUrl] = useState("");
|
|
const [fetching, setFetching] = useState(false);
|
|
const [selectedTemplate, setSelectedTemplate] = useState("flowchart");
|
|
|
|
const reactFlowWrapper = useRef(null);
|
|
const fileInputRef = useRef(null);
|
|
|
|
// Sync JSON text input to Graph data
|
|
useEffect(() => {
|
|
try {
|
|
const parsed = JSON.parse(code);
|
|
if (parsed.nodes && parsed.edges) {
|
|
setGraphData(parsed);
|
|
setError(null);
|
|
}
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
}, [code]);
|
|
|
|
const handleGraphChange = (newGraphData) => {
|
|
setGraphData(newGraphData);
|
|
setCode(JSON.stringify(newGraphData, null, 2));
|
|
};
|
|
|
|
// Input Handlers
|
|
const handleTemplateChange = (e) => {
|
|
const template = e.target.value;
|
|
setSelectedTemplate(template);
|
|
if (DIAGRAM_TEMPLATES[template]) {
|
|
setGraphData(DIAGRAM_TEMPLATES[template]);
|
|
setCode(JSON.stringify(DIAGRAM_TEMPLATES[template], null, 2));
|
|
}
|
|
};
|
|
|
|
const handleFileUpload = (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
setCode(e.target.result);
|
|
setActiveTab("create");
|
|
};
|
|
reader.onerror = () => setError("Failed to read file");
|
|
reader.readAsText(file);
|
|
e.target.value = ""; // Reset input
|
|
};
|
|
|
|
const handleFetchFromURL = async () => {
|
|
if (!fetchUrl.trim()) return;
|
|
setFetching(true);
|
|
try {
|
|
let url = fetchUrl.trim();
|
|
if (
|
|
url.includes("github.com") &&
|
|
!url.includes("raw.githubusercontent.com")
|
|
) {
|
|
url = url
|
|
.replace("github.com", "raw.githubusercontent.com")
|
|
.replace("/blob/", "/");
|
|
}
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
const text = await response.text();
|
|
setCode(text);
|
|
setActiveTab("create");
|
|
} catch (err) {
|
|
setError(`Fetch failed: ${err.message}`);
|
|
} finally {
|
|
setFetching(false);
|
|
}
|
|
};
|
|
|
|
// Export Handlers (Updated for ReactFlow)
|
|
const downloadFile = (content, filename, mimeType) => {
|
|
const blob = new Blob([content], { type: mimeType });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const exportJSON = () => {
|
|
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;
|
|
|
|
toPng(flowElement, {
|
|
backgroundColor: "#ffffff",
|
|
width: flowElement.offsetWidth,
|
|
height: flowElement.offsetHeight,
|
|
style: {
|
|
width: "100%",
|
|
height: "100%",
|
|
transform: "translate(0, 0)",
|
|
},
|
|
})
|
|
.then((dataUrl) => {
|
|
const a = document.createElement("a");
|
|
a.setAttribute("download", "diagram.png");
|
|
a.setAttribute("href", dataUrl);
|
|
a.click();
|
|
})
|
|
.catch((error) => {
|
|
setError("Failed to export PNG: " + error.message);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title="Mermaid Diagram Editor & Viewer"
|
|
description="Write Mermaid.js diagram code with live visual preview. Pan, zoom, and export your flowcharts, sequence diagrams, and architecture maps to PNG or SVG."
|
|
keywords="mermaid editor, diagram editor, diagram as code, mermaidjs, flowchart generator, sequence diagram, architecture diagram, export svg"
|
|
path="/diagram-editor"
|
|
toolId="diagram-editor"
|
|
/>
|
|
<ToolLayout
|
|
title="Diagram Tool"
|
|
description="Create diagrams as code using Mermaid.js with live preview and multi-format export."
|
|
icon={GitGraph}
|
|
>
|
|
{/* 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-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"
|
|
}`}
|
|
>
|
|
<Plus className="h-4 w-4 flex-shrink-0" />
|
|
Create New
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("url")}
|
|
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 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-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 flex-shrink-0" />
|
|
Open File
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
{activeTab === "create" && (
|
|
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Load Boilerplate Template
|
|
</label>
|
|
<select
|
|
value={selectedTemplate}
|
|
onChange={handleTemplateChange}
|
|
className="tool-input w-full max-w-xs"
|
|
>
|
|
<option value="flowchart">Flowchart</option>
|
|
<option value="database">Database/ER</option>
|
|
</select>
|
|
</div>
|
|
<button
|
|
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
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "url" && (
|
|
<div className="space-y-3">
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="url"
|
|
value={fetchUrl}
|
|
onChange={(e) => setFetchUrl(e.target.value)}
|
|
onKeyPress={(e) =>
|
|
e.key === "Enter" && !fetching && handleFetchFromURL()
|
|
}
|
|
placeholder="https://raw.githubusercontent.com/.../diagram.mmd"
|
|
className="tool-input flex-1"
|
|
/>
|
|
<button
|
|
onClick={handleFetchFromURL}
|
|
disabled={fetching || !fetchUrl.trim()}
|
|
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-medium px-4 py-2 rounded-md transition-colors whitespace-nowrap"
|
|
>
|
|
{fetching ? "Fetching..." : "Fetch"}
|
|
</button>
|
|
</div>
|
|
</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
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".mmd,.mermaid,.txt"
|
|
onChange={handleFileUpload}
|
|
className="tool-input"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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-[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" />
|
|
Diagram Editor
|
|
</h3>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800 shadow-sm">
|
|
<button
|
|
onClick={() => setViewMode("editor")}
|
|
className={`flex items-center gap-2 px-3 py-1.5 text-sm font-medium transition-colors ${viewMode === "editor" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300" : "text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"}`}
|
|
>
|
|
<Type className="h-4 w-4" />{" "}
|
|
<span className="hidden sm:inline">Code</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode("split")}
|
|
className={`hidden lg:flex items-center gap-2 px-3 py-1.5 text-sm font-medium transition-colors border-l border-gray-200 dark:border-gray-700 ${viewMode === "split" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300" : "text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"}`}
|
|
>
|
|
<Columns className="h-4 w-4" />{" "}
|
|
<span className="hidden sm:inline">Split</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode("preview")}
|
|
className={`flex items-center gap-2 px-3 py-1.5 text-sm font-medium transition-colors border-l border-gray-200 dark:border-gray-700 ${viewMode === "preview" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300" : "text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"}`}
|
|
>
|
|
<Eye className="h-4 w-4" />{" "}
|
|
<span className="hidden sm:inline">Preview</span>
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsFullscreen(!isFullscreen)}
|
|
className="p-2 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|
title={isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
|
|
>
|
|
{isFullscreen ? (
|
|
<Minimize2 className="h-4 w-4" />
|
|
) : (
|
|
<Maximize2 className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Split View Content */}
|
|
<div
|
|
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" : ""} ${isFullscreen ? "h-[calc(100vh-60px)] pb-[90px]" : "h-[600px]"} w-full min-w-0 flex flex-col relative`}
|
|
>
|
|
<CodeMirrorEditor
|
|
value={code}
|
|
onChange={setCode}
|
|
language="json"
|
|
placeholder="Write your diagram JSON here..."
|
|
showToggle={false}
|
|
maxLines={999}
|
|
height="100%"
|
|
className="flex-1 h-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Preview Pane */}
|
|
{(viewMode === "preview" || viewMode === "split") && (
|
|
<div
|
|
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" />
|
|
</div>
|
|
<h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
|
Syntax Error
|
|
</h4>
|
|
<p className="text-sm text-red-600 dark:text-red-400 max-w-md">
|
|
{error}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className="flex-1 relative overflow-hidden"
|
|
ref={reactFlowWrapper}
|
|
>
|
|
<ReactFlowEditor
|
|
initialNodes={graphData.nodes}
|
|
initialEdges={graphData.edges}
|
|
onGraphChange={handleGraphChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Export Section */}
|
|
{code.trim() && (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden mt-6">
|
|
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<Download className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
|
Export Diagram
|
|
</h3>
|
|
</div>
|
|
<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"
|
|
>
|
|
<FileImage className="h-6 w-6 text-gray-500 group-hover:text-blue-500 mb-2" />
|
|
<span className="font-medium text-gray-900 dark:text-white">
|
|
PNG Image
|
|
</span>
|
|
<span className="text-xs text-gray-500">
|
|
High-res rendering
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={exportJSON}
|
|
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">
|
|
JSON Schema
|
|
</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>
|
|
)}
|
|
|
|
<RelatedTools toolId="diagram-editor" />
|
|
</ToolLayout>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DiagramEditor;
|