diff --git a/package-lock.json b/package-lock.json
index 30bd13ea..f3a4d42c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@vercel/speed-insights": "^1.2.0",
         "axios": "^1.12.0",
         "classnames": "^2.5.1",
+        "dagre": "^0.8.5",
         "dexie": "^3.2.4",
         "dexie-react-hooks": "^1.1.7",
         "file-saver": "^2.0.5",
@@ -3152,6 +3153,16 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -4456,6 +4467,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
diff --git a/package.json b/package.json
index bddd6175..c2b8aee6 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@vercel/speed-insights": "^1.2.0",
     "axios": "^1.12.0",
     "classnames": "^2.5.1",
+    "dagre": "^0.8.5",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
     "file-saver": "^2.0.5",
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index cc1968d7..cfc0550f 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -119,6 +119,7 @@ export default function ControlPanel({
     addRelationship,
     deleteRelationship,
     updateRelationship,
+    autoArrangeTables,
     database,
     setDatabase,
   } = useDiagram();
@@ -253,6 +254,10 @@ export default function ControlPanel({
           });
         } else if (a.component === "self") {
           updateTable(a.tid, a.undo);
+        } else if (a.component === "auto_arrange") {
+          a.data.oldTables.forEach((oldTable) => {
+            updateTable(oldTable.id, { x: oldTable.x, y: oldTable.y });
+          });
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
         updateRelationship(a.rid, a.undo);
@@ -431,6 +436,10 @@ export default function ControlPanel({
           });
         } else if (a.component === "self") {
           updateTable(a.tid, a.redo, false);
+        } else if (a.component === "auto_arrange") {
+          a.data.newTables.forEach((newTable) => {
+            updateTable(newTable.id, { x: newTable.x, y: newTable.y });
+          });
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
         updateRelationship(a.rid, a.redo);
@@ -1820,6 +1829,14 @@ export default function ControlPanel({
               <i className="fa-solid fa-circle-half-stroke" />
             </button>
           </Tooltip>
+          <Tooltip content={t("Auto_arrange")} position="bottom">
+            <button
+              className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
+              onClick={autoArrangeTables}
+            >
+              <i className="fa-solid fa-table-cells" />
+            </button>
+          </Tooltip>
         </div>
         <button
           onClick={() => invertLayout("header")}
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index bdb144b5..874295d7 100644
--- a/src/context/DiagramContext.jsx
+++ b/src/context/DiagramContext.jsx
@@ -1,9 +1,19 @@
 import { createContext, useState } from "react";
-import { Action, DB, ObjectType, defaultBlue } from "../data/constants";
+import {
+  Action,
+  DB,
+  ObjectType,
+  defaultBlue,
+  tableWidth,
+  tableFieldHeight,
+  tableHeaderHeight,
+  tableColorStripHeight,
+} from "../data/constants";
 import { useTransform, useUndoRedo, useSelect } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 import { nanoid } from "nanoid";
+import dagre from "dagre";
 
 export const DiagramContext = createContext(null);
 
@@ -228,6 +238,72 @@ export default function DiagramContextProvider({ children }) {
     );
   };
 
+  const autoArrangeTables = () => {
+    if (tables.length === 0) return;
+
+    const newGraph = new dagre.graphlib.Graph();
+
+    newGraph.setGraph({
+      rankdir: "TB",
+      nodesep: 100,
+      ranksep: 120,
+      marginx: 50,
+      marginy: 50,
+    });
+
+    newGraph.setDefaultEdgeLabel(() => ({}));
+
+    tables.forEach((table) => {
+      const height =
+        table.fields.length * tableFieldHeight +
+        tableHeaderHeight +
+        tableColorStripHeight;
+      newGraph.setNode(table.id, {
+        label: table.name,
+        width: tableWidth,
+        height: height,
+      });
+    });
+
+    relationships.forEach((rel) => {
+      newGraph.setEdge(rel.startTableId, rel.endTableId);
+    });
+
+    dagre.layout(newGraph);
+
+    const arrangedTables = tables.map((table) => {
+      const node = newGraph.node(table.id);
+      return {
+        ...table,
+        x: Math.round(node.x - tableWidth / 2),
+        y: Math.round(node.y - node.height / 2),
+      };
+    });
+
+    setTables(arrangedTables);
+
+    setUndoStack((prev) => [
+      ...prev,
+      {
+        action: Action.EDIT,
+        element: ObjectType.TABLE,
+        component: "auto_arrange",
+        data: {
+          oldTables: tables.map((t) => ({ id: t.id, x: t.x, y: t.y })),
+          newTables: arrangedTables.map((t) => ({
+            id: t.id,
+            x: t.x,
+            y: t.y,
+          })),
+        },
+        message: t("auto_arrange_tables") || "Auto-arrange tables",
+      },
+    ]);
+    setRedoStack([]);
+
+    Toast.success(t("tables_arranged") || "Tables arranged successfully!");
+  };
+
   return (
     <DiagramContext.Provider
       value={{
@@ -243,6 +319,7 @@ export default function DiagramContextProvider({ children }) {
         addRelationship,
         deleteRelationship,
         updateRelationship,
+        autoArrangeTables,
         database,
         setDatabase,
         tablesCount: tables.length,