cytoscape

app/graph/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import CytoscapeComponent from "react-cytoscapejs";
+
+export default function Graph() {
+  const elements = [
+    { data: { id: "one", label: "Node 1" }, position: { x: 100, y: 100 } },
+    { data: { id: "two", label: "Node 2" }, position: { x: 200, y: 200 } },
+    {
+      data: { source: "one", target: "two", label: "Edge from Node1 to Node2" },
+    },
+  ];
+  return (
+    <CytoscapeComponent
+      elements={elements}
+      style={{ width: "600px", height: "600px" }}
+    />
+  );
+}

package.json

@@ -13,8 +13,10 @@
     "@heroicons/react": "^2.1.1",
     "@radix-ui/react-slider": "^1.1.2",
     "clsx": "^2.1.0",
+    "cytoscape": "^3.30.2",
     "next": "^14.1.1",
     "react": "^18",
+    "react-cytoscapejs": "^2.0.0",
     "react-dom": "^18",
     "zod": "^3.22.4"
   },
@@ -23,6 +25,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^22",
     "@types/react": "^18",
+    "@types/react-cytoscapejs": "^1.2.5",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",