diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index cde160eb..92240cd0 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1491,8 +1491,8 @@ checksum = "a4ae5f15dda3c708c0ade84bfee31ccab44a3da4f88015ed22f63732abe300c8"
 
 [[package]]
 name = "data-studio-agent"
-version = "0.1.3"
-source = "git+https://github.com/geek-fun/data-studio-agent.git?tag=v0.1.3#596b43292a4768f987f1c44628c006a7a71145a9"
+version = "0.1.4"
+source = "git+https://github.com/geek-fun/data-studio-agent.git?tag=v0.1.4#a126632c55362ca99d2bbd44d0ff88524e0a5856"
 dependencies = [
  "async-openai",
  "async-trait",
@@ -1718,7 +1718,7 @@ dependencies = [
  "libc",
  "option-ext",
  "redox_users",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2010,7 +2010,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2978,7 +2978,7 @@ dependencies = [
  "libc",
  "percent-encoding",
  "pin-project-lite",
- "socket2 0.6.4",
+ "socket2 0.5.10",
  "system-configuration",
  "tokio",
  "tower-service",
@@ -2998,7 +2998,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core 0.62.2",
+ "windows-core 0.61.2",
 ]
 
 [[package]]
@@ -5018,7 +5018,7 @@ dependencies = [
  "quinn-udp",
  "rustc-hash 2.1.2",
  "rustls 0.23.40",
- "socket2 0.6.4",
+ "socket2 0.5.10",
  "thiserror 2.0.18",
  "tokio",
  "tracing",
@@ -5055,9 +5055,9 @@ dependencies = [
  "cfg_aliases",
  "libc",
  "once_cell",
- "socket2 0.6.4",
+ "socket2 0.5.10",
  "tracing",
- "windows-sys 0.60.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -5679,7 +5679,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -5780,7 +5780,7 @@ dependencies = [
  "security-framework 3.7.0",
  "security-framework-sys",
  "webpki-root-certs",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -7183,7 +7183,7 @@ dependencies = [
  "getrandom 0.4.3",
  "once_cell",
  "rustix",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -8272,7 +8272,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 3494b4a9..e9566c51 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -88,7 +88,7 @@ http = "1"
 log = "0.4"
 futures = "0.3"
 rand = "0.8"
-data-studio-agent = { git = "https://github.com/geek-fun/data-studio-agent.git", tag = "v0.1.3" }
+data-studio-agent = { git = "https://github.com/geek-fun/data-studio-agent.git", tag = "v0.1.4" }
 
 # Archive extraction (JRE downloads)
 flate2 = "1.0"
diff --git a/src/__tests__/graph-layout.test.ts b/src/__tests__/graph-layout.test.ts
new file mode 100644
index 00000000..4bdb10e4
--- /dev/null
+++ b/src/__tests__/graph-layout.test.ts
@@ -0,0 +1,99 @@
+import type { DagreRel, DagreTable } from '@/components/er-diagram/graph-layout'
+/**
+ * @jest-environment node
+ */
+import {
+  computeCanvasSize,
+  computeDagreLayout,
+  fitToScreen,
+} from '@/components/er-diagram/graph-layout'
+
+describe('computeDagreLayout', () => {
+  it('returns positions for A→B with finite coordinates, B below A', () => {
+    const tables: DagreTable[] = [
+      { name: 'A', width: 220, height: 100 },
+      { name: 'B', width: 220, height: 100 },
+    ]
+    const rels: DagreRel[] = [
+      { sourceTable: 'A', targetTable: 'B' },
+    ]
+
+    const positions = computeDagreLayout(tables, rels)
+    const keys = Object.keys(positions)
+
+    expect(keys).toContain('A')
+    expect(keys).toContain('B')
+    expect(Number.isFinite(positions.A.x)).toBe(true)
+    expect(Number.isFinite(positions.A.y)).toBe(true)
+    expect(Number.isFinite(positions.B.x)).toBe(true)
+    expect(Number.isFinite(positions.B.y)).toBe(true)
+    expect(positions.B.y).toBeGreaterThan(positions.A.y)
+  })
+})
+
+describe('computeCanvasSize', () => {
+  it('computes size from table positions with padding', () => {
+    const positions: Record<string, { x: number, y: number }> = {
+      A: { x: 110, y: 80 },
+      B: { x: 410, y: 160 },
+    }
+    const getHeight = (name: string) => name === 'A' ? 100 : 100
+    const result = computeCanvasSize(positions, 220, getHeight, 80)
+
+    // A right edge = 110 + 110 + 80 = 300
+    // B right edge = 410 + 110 + 80 = 600
+    // B bottom edge = 160 + 50 + 80 = 290
+    // min 960 x 540
+    expect(result.width).toBe(960)
+    expect(result.height).toBe(540)
+  })
+
+  it('expands beyond minimum when tables are large', () => {
+    const positions: Record<string, { x: number, y: number }> = {
+      Big: { x: 1000, y: 800 },
+    }
+    const getHeight = () => 200
+    const result = computeCanvasSize(positions, 220, getHeight, 50)
+
+    // right edge = 1000 + 110 + 50 = 1160
+    // bottom edge = 800 + 100 + 50 = 950
+    expect(result.width).toBe(1160)
+    expect(result.height).toBe(950)
+  })
+
+  it('defaults to 960x540 for empty positions', () => {
+    const result = computeCanvasSize({}, 220, () => 0, 80)
+    expect(result.width).toBe(960)
+    expect(result.height).toBe(540)
+  })
+})
+
+describe('fitToScreen', () => {
+  it('zooms in (zoom >= 1) when content is smaller than viewport', () => {
+    const result = fitToScreen({ width: 100, height: 100 }, 800, 600)
+    expect(result.zoom).toBe(3)
+    expect(Number.isFinite(result.scrollX)).toBe(true)
+    expect(Number.isFinite(result.scrollY)).toBe(true)
+  })
+
+  it('zooms out (zoom < 1) when content is larger than viewport', () => {
+    const result = fitToScreen({ width: 2000, height: 1500 }, 800, 600)
+    expect(result.zoom).toBeCloseTo(0.4, 5)
+    expect(Number.isFinite(result.scrollX)).toBe(true)
+    expect(Number.isFinite(result.scrollY)).toBe(true)
+  })
+
+  it('centers content in viewport', () => {
+    const result = fitToScreen({ width: 400, height: 300 }, 1000, 800)
+    expect(result.zoom).toBe(2.5)
+    expect(result.scrollX).toBe(0)
+    expect(result.scrollY).toBe(25)
+  })
+
+  it('caps zoom between 0.1 and 3', () => {
+    const r1 = fitToScreen({ width: 10, height: 10 }, 10000, 10000)
+    expect(r1.zoom).toBe(3)
+    const r2 = fitToScreen({ width: 100000, height: 100000 }, 100, 100)
+    expect(r2.zoom).toBe(0.1)
+  })
+})
diff --git a/src/__tests__/graph-routing.test.ts b/src/__tests__/graph-routing.test.ts
new file mode 100644
index 00000000..3cdc8a57
--- /dev/null
+++ b/src/__tests__/graph-routing.test.ts
@@ -0,0 +1,141 @@
+import type { TableRect } from '@/components/er-diagram/types'
+/**
+ * @jest-environment node
+ */
+import {
+  buildTableRectMap,
+  candidateRouteXs,
+  computeRelationshipPath,
+  rangesOverlap,
+  routeSideX,
+} from '@/components/er-diagram/graph-routing'
+
+const rectA: TableRect = { name: 'A', x: 0, y: 0, width: 220, height: 100 }
+const rectB: TableRect = { name: 'B', x: 300, y: 0, width: 220, height: 100 }
+const rectBlocker: TableRect = { name: 'Blocker', x: 150, y: 50, width: 220, height: 100 }
+
+describe('rangesOverlap', () => {
+  it('returns true when ranges overlap', () => {
+    expect(rangesOverlap(0, 10, 5, 15)).toBe(true)
+  })
+
+  it('returns true when one range is inside another', () => {
+    expect(rangesOverlap(0, 20, 5, 10)).toBe(true)
+  })
+
+  it('returns true when ranges touch at a point', () => {
+    expect(rangesOverlap(0, 10, 10, 20)).toBe(true)
+  })
+
+  it('returns false when ranges do not overlap', () => {
+    expect(rangesOverlap(0, 10, 20, 30)).toBe(false)
+  })
+
+  it('returns false when ranges are adjacent but not touching', () => {
+    expect(rangesOverlap(0, 10, 11, 20)).toBe(false)
+  })
+})
+
+describe('routeSideX', () => {
+  it('returns rect.x - offset when routeX is left of rect', () => {
+    expect(routeSideX(rectA, -50)).toBe(0)
+  })
+
+  it('returns rect.x when routeX is left of rect with default offset 0', () => {
+    expect(routeSideX(rectA, -50)).toBe(0)
+  })
+
+  it('returns rect.x + width + offset when routeX is right of rect', () => {
+    expect(routeSideX(rectA, 300)).toBe(220)
+  })
+
+  it('uses provided offset when routeX is left of rect', () => {
+    expect(routeSideX(rectA, -50, 5)).toBe(-5)
+  })
+
+  it('uses provided offset when routeX is right of rect', () => {
+    expect(routeSideX(rectA, 300, 10)).toBe(230)
+  })
+})
+
+describe('candidateRouteXs', () => {
+  it('returns sorted candidates by proximity to source and target', () => {
+    const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
+    expect(candidates.length).toBeGreaterThan(0)
+    // First candidate should be the best (closest to both rects)
+    expect(candidates[0]).toBeGreaterThan(rectA.x)
+    expect(candidates[0]).toBeLessThan(rectB.x + rectB.width)
+  })
+
+  it('includes the midpoint gap when rects are side by side', () => {
+    const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
+    // rectA ends at 220, rectB starts at 300, gap is 80 >= 56 (ROUTE_PADDING)
+    // So midpoint should be (220 + 300) / 2 = 260
+    expect(candidates).toContain(260)
+  })
+
+  it('includes the right edge padding candidate', () => {
+    const candidates = candidateRouteXs(rectA, rectB, [rectA, rectB])
+    // maxRight is 300 + 220 = 520, so 520 + 56 = 576
+    expect(candidates).toContain(576)
+  })
+})
+
+describe('computeRelationshipPath', () => {
+  it('returns empty string when source table is not in rectMap', () => {
+    const rectMap: Record<string, TableRect> = { B: rectB }
+    expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
+  })
+
+  it('returns empty string when target table is not in rectMap', () => {
+    const rectMap: Record<string, TableRect> = { A: rectA }
+    expect(computeRelationshipPath('A', 'B', rectMap)).toBe('')
+  })
+
+  it('returns an orthogonal SVG path for two side-by-side rects', () => {
+    const rectMap: Record<string, TableRect> = { A: rectA, B: rectB }
+    const path = computeRelationshipPath('A', 'B', rectMap)
+    expect(path).toMatch(/^M /)
+    expect(path).toContain(' L ')
+  })
+
+  it('returns an orthogonal path even with a blocker between source and target', () => {
+    const rectMap: Record<string, TableRect> = {
+      A: rectA,
+      B: rectB,
+      Blocker: rectBlocker,
+    }
+    const path = computeRelationshipPath('A', 'B', rectMap)
+    expect(path).toMatch(/^M /)
+    expect(path).toContain(' L ')
+  })
+})
+
+describe('buildTableRectMap', () => {
+  it('builds a rect map from table names and positions', () => {
+    const nodePositions: Record<string, { x: number, y: number }> = {
+      A: { x: 110, y: 50 },
+      B: { x: 410, y: 50 },
+    }
+    const getHeight = (_name: string) => 100
+    const rectMap = buildTableRectMap(['A', 'B'], nodePositions, getHeight)
+    const keys = Object.keys(rectMap)
+    expect(keys).toHaveLength(2)
+    expect(keys).toContain('A')
+    expect(keys).toContain('B')
+    const rectA = rectMap.A
+    expect(rectA.x).toBe(0) // 110 - 220/2
+    expect(rectA.y).toBe(0) // 50 - 100/2
+    expect(rectA.width).toBe(220)
+    expect(rectA.height).toBe(100)
+  })
+
+  it('skips tables not found in nodePositions', () => {
+    const nodePositions: Record<string, { x: number, y: number }> = {
+      A: { x: 110, y: 50 },
+    }
+    const getHeight = (_name: string) => 100
+    const rectMap = buildTableRectMap(['A', 'B'], nodePositions, getHeight)
+    expect(Object.keys(rectMap)).toHaveLength(1)
+  })
+})
diff --git a/src/components/database-browser/QueryTabs.vue b/src/components/database-browser/QueryTabs.vue
index 7cd85d94..54df92b8 100644
--- a/src/components/database-browser/QueryTabs.vue
+++ b/src/components/database-browser/QueryTabs.vue
@@ -105,13 +105,13 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
 </script>
 
 <template>
-  <div class="query-tabs flex items-stretch overflow-x-auto border-b border-border">
+  <div class="query-tabs border-b border-border flex items-stretch overflow-x-auto">
     <!-- Tabs -->
     <div class="flex flex-1 min-w-0 items-stretch">
       <div
         v-for="tab in tabs"
         :key="tab.id"
-        class="tab-item group flex items-center gap-1 px-3 cursor-pointer transition-colors select-none text-xs border-r border-border"
+        class="tab-item group text-xs px-3 border-r border-border flex gap-1 cursor-pointer select-none transition-colors items-center"
         :class="{
           'bg-background text-foreground font-medium': isActiveTab(tab.id),
           'bg-muted/30 text-muted-foreground hover:bg-background/50 hover:text-foreground': !isActiveTab(tab.id),
@@ -229,11 +229,11 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
 
         <!-- Close button -->
         <button
-          class="rounded flex flex-shrink-0 h-4 w-4 transition-colors items-center justify-center hover:bg-muted-foreground/20 opacity-0 group-hover:opacity-100"
+          class="rounded opacity-0 flex flex-shrink-0 h-4 w-4 transition-colors items-center justify-center hover:bg-muted-foreground/20 group-hover:opacity-100"
           :class="{ 'opacity-100': isActiveTab(tab.id) }"
           @click="handleCloseClick($event, tab)"
         >
-          <span class="i-lucide-x h-3 w-3 shrink-0" />
+          <span class="i-lucide-x shrink-0 h-3 w-3" />
         </button>
       </div>
     </div>
@@ -242,11 +242,11 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
     <Button
       variant="ghost"
       size="icon"
-      class="shrink-0 h-7 w-7 text-muted-foreground hover:text-foreground"
+      class="text-muted-foreground shrink-0 h-7 w-7 hover:text-foreground"
       :title="t('components.queryTabs.new')"
       @click="handleNewTab"
     >
-      <span class="i-lucide-plus h-3.5 w-3.5 shrink-0" />
+      <span class="i-lucide-plus shrink-0 h-3.5 w-3.5" />
     </Button>
 
     <!-- Unsaved changes dialog -->
diff --git a/src/components/er-diagram/EngineeringEntity.vue b/src/components/er-diagram/EngineeringEntity.vue
new file mode 100644
index 00000000..38d2008c
--- /dev/null
+++ b/src/components/er-diagram/EngineeringEntity.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { RenderNode } from './types'
+import type { ColumnInfo } from '@/types/connection'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  node: RenderNode
+  isSelected: boolean
+  isHighlighted: boolean
+  headerDragging: boolean
+}>()
+
+const emit = defineEmits<{
+  headerMousedown: [e: MouseEvent]
+  cardDblclick: []
+  cardClick: []
+  toggleExpand: []
+}>()
+
+const fkColumnNames = computed(() => {
+  const names = new Set<string>()
+  for (const fk of props.node.table.foreignKeys) {
+    for (const col of fk.columns)
+      names.add(col)
+    for (const col of fk.referenced_columns)
+      names.add(col)
+  }
+  return names
+})
+
+function isFKColumn(colName: string): boolean {
+  return fkColumnNames.value.has(colName)
+}
+
+function pillClass(col: ColumnInfo): string {
+  if (col.is_primary_key)
+    return 'er-entity-pill--pk'
+  if (isFKColumn(col.name))
+    return 'er-entity-pill--fk'
+  return ''
+}
+
+defineExpose({})
+</script>
+
+<template>
+  <div
+    class="er-entity"
+    :class="{ 'er-entity--selected': isSelected }"
+    @click.stop="emit('cardClick')"
+    @dblclick.stop="emit('cardDblclick')"
+  >
+    <!-- Header (draggable) -->
+    <div
+      class="er-entity-header"
+      :class="{ 'er-entity-header--dragging': headerDragging }"
+      @mousedown="emit('headerMousedown', $event)"
+    >
+      <svg
+        class="er-entity-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14" height="14"
+        viewBox="0 0 24 24"
+        fill="none" stroke="currentColor" stroke-width="2"
+      >
+        <path d="M3 3h18v18H3z" />
+        <path d="M21 9H3" />
+        <path d="M9 21V9" />
+      </svg>
+      {{ node.id }}
+    </div>
+
+    <!-- Column pills -->
+    <div class="er-entity-pills">
+      <span
+        v-for="col in node.table.columns"
+        :key="col.name"
+        class="er-entity-pill" :class="[pillClass(col)]"
+      >
+        <svg
+          v-if="col.is_primary_key"
+          xmlns="http://www.w3.org/2000/svg"
+          width="10" height="10"
+          viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          class="er-entity-pill-icon"
+        >
+          <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
+          <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+        </svg>
+        <svg
+          v-else-if="isFKColumn(col.name)"
+          xmlns="http://www.w3.org/2000/svg"
+          width="10" height="10"
+          viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          class="er-entity-pill-icon"
+        >
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+        </svg>
+        <span class="er-entity-pill-name">{{ col.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.er-entity {
+  @apply bg-card border-2 border-blue-500/50 rounded-xl shadow-sm;
+  width: 260px;
+  font-size: 12px;
+  user-select: none;
+  overflow: hidden;
+}
+.er-entity--selected {
+  @apply border-primary ring-2 ring-primary/30;
+}
+.er-entity-header {
+  @apply bg-blue-50 dark:bg-blue-950/30 px-3 py-2 font-semibold text-sm border-b border-blue-500/20 flex items-center gap-2;
+  cursor: grab;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.er-entity-header--dragging {
+  cursor: grabbing;
+}
+.er-entity-icon {
+  @apply text-blue-500 shrink-0;
+}
+.er-entity-pills {
+  @apply p-2 flex flex-wrap gap-1.5;
+}
+.er-entity-pill {
+  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-mono border;
+  max-width: 100%;
+  @apply bg-muted/50 border-border/60 text-muted-foreground;
+}
+.er-entity-pill--pk {
+  @apply bg-amber-50 dark:bg-amber-950/30 border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300;
+}
+.er-entity-pill--fk {
+  @apply bg-blue-50 dark:bg-blue-950/30 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300;
+}
+.er-entity-pill-name {
+  @apply truncate;
+}
+.er-entity-pill-icon {
+  @apply shrink-0;
+}
+</style>
diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 9800d06f..7cdf50e3 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import type { RenderEdge, RenderNode, TableData } from './types'
 import type { ForeignKeyInfo } from '@/datasources/erDiagramApi'
 import type { ColumnInfo } from '@/types/connection'
 import { invoke } from '@tauri-apps/api/core'
-import { useResizeObserver } from '@vueuse/core'
-import dagre from 'dagre'
-import { computed, onMounted, ref, watch } from 'vue'
+import { useElementBounding, useResizeObserver } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   AlertDialog,
@@ -15,10 +15,30 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Spinner } from '@/components/ui/spinner'
 import { getForeignKeys } from '@/datasources/erDiagramApi'
+import { useDatabaseStore } from '@/store/databaseStore'
+
+import {
+  computeCanvasSize,
+  computeDagreLayout,
+  fitToScreen as fitBboxToScreen,
+} from './graph-layout'
+import {
+  buildTableRectMap,
+  computeRelationshipPath,
+} from './graph-routing'
+import TableCard from './TableCard.vue'
+import {
+  calcNodeHeight,
+  CARD_PADDING,
+  HEADER_HEIGHT,
+  NODE_WIDTH,
+} from './types'
 
 // ─── Props ───────────────────────────────────────────
 const props = defineProps<{
@@ -27,98 +47,136 @@ const props = defineProps<{
   schema?: string
 }>()
 
+const emit = defineEmits<{
+  openTable: [tableName: string]
+}>()
+
 const { t } = useI18n()
 
-// ─── Types ────────────────────────────────────────────
+// ─── Types (local) ───────────────────────────────────
 type TableInfo = {
   name: string
   schema?: string
   table_type?: string
 }
 
-type TableData = {
-  name: string
-  schema?: string
-  columns: ColumnInfo[]
-  foreignKeys: ForeignKeyInfo[]
-}
-
-type RenderNode = {
-  id: string
-  x: number
-  y: number
-  width: number
-  height: number
-  table: TableData
-  isHighlighted: boolean
-  visibleColumns: ColumnInfo[]
-  showExpandButton: boolean
-  isExpanded: boolean
-}
-
-type RenderEdge = {
-  from: string
-  to: string
-  label: string
-  path: string
-  isHighlighted: boolean
-}
-
-// ─── Layout Constants ─────────────────────────────────
-const NODE_WIDTH = 220
-const COL_HEIGHT = 28
-const HEADER_HEIGHT = 36
-const EXPAND_BTN_HEIGHT = 28
-const CARD_PADDING = 8
-
-function calcNodeHeight(table: TableData, isExpanded: boolean): number {
-  const colCount = isExpanded
-    ? table.columns.length
-    : Math.min(5, table.columns.length)
-  const expandBtn = table.columns.length > 5 ? EXPAND_BTN_HEIGHT : 0
-  return HEADER_HEIGHT + colCount * COL_HEIGHT + expandBtn + CARD_PADDING
-}
+const CANVAS_PADDING = 80
 
 // ─── State ────────────────────────────────────────────
 const tables = ref<TableData[]>([])
 const foreignKeys = ref<ForeignKeyInfo[]>([])
-const nodePositions = ref<Map<string, { x: number, y: number }>>(new Map())
-const edgePaths = ref<
-  Array<{ from: string, to: string, label: string, path: string }>
->([])
+const dagrePositions = ref<Record<string, { x: number, y: number }>>({})
+const manualOverrides = ref<Record<string, { x: number, y: number }>>({})
 
 const selectedTableId = ref<string | null>(null)
 const searchQuery = ref('')
 const expandedTables = ref<Set<string>>(new Set())
-const layoutDirection = ref<'TB' | 'LR'>('TB')
 
 const zoomLevel = ref(1)
-const panOffset = ref({ x: 0, y: 0 })
-const isPanning = ref(false)
-const panStart = ref({ x: 0, y: 0 })
+const gestureStartZoom = ref(1)
 
 const loading = ref(true)
 const error = ref<string | null>(null)
 const showWarning = ref(false)
-const svgContainerRef = ref<HTMLElement | null>(null)
 
-// ─── Computed ─────────────────────────────────────────
-const filteredTables = computed(() => {
+// Viewport refs
+const viewportRef = ref<HTMLElement | null>(null)
+const viewportBounds = useElementBounding(viewportRef)
+
+// ─── Node drag state ─────────────────────────────
+const draggingNodeId = ref<string | null>(null)
+const dragStartPos = ref({ x: 0, y: 0 })
+const dragNodeStart = ref({ x: 0, y: 0 })
+
+// ─── Drag to pan ────────────────────────────────
+const isPanning = ref(false)
+const panStart = ref({ mouseX: 0, mouseY: 0, scrollLeft: 0, scrollTop: 0 })
+
+function onViewportMouseDown(e: MouseEvent) {
+  // Only left-click triggers pan
+  if (e.button !== 0)
+    return
+
+  // Don't start pan if clicking on a table card
+  const target = e.target as HTMLElement
+  if (target.closest('.er-table-wrapper'))
+    return
+
+  e.preventDefault()
+  const vp = viewportRef.value
+  if (!vp)
+    return
+  isPanning.value = true
+  panStart.value = {
+    mouseX: e.clientX,
+    mouseY: e.clientY,
+    scrollLeft: vp.scrollLeft,
+    scrollTop: vp.scrollTop,
+  }
+}
+
+function onViewportMouseMove(e: MouseEvent) {
+  if (!isPanning.value)
+    return
+  const vp = viewportRef.value
+  if (!vp)
+    return
+  const { mouseX, mouseY, scrollLeft, scrollTop } = panStart.value
+  vp.scrollLeft = scrollLeft - (e.clientX - mouseX)
+  vp.scrollTop = scrollTop - (e.clientY - mouseY)
+}
+
+function onViewportMouseUp() {
+  isPanning.value = false
+}
+
+// ─── Schema selector ──────────────────────────────
+const databaseStore = useDatabaseStore()
+const availableSchemas = ref<string[]>([])
+const localSchema = ref<string>(props.schema ?? '__all__')
+
+const supportsSchemas = computed(() => availableSchemas.value.length > 0)
+
+const schemaParam = computed(() =>
+  localSchema.value === '__all__' ? null : localSchema.value,
+)
+
+watch(() => props.schema, (val) => {
+  if (val !== undefined)
+    localSchema.value = val ?? '__all__'
+})
+
+// ─── Relationships from foreign keys ──────────────
+const allRelationships = computed(() =>
+  foreignKeys.value.map(fk => ({
+    sourceTable: fk.source_table,
+    targetTable: fk.referenced_table,
+  })),
+)
+
+// ─── Combined positions (dagre + manual) ─────────
+const nodePositions = computed(() => ({
+  ...dagrePositions.value,
+  ...manualOverrides.value,
+}))
+
+// ─── Display (search filter only, no focus mode hiding) ─
+const displayedTables = computed(() => {
   if (!searchQuery.value.trim())
     return tables.value
   const q = searchQuery.value.toLowerCase()
   return tables.value.filter(t => t.name.toLowerCase().includes(q))
 })
 
-const filteredTableNames = computed(
-  () => new Set(filteredTables.value.map(t => t.name)),
+const displayedTableNames = computed(
+  () => new Set(displayedTables.value.map(t => t.name)),
 )
 
-const filteredForeignKeys = computed(() =>
-  foreignKeys.value.filter(
-    fk =>
-      filteredTableNames.value.has(fk.source_table)
-      && filteredTableNames.value.has(fk.referenced_table),
+const displayedRelationships = computed(() =>
+  allRelationships.value.filter(
+    rel =>
+      displayedTableNames.value.has(rel.sourceTable)
+      && displayedTableNames.value.has(rel.targetTable),
   ),
 )
 
@@ -126,138 +184,147 @@ const highlightedTables = computed(() => {
   if (!selectedTableId.value)
     return new Set<string>()
   const connected = new Set<string>([selectedTableId.value])
-  for (const fk of foreignKeys.value) {
-    if (fk.source_table === selectedTableId.value)
-      connected.add(fk.referenced_table)
-    if (fk.referenced_table === selectedTableId.value)
-      connected.add(fk.source_table)
+  for (const rel of allRelationships.value) {
+    if (rel.sourceTable === selectedTableId.value)
+      connected.add(rel.targetTable)
+    if (rel.targetTable === selectedTableId.value)
+      connected.add(rel.sourceTable)
   }
   return connected
 })
 
+// ─── Render nodes ─────────────────────────────────
 const renderNodes = computed<RenderNode[]>(() => {
-  return filteredTables.value
-    .map((table) => {
-      const pos = nodePositions.value.get(table.name)
-      if (!pos)
-        return null
-
-      const isExpanded = expandedTables.value.has(table.name)
-      const visibleCols = isExpanded
-        ? table.columns
-        : table.columns.slice(0, 5)
-      const height = calcNodeHeight(table, isExpanded)
-
-      return {
-        id: table.name,
-        x: pos.x - NODE_WIDTH / 2,
-        y: pos.y - height / 2,
-        width: NODE_WIDTH,
-        height,
-        table,
-        isHighlighted: highlightedTables.value.has(table.name),
-        visibleColumns: visibleCols,
-        showExpandButton: table.columns.length > 5,
-        isExpanded,
-      }
-    })
-    .filter((n): n is RenderNode => n !== null)
+  return displayedTables.value.map((table) => {
+    const pos = nodePositions.value[table.name]
+    if (!pos)
+      return null
+
+    const isExpanded = expandedTables.value.has(table.name)
+    const hasMore = table.columns.length > 5
+    const height = calcNodeHeight(table.columns.length, hasMore, isExpanded)
+    const visibleCols = isExpanded
+      ? table.columns
+      : table.columns.slice(0, 5)
+
+    return {
+      id: table.name,
+      x: pos.x - NODE_WIDTH / 2,
+      y: pos.y - height / 2,
+      width: NODE_WIDTH,
+      height,
+      table,
+      isHighlighted: highlightedTables.value.has(table.name),
+      visibleColumns: visibleCols,
+      showExpandButton: hasMore,
+      isExpanded,
+    }
+  }).filter((n): n is RenderNode => n !== null)
+})
+
+// ─── Canvas size ──────────────────────────────────
+const nodeHeights = computed(() => {
+  const map: Record<string, number> = {}
+  for (const node of renderNodes.value)
+    map[node.id] = node.height
+  return map
+})
+
+const canvasSize = computed(() => {
+  const positions = nodePositions.value
+  if (Object.keys(positions).length === 0)
+    return { width: 800, height: 600 }
+
+  return computeCanvasSize(positions, NODE_WIDTH, (name) => {
+    const h = nodeHeights.value[name]
+    return h ?? HEADER_HEIGHT + 8
+  }, CANVAS_PADDING)
+})
+
+// ─── Render edges (orthogonal routing) ────────────
+const tableRectMap = computed(() => {
+  return buildTableRectMap(
+    displayedTables.value.map(t => t.name),
+    nodePositions.value,
+    (name) => {
+      const h = nodeHeights.value[name]
+      return h ?? HEADER_HEIGHT + CARD_PADDING
+    },
+  )
 })
 
 const renderEdges = computed<RenderEdge[]>(() => {
-  return edgePaths.value
-    .filter(
-      edge =>
-        filteredTableNames.value.has(edge.from)
-        && filteredTableNames.value.has(edge.to),
+  return displayedRelationships.value.map((rel) => {
+    const path = computeRelationshipPath(
+      rel.sourceTable,
+      rel.targetTable,
+      tableRectMap.value,
     )
-    .map(edge => ({
-      ...edge,
+    return {
+      from: rel.sourceTable,
+      to: rel.targetTable,
+      label: '',
+      path,
       isHighlighted:
         selectedTableId.value !== null
-        && (edge.from === selectedTableId.value
-          || edge.to === selectedTableId.value),
-    }))
+        && (rel.sourceTable === selectedTableId.value
+          || rel.targetTable === selectedTableId.value),
+    }
+  })
 })
 
-// ─── Layout Computation ───────────────────────────────
+// ─── Layout Computation (dagre only, does NOT touch manualOverrides) ─
 function computeLayout() {
-  if (filteredTables.value.length === 0) {
-    nodePositions.value = new Map()
-    edgePaths.value = []
+  if (displayedTables.value.length === 0) {
+    dagrePositions.value = {}
     return
   }
 
-  const g = new dagre.graphlib.Graph()
-  g.setGraph({
-    rankdir: layoutDirection.value,
-    nodesep: 80,
-    ranksep: 120,
-    marginx: 40,
-    marginy: 40,
-  })
-  g.setDefaultEdgeLabel(() => ({}))
-
-  for (const table of filteredTables.value) {
+  const dagreTables = displayedTables.value.map((table) => {
     const isExpanded = expandedTables.value.has(table.name)
-    const height = calcNodeHeight(table, isExpanded)
-    g.setNode(table.name, {
-      label: table.name,
-      width: NODE_WIDTH,
-      height,
-    })
-  }
-
-  for (const fk of filteredForeignKeys.value) {
-    g.setEdge(fk.source_table, fk.referenced_table, {
-      label: fk.constraint_name,
-    })
-  }
-
-  dagre.layout(g)
-
-  const positions = new Map<string, { x: number, y: number }>()
-  g.nodes().forEach((nodeName: string) => {
-    const node = g.node(nodeName) as { x: number, y: number }
-    positions.set(nodeName, { x: node.x, y: node.y })
+    const hasMore = table.columns.length > 5
+    const h = calcNodeHeight(table.columns.length, hasMore, isExpanded)
+    return { name: table.name, width: NODE_WIDTH, height: h }
   })
 
-  const paths: Array<{
-    from: string
-    to: string
-    label: string
-    path: string
-  }> = []
-  g.edges().forEach((e: { v: string, w: string }) => {
-    const edge = g.edge(e) as {
-      points?: Array<{ x: number, y: number }>
-      label?: string
-    }
-    const points = edge.points || []
-    if (points.length >= 2) {
-      const path = points
-        .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
-        .join(' ')
-      paths.push({
-        from: e.v,
-        to: e.w,
-        label: edge.label || '',
-        path,
-      })
-    }
-  })
+  const dagreRels = displayedRelationships.value.map(rel => ({
+    sourceTable: rel.sourceTable,
+    targetTable: rel.targetTable,
+  }))
 
-  nodePositions.value = positions
-  edgePaths.value = paths
+  dagrePositions.value = computeDagreLayout(dagreTables, dagreRels)
 }
 
 // ─── Data Fetching ────────────────────────────────────
+async function fetchAvailableSchemas() {
+  if (!props.connectionId)
+    return
+  try {
+    const meta = databaseStore.metadata[props.connectionId]
+    const cached = meta?.schemas[props.database]
+    if (cached && cached.length > 0) {
+      availableSchemas.value = cached
+      return
+    }
+    const result = await invoke<string[]>('list_schemas', {
+      connectionId: props.connectionId,
+      database: props.database,
+    })
+    availableSchemas.value = result ?? []
+    const m = databaseStore.metadata[props.connectionId]
+    if (m && result)
+      m.schemas[props.database] = result
+  }
+  catch {
+    availableSchemas.value = []
+  }
+}
+
 async function fetchSchemaData() {
   loading.value = true
   try {
-    const schema = props.schema ?? null
+    const schema = schemaParam.value
 
-    // Fetch tables and foreign keys in parallel
     const [tableList, fkList] = await Promise.all([
       invoke<TableInfo[]>('list_tables', {
         connectionId: props.connectionId,
@@ -270,7 +337,6 @@ async function fetchSchemaData() {
 
     foreignKeys.value = fkList
 
-    // Fetch columns for each table in parallel
     const columnResults = await Promise.all(
       tableList.map(t =>
         invoke<ColumnInfo[]>('list_columns', {
@@ -282,7 +348,6 @@ async function fetchSchemaData() {
       ),
     )
 
-    // Build enriched table data
     tables.value = tableList.map((t, i) => ({
       name: t.name,
       schema: t.schema,
@@ -292,11 +357,9 @@ async function fetchSchemaData() {
       ),
     }))
 
-    // Show warning for large schemas
     if (tables.value.length > 30)
       showWarning.value = true
 
-    // Compute initial layout
     computeLayout()
   }
   catch (err) {
@@ -308,54 +371,17 @@ async function fetchSchemaData() {
   }
 }
 
-// ─── Watch for layout triggers ────────────────────────
-watch(
-  [filteredTables, layoutDirection, expandedTables],
-  () => {
-    computeLayout()
-  },
-  { immediate: false },
-)
-
-// ─── Interaction Handlers ─────────────────────────────
-function startPan(e: MouseEvent) {
-  const target = e.target as HTMLElement
-  const isCanvasClick
-    = target === svgContainerRef.value
-      || target.tagName === 'svg'
-  if (!isCanvasClick)
-    return
-
-  isPanning.value = true
-  panStart.value = {
-    x: e.clientX - panOffset.value.x,
-    y: e.clientY - panOffset.value.y,
-  }
-}
-
-function onPan(e: MouseEvent) {
-  if (!isPanning.value)
-    return
-  panOffset.value = {
-    x: e.clientX - panStart.value.x,
-    y: e.clientY - panStart.value.y,
-  }
-}
-
-function endPan() {
-  isPanning.value = false
-}
-
-function onWheel(e: WheelEvent) {
-  const delta = e.deltaY > 0 ? -0.1 : 0.1
-  zoomLevel.value = Math.max(0.1, Math.min(3, zoomLevel.value + delta))
-}
+// ─── Watchers ─────────────────────────────────────────
+// Only recompute layout when column visibility (expand) changes — NOT on search/focus (displayedTables)
+watch(expandedTables, () => {
+  computeLayout()
+})
 
-function fitToScreen() {
-  zoomLevel.value = 1
-  panOffset.value = { x: 0, y: 0 }
-}
+watch(localSchema, () => {
+  fetchSchemaData()
+})
 
+// ─── Interaction Handlers ─────────────────────────────
 function selectTable(tableName: string) {
   selectedTableId.value
     = selectedTableId.value === tableName ? null : tableName
@@ -374,162 +400,194 @@ function toggleExpand(tableName: string) {
   expandedTables.value = next
 }
 
-function toggleLayout() {
-  layoutDirection.value
-    = layoutDirection.value === 'TB' ? 'LR' : 'TB'
+// ─── Header-only drag handlers ───────────────────
+function onHeaderMousedown(e: MouseEvent, nodeId: string) {
+  if (e.button !== 0)
+    return
+  const pos = nodePositions.value[nodeId]
+  if (!pos)
+    return
+  draggingNodeId.value = nodeId
+  dragStartPos.value = { x: e.clientX, y: e.clientY }
+  dragNodeStart.value = { x: pos.x, y: pos.y }
+  document.addEventListener('mousemove', onHeaderMouseMove)
+  document.addEventListener('mouseup', onHeaderMouseUp)
+}
+
+function onHeaderMouseMove(e: MouseEvent) {
+  if (!draggingNodeId.value)
+    return
+  const dx = (e.clientX - dragStartPos.value.x) / zoomLevel.value
+  const dy = (e.clientY - dragStartPos.value.y) / zoomLevel.value
+  manualOverrides.value = {
+    ...manualOverrides.value,
+    [draggingNodeId.value]: {
+      x: Math.max(16, dragNodeStart.value.x + dx),
+      y: Math.max(16, dragNodeStart.value.y + dy),
+    },
+  }
+}
+
+function onHeaderMouseUp() {
+  draggingNodeId.value = null
+  document.removeEventListener('mousemove', onHeaderMouseMove)
+  document.removeEventListener('mouseup', onHeaderMouseUp)
+}
+
+// ─── Zoom ─────────────────────────────────────────────
+function onWheel(e: WheelEvent) {
+  if (!e.ctrlKey && !e.metaKey)
+    return // native scroll
+  e.preventDefault()
+  const delta = -e.deltaY / 500
+  const nextZoom = Math.max(0.1, Math.min(3, +(zoomLevel.value * (1 + delta)).toFixed(2)))
+
+  // Zoom centered on mouse position relative to content
+  const vp = viewportRef.value
+  if (vp) {
+    const vpRect = vp.getBoundingClientRect()
+    const originX = e.clientX - vpRect.left
+    const originY = e.clientY - vpRect.top
+    const contentX = (vp.scrollLeft + originX) / zoomLevel.value
+    const contentY = (vp.scrollTop + originY) / zoomLevel.value
+    zoomLevel.value = nextZoom
+    vp.scrollLeft = contentX * nextZoom - originX
+    vp.scrollTop = contentY * nextZoom - originY
+  }
+  else {
+    zoomLevel.value = nextZoom
+  }
+}
+
+function onGestureStart(e: Event) {
+  e.preventDefault()
+  gestureStartZoom.value = zoomLevel.value
+}
+
+function onGestureChange(e: Event) {
+  const ge = e as WheelEvent & { scale?: number }
+  if (typeof ge.scale !== 'number')
+    return
+  e.preventDefault()
+  zoomLevel.value = Math.max(0.1, Math.min(3, +(gestureStartZoom.value * ge.scale).toFixed(2)))
+}
+
+function fitToScreen() {
+  if (!viewportRef.value)
+    return
+  const vpW = viewportBounds.width.value || 800
+  const vpH = viewportBounds.height.value || 600
+  const result = fitBboxToScreen(canvasSize.value, vpW, vpH)
+  zoomLevel.value = result.zoom
+  viewportRef.value.scrollLeft = result.scrollX
+  viewportRef.value.scrollTop = result.scrollY
+}
+
+function resetLayout() {
+  manualOverrides.value = {}
+  computeLayout()
+  fitToScreen()
 }
 
 // ─── Resize Observer ──────────────────────────────────
-useResizeObserver(svgContainerRef, () => {
-  // Dagre layout is independent of container size,
-  // so no re-layout needed on resize.
+useResizeObserver(viewportRef, () => {
+  // Viewport size changes may affect fit-to-screen but we don't auto-fit
 })
 
 // ─── Lifecycle ────────────────────────────────────────
-onMounted(() => {
+onMounted(async () => {
+  await fetchAvailableSchemas()
   fetchSchemaData()
 })
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onHeaderMouseMove)
+  document.removeEventListener('mouseup', onHeaderMouseUp)
+})
 </script>
 
 <template>
   <div class="er-diagram-view bg-background flex flex-col h-full">
     <!-- ── Toolbar ──────────────────────────────────── -->
-    <div class="px-3 py-2 border-b bg-muted/30 flex gap-2 items-center">
+    <div class="px-3 py-2 border-b bg-muted/30 flex shrink-0 gap-2 items-center">
+      <!-- Schema selector -->
+      <div v-if="supportsSchemas" class="w-44">
+        <Select v-model="localSchema">
+          <SelectTrigger class="text-xs h-8">
+            <SelectValue :placeholder="t('components.databaseBrowser.erDiagram.allSchemas')" />
+          </SelectTrigger>
+          <SelectContent :side-offset="4" align="start" class="z-[100]">
+            <SelectItem value="__all__" class="text-xs">
+              {{ t('components.databaseBrowser.erDiagram.allSchemas') }}
+            </SelectItem>
+            <SelectItem
+              v-for="s in availableSchemas"
+              :key="s"
+              :value="s"
+              class="text-xs font-mono"
+            >
+              {{ s }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <!-- Search -->
       <div class="flex-1 max-w-xs relative">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="text-muted-foreground left-2 top-1/2 absolute -translate-y-1/2"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
-        <Input
-          v-model="searchQuery"
-          :placeholder="
-            t('components.databaseBrowser.erDiagram.searchPlaceholder')
-          "
-          class="text-xs pl-7 h-8"
-        />
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground left-2 top-1/2 absolute -translate-y-1/2"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+        <Input v-model="searchQuery" :placeholder="t('components.databaseBrowser.erDiagram.searchPlaceholder')" class="text-xs pl-7 h-8" />
       </div>
 
+      <!-- Info badges -->
+      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.tablesCountBadge', { count: displayedTables.length })">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z" /><path d="M21 9H3" /><path d="M9 21V9" /></svg>
+        {{ displayedTables.length }}
+      </Badge>
+      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.relationshipsCountBadge', { count: displayedRelationships.length })">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
+        {{ displayedRelationships.length }}
+      </Badge>
+
       <div class="flex-1" />
 
-      <!-- Layout direction toggle -->
+      <!-- Reset Layout -->
       <Button
-        variant="ghost"
-        size="sm"
-        class="text-xs gap-1 h-7"
-        @click="toggleLayout"
+        variant="ghost" size="icon" class="h-7 w-7"
+        :title="t('components.databaseBrowser.erDiagram.resetLayout')"
+        @click="resetLayout"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="3" width="7" height="7" />
-          <rect x="14" y="3" width="7" height="7" />
-          <rect x="14" y="14" width="7" height="7" />
-          <rect x="3" y="14" width="7" height="7" />
-        </svg>
-        {{
-          layoutDirection === 'TB'
-            ? t('components.databaseBrowser.erDiagram.layoutLeftRight')
-            : t('components.databaseBrowser.erDiagram.layoutTopBottom')
-        }}
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /></svg>
       </Button>
 
       <!-- Fit to screen -->
-      <Button
-        variant="ghost"
-        size="icon"
-        class="h-7 w-7"
-        :title="t('components.databaseBrowser.erDiagram.fitToScreen')"
-        @click="fitToScreen"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M8 3H5a2 2 0 0 0-2 2v3" />
-          <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
-          <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
-          <path d="M3 16v3a2 2 0 0 0 2 2h3" />
-        </svg>
+      <Button variant="ghost" size="icon" class="h-7 w-7" :title="t('components.databaseBrowser.erDiagram.fitToScreen')" @click="fitToScreen">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /></svg>
       </Button>
 
       <!-- Refresh -->
-      <Button
-        variant="ghost"
-        size="icon"
-        class="h-7 w-7"
-        :title="t('common.buttons.refresh')"
-        :disabled="loading"
-        @click="fetchSchemaData"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          :class="{ 'animate-spin': loading }"
-        >
-          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
-          <path d="M21 3v5h-5" />
-          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
-          <path d="M8 16H3v5" />
-        </svg>
+      <Button variant="ghost" size="icon" class="h-7 w-7" :title="t('common.buttons.refresh')" :disabled="loading" @click="fetchSchemaData">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="{ 'animate-spin': loading }"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></svg>
       </Button>
 
-      <!-- Zoom indicator -->
-      <span
-        class="text-xs text-muted-foreground text-right min-w-[4rem] tabular-nums"
-      >
-        {{
-          t('components.databaseBrowser.erDiagram.zoom', {
-            percentage: Math.round(zoomLevel * 100),
-          })
-        }}
-      </span>
+      <!-- Zoom controls -->
+      <div class="flex gap-0.5 items-center">
+        <Button variant="ghost" size="icon" class="h-7 w-7" :disabled="zoomLevel <= 0.1" :title="t('components.databaseBrowser.erDiagram.zoomOut')" @click="zoomLevel = Math.max(0.1, +(zoomLevel / 1.3).toFixed(2))">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /><line x1="8" y1="11" x2="14" y2="11" /></svg>
+        </Button>
+        <Button variant="ghost" size="icon" class="h-7 w-7" :disabled="zoomLevel >= 3" :title="t('components.databaseBrowser.erDiagram.zoomIn')" @click="zoomLevel = Math.min(3, +(zoomLevel * 1.3).toFixed(2))">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /><line x1="11" y1="8" x2="11" y2="14" /><line x1="8" y1="11" x2="14" y2="11" /></svg>
+        </Button>
+        <span class="text-xs text-muted-foreground text-center min-w-[3rem] tabular-nums">
+          {{ t('components.databaseBrowser.erDiagram.zoom', { percentage: Math.round(zoomLevel * 100) }) }}
+        </span>
+      </div>
     </div>
 
     <!-- ── Large Schema Warning ─────────────────────── -->
     <AlertDialog v-model:open="showWarning">
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>
-            {{
-              t('components.databaseBrowser.erDiagram.largeSchemaWarning', {
-                count: tables.length,
-              })
-            }}
-          </AlertDialogTitle>
+          <AlertDialogTitle>{{ t('components.databaseBrowser.erDiagram.largeSchemaWarning', { count: tables.length }) }}</AlertDialogTitle>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel @click="showWarning = false">
@@ -542,32 +600,28 @@ onMounted(() => {
       </AlertDialogContent>
     </AlertDialog>
 
-    <!-- ── Canvas Area ──────────────────────────────── -->
+    <!-- ── Canvas Area (pure HTML, no foreignObject) ── -->
     <div
-      ref="svgContainerRef"
-      class="flex-1 cursor-grab relative overflow-hidden"
-      @mousedown="startPan"
-      @mousemove="onPan"
-      @mouseup="endPan"
-      @mouseleave="endPan"
+      ref="viewportRef"
+      class="bg-muted/5 flex-1 relative overflow-auto"
+      :class="{ 'cursor-grab': !isPanning && !draggingNodeId, 'cursor-grabbing': isPanning || !!draggingNodeId }"
       @wheel.prevent="onWheel"
+      @gesturestart="onGestureStart"
+      @gesturechange="onGestureChange"
+      @mousedown="onViewportMouseDown"
+      @mousemove="onViewportMouseMove"
+      @mouseup="onViewportMouseUp"
+      @mouseleave="onViewportMouseUp"
+      @click.self="deselectAll"
     >
       <!-- Loading -->
-      <div
-        v-if="loading"
-        class="flex gap-2 items-center inset-0 justify-center absolute"
-      >
+      <div v-if="loading" class="flex gap-2 items-center inset-0 justify-center absolute">
         <Spinner class="h-6 w-6" />
-        <span class="text-sm text-muted-foreground">
-          {{ t('components.databaseBrowser.erDiagram.loading') }}
-        </span>
+        <span class="text-sm text-muted-foreground">{{ t('components.databaseBrowser.erDiagram.loading') }}</span>
       </div>
 
       <!-- Error state -->
-      <div
-        v-else-if="error"
-        class="flex flex-col gap-2 items-center inset-0 justify-center absolute"
-      >
+      <div v-else-if="error" class="flex flex-col gap-2 items-center inset-0 justify-center absolute">
         <p class="text-sm text-destructive">
           {{ error }}
         </p>
@@ -577,198 +631,87 @@ onMounted(() => {
       </div>
 
       <!-- No tables -->
-      <div
-        v-else-if="tables.length === 0"
-        class="flex items-center inset-0 justify-center absolute"
-      >
+      <div v-else-if="tables.length === 0" class="flex items-center inset-0 justify-center absolute">
         <p class="text-sm text-muted-foreground">
           {{ t('components.databaseBrowser.erDiagram.noForeignKeys') }}
         </p>
       </div>
 
-      <!-- Empty search results -->
-      <div
-        v-else-if="searchQuery && filteredTables.length === 0"
-        class="flex items-center inset-0 justify-center absolute"
-      >
+      <!-- Empty search / focus results -->
+      <div v-else-if="displayedTables.length === 0" class="flex items-center inset-0 justify-center absolute">
         <p class="text-sm text-muted-foreground">
           {{ t('components.databaseBrowser.erDiagram.searchPlaceholder') }}
         </p>
       </div>
 
-      <!-- SVG Canvas -->
-      <svg
-        v-show="!loading && filteredTables.length > 0"
-        class="h-full w-full"
+      <!-- Content area (scaled) -->
+      <div
+        v-show="!loading && displayedTables.length > 0"
+        class="relative"
         :style="{
-          transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,
-          transformOrigin: '0 0',
+          width: `${canvasSize.width * zoomLevel}px`,
+          height: `${canvasSize.height * zoomLevel}px`,
         }"
-        @click.self="deselectAll"
-        @dblclick="fitToScreen"
+        @mousedown="onViewportMouseDown"
       >
-        <defs>
-          <!-- Arrowhead marker -->
-          <marker
-            id="er-arrowhead"
-            markerWidth="10"
-            markerHeight="7"
-            refX="9"
-            refY="3.5"
-            orient="auto"
+        <div
+          class="origin-top-left left-0 top-0 absolute"
+          :style="{
+            width: `${canvasSize.width}px`,
+            height: `${canvasSize.height}px`,
+            transform: `scale(${zoomLevel})`,
+          }"
+          @mousedown="onViewportMouseDown"
+          @click.self="deselectAll"
+        >
+          <!-- SVG overlay for relationship lines -->
+          <svg class="h-full w-full pointer-events-none inset-0 absolute overflow-visible" style="z-index: 0;">
+            <defs>
+              <marker id="er-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto" markerUnits="strokeWidth">
+                <polygon points="0 0, 10 3.5, 0 7" fill="hsl(var(--muted-foreground))" />
+              </marker>
+            </defs>
+            <path
+              v-for="(edge, idx) in renderEdges"
+              :key="`edge-${idx}`"
+              :d="edge.path"
+              fill="none"
+              :stroke="edge.isHighlighted ? 'hsl(var(--primary))' : 'hsl(var(--muted-foreground))'"
+              :stroke-width="edge.isHighlighted ? 2 : 1"
+              marker-end="url(#er-arrowhead)"
+            />
+          </svg>
+
+          <!-- Table cards -->
+          <div
+            v-for="node in renderNodes"
+            :key="node.id"
+            class="er-table-wrapper"
+            :style="{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              transform: `translate(${node.x}px, ${node.y}px)`,
+              willChange: draggingNodeId === node.id ? 'transform' : 'auto',
+            }"
           >
-            <polygon
-              points="0 0, 10 3.5, 0 7"
-              fill="hsl(var(--muted-foreground))"
+            <TableCard
+              :node="node"
+              :is-selected="selectedTableId === node.id"
+              :is-highlighted="node.isHighlighted"
+              :header-dragging="draggingNodeId === node.id"
+              @header-mousedown="onHeaderMousedown($event, node.id)"
+              @card-dblclick="emit('openTable', node.id)"
+              @card-click="selectTable(node.id)"
+              @toggle-expand="toggleExpand(node.id)"
             />
-          </marker>
-        </defs>
-
-        <!-- FK relationship lines -->
-        <g v-for="(edge, idx) in renderEdges" :key="`edge-${idx}`">
-          <path
-            :d="edge.path"
-            fill="none"
-            :stroke="
-              edge.isHighlighted
-                ? 'hsl(var(--primary))'
-                : 'hsl(var(--muted-foreground))'
-            "
-            :stroke-width="edge.isHighlighted ? 2 : 1"
-            :opacity="edge.isHighlighted ? 1 : 0.4"
-            marker-end="url(#er-arrowhead)"
-          />
-        </g>
-
-        <!-- Table cards -->
-        <g
-          v-for="node in renderNodes"
-          :key="node.id"
-          :transform="`translate(${node.x}, ${node.y})`"
-          :opacity="selectedTableId ? (node.isHighlighted ? 1 : 0.3) : 1"
-          @click.stop="selectTable(node.id)"
-        >
-          <foreignObject :width="node.width" :height="node.height">
-            <div
-              class="er-table-card"
-              :class="{
-                'er-table-card--selected': selectedTableId === node.id,
-                'er-table-card--dimmed':
-                  selectedTableId && !node.isHighlighted,
-              }"
-            >
-              <!-- Table header -->
-              <div class="er-table-header">
-                {{ node.id }}
-              </div>
-
-              <!-- Columns -->
-              <div class="er-table-columns">
-                <div
-                  v-for="(col, colIdx) in node.visibleColumns"
-                  :key="colIdx"
-                  class="er-table-column"
-                >
-                  <span class="er-column-name">{{ col.name }}</span>
-                  <span class="er-column-type">{{ col.data_type }}</span>
-                  <span class="er-column-markers">
-                    <span v-if="col.is_primary_key" class="er-pk">🔑</span>
-                    <span
-                      v-if="
-                        node.table.foreignKeys.some(
-                          fk =>
-                            fk.columns.includes(col.name)
-                            || fk.referenced_columns.includes(col.name),
-                        )
-                      "
-                      class="er-fk"
-                    >🔗</span>
-                    <span v-if="col.nullable === false" class="er-nullable">•</span>
-                  </span>
-                </div>
-              </div>
-
-              <!-- Show more / less toggle -->
-              <button
-                v-if="node.showExpandButton"
-                class="er-expand-btn"
-                @click.stop="toggleExpand(node.id)"
-              >
-                {{
-                  node.isExpanded
-                    ? t('components.databaseBrowser.erDiagram.hideExtraColumns')
-                    : t('components.databaseBrowser.erDiagram.showAllColumns', {
-                      count: node.table.columns.length,
-                    })
-                }}
-              </button>
-            </div>
-          </foreignObject>
-        </g>
-      </svg>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.er-table-card {
-  @apply bg-card border border-border rounded-lg shadow-sm overflow-hidden;
-  width: 220px;
-  font-size: 12px;
-  user-select: none;
-}
-
-.er-table-card--selected {
-  @apply border-primary ring-1 ring-primary shadow-md;
-}
-
-.er-table-card--dimmed {
-  opacity: 0.7;
-}
-
-.er-table-header {
-  @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.er-table-columns {
-  @apply divide-y divide-border/50;
-}
-
-.er-table-column {
-  @apply px-3 py-1.5 flex gap-1 items-center text-xs;
-}
-
-.er-column-name {
-  @apply font-mono flex-1 truncate;
-}
-
-.er-column-type {
-  @apply text-muted-foreground text-[10px] flex-shrink-0;
-  max-width: 80px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.er-column-markers {
-  @apply flex gap-0.5 flex-shrink-0;
-}
-
-.er-pk {
-  @apply text-amber-500;
-}
-
-.er-fk {
-  @apply text-blue-500;
-}
-
-.er-nullable {
-  @apply text-muted-foreground;
-}
-
-.er-expand-btn {
-  @apply w-full text-xs text-muted-foreground hover:text-foreground py-1.5 border-t border-border bg-muted/30 hover:bg-muted/50 transition-colors;
-}
+/* Table view styles are in TableCard.vue */
 </style>
diff --git a/src/components/er-diagram/TableCard.vue b/src/components/er-diagram/TableCard.vue
new file mode 100644
index 00000000..46c72fc4
--- /dev/null
+++ b/src/components/er-diagram/TableCard.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { RenderNode } from './types'
+
+const props = defineProps<{
+  node: RenderNode
+  isSelected: boolean
+  isHighlighted: boolean
+  headerDragging: boolean
+}>()
+
+const emit = defineEmits<{
+  headerMousedown: [e: MouseEvent]
+  cardDblclick: []
+  cardClick: []
+  toggleExpand: []
+}>()
+
+function isFKColumn(colName: string): boolean {
+  return props.node.table.foreignKeys.some(
+    fk => fk.columns.includes(colName) || fk.referenced_columns.includes(colName),
+  )
+}
+</script>
+
+<template>
+  <div
+    class="er-table-card"
+    :class="{ 'er-table-card--selected': isSelected }"
+    @click.stop="emit('cardClick')"
+    @dblclick.stop="emit('cardDblclick')"
+  >
+    <!-- Header: only this triggers drag -->
+    <div
+      class="er-table-header"
+      :class="{ 'er-table-header--dragging': headerDragging }"
+      @mousedown="emit('headerMousedown', $event)"
+    >
+      {{ node.id }}
+    </div>
+
+    <!-- Columns list -->
+    <div class="er-table-columns">
+      <div
+        v-for="col in node.visibleColumns"
+        :key="col.name"
+        class="er-table-column"
+      >
+        <span class="er-column-markers">
+          <span v-if="col.is_primary_key" class="er-pk">
+            <!-- key SVG -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>
+          </span>
+          <span v-else-if="isFKColumn(col.name)" class="er-fk">
+            <!-- link SVG -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
+          </span>
+          <span v-else class="er-col-spacer" />
+        </span>
+        <span class="er-column-name">{{ col.name }}</span>
+        <span class="er-column-type">{{ col.data_type }}</span>
+      </div>
+    </div>
+
+    <!-- Show more / less toggle -->
+    <button
+      v-if="node.showExpandButton"
+      class="er-expand-btn"
+      @click.stop="emit('toggleExpand')"
+    >
+      {{ node.isExpanded ? $t('components.databaseBrowser.erDiagram.hideExtraColumns') : $t('components.databaseBrowser.erDiagram.showAllColumns', { count: node.table.columns.length }) }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.er-table-card {
+  @apply bg-card border border-border rounded-lg shadow-sm;
+  width: 220px;
+  font-size: 12px;
+  user-select: none;
+}
+.er-table-card--selected {
+  @apply border-primary/60;
+}
+.er-table-header {
+  @apply bg-muted px-3 py-2 font-semibold text-sm border-b border-border;
+  cursor: grab;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.er-table-header--dragging {
+  cursor: grabbing;
+}
+.er-table-columns {
+  @apply divide-y divide-border/50;
+}
+.er-table-column {
+  @apply px-3 py-1.5 flex gap-1 items-center text-xs;
+}
+.er-column-name {
+  @apply font-mono flex-1 truncate;
+}
+.er-column-type {
+  @apply text-muted-foreground text-[10px] flex-shrink-0;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.er-column-markers {
+  @apply flex gap-0.5 flex-shrink-0 w-4 items-center justify-center;
+}
+.er-pk {
+  @apply text-amber-500 flex-shrink-0;
+}
+.er-fk {
+  @apply text-blue-500 flex-shrink-0;
+}
+.er-col-spacer {
+  @apply block w-3;
+}
+.er-expand-btn {
+  @apply w-full text-xs text-muted-foreground hover:text-foreground py-1.5 border-t border-border bg-muted/30 hover:bg-muted/50 transition-colors;
+}
+</style>
diff --git a/src/components/er-diagram/graph-layout.ts b/src/components/er-diagram/graph-layout.ts
new file mode 100644
index 00000000..ca2e226c
--- /dev/null
+++ b/src/components/er-diagram/graph-layout.ts
@@ -0,0 +1,74 @@
+import * as dagre from 'dagre'
+
+export type DagreTable = {
+  name: string
+  width: number
+  height: number
+}
+
+export type DagreRel = {
+  sourceTable: string
+  targetTable: string
+}
+
+export function computeDagreLayout(
+  tables: DagreTable[],
+  relationships: DagreRel[],
+): Record<string, { x: number, y: number }> {
+  const g = new dagre.graphlib.Graph()
+  g.setGraph({
+    rankdir: 'TB',
+    nodesep: 80,
+    ranksep: 120,
+    marginx: 40,
+    marginy: 40,
+  })
+  g.setDefaultEdgeLabel(() => ({}))
+
+  for (const table of tables)
+    g.setNode(table.name, { label: table.name, width: table.width, height: table.height })
+
+  for (const rel of relationships)
+    g.setEdge(rel.sourceTable, rel.targetTable, { label: '' })
+
+  dagre.layout(g)
+
+  const positions: Record<string, { x: number, y: number }> = {}
+  g.nodes().forEach((nodeName: string) => {
+    const node = g.node(nodeName) as { x: number, y: number }
+    positions[nodeName] = { x: node.x, y: node.y }
+  })
+
+  return positions
+}
+
+export function computeCanvasSize(
+  positions: Record<string, { x: number, y: number }>,
+  nodeWidth: number,
+  getHeight: (name: string) => number,
+  padding: number,
+): { width: number, height: number } {
+  let width = 960
+  let height = 540
+  for (const [name, pos] of Object.entries(positions)) {
+    const h = getHeight(name)
+    width = Math.max(width, pos.x + nodeWidth / 2 + padding)
+    height = Math.max(height, pos.y + h / 2 + padding)
+  }
+  return { width, height }
+}
+
+export function fitToScreen(
+  canvasSize: { width: number, height: number },
+  viewportWidth: number,
+  viewportHeight: number,
+): { zoom: number, scrollX: number, scrollY: number } {
+  const rawZoom = Math.min(
+    viewportWidth / canvasSize.width,
+    viewportHeight / canvasSize.height,
+  )
+  const zoom = Math.max(0.1, Math.min(3, rawZoom))
+  const scrollX = (viewportWidth - canvasSize.width * zoom) / 2
+  const scrollY = (viewportHeight - canvasSize.height * zoom) / 2
+  return { zoom, scrollX, scrollY }
+}
diff --git a/src/components/er-diagram/graph-routing.ts b/src/components/er-diagram/graph-routing.ts
new file mode 100644
index 00000000..876d8b31
--- /dev/null
+++ b/src/components/er-diagram/graph-routing.ts
@@ -0,0 +1,130 @@
+import type { TableRect } from './types'
+import { NODE_WIDTH, ROUTE_BLOCK_MARGIN, ROUTE_PADDING } from './types'
+
+export function rangesOverlap(a1: number, a2: number, b1: number, b2: number): boolean {
+  return Math.max(a1, b1) <= Math.min(a2, b2)
+}
+
+export function routeSideX(rect: TableRect, routeX: number, offset = 0): number {
+  if (routeX < rect.x)
+    return rect.x - offset
+  return rect.x + rect.width + offset
+}
+
+export function isVerticalRouteBlocked(
+  routeX: number,
+  y1: number,
+  y2: number,
+  ignored: Set<string>,
+  rects: TableRect[],
+): boolean {
+  const top = Math.min(y1, y2)
+  const bottom = Math.max(y1, y2)
+  return rects.some(
+    r =>
+      !ignored.has(r.name)
+      && routeX >= r.x - ROUTE_BLOCK_MARGIN
+      && routeX <= r.x + r.width + ROUTE_BLOCK_MARGIN
+      && rangesOverlap(top, bottom, r.y - ROUTE_BLOCK_MARGIN, r.y + r.height + ROUTE_BLOCK_MARGIN),
+  )
+}
+
+export function isHorizontalRouteBlocked(
+  y: number,
+  x1: number,
+  x2: number,
+  ignored: Set<string>,
+  rects: TableRect[],
+): boolean {
+  const left = Math.min(x1, x2)
+  const right = Math.max(x1, x2)
+  return rects.some(
+    r =>
+      !ignored.has(r.name)
+      && y >= r.y - ROUTE_BLOCK_MARGIN
+      && y <= r.y + r.height + ROUTE_BLOCK_MARGIN
+      && rangesOverlap(left, right, r.x - ROUTE_BLOCK_MARGIN, r.x + r.width + ROUTE_BLOCK_MARGIN),
+  )
+}
+
+export function candidateRouteXs(source: TableRect, target: TableRect, rects: TableRect[]): number[] {
+  const candidates = new Set<number>()
+  const maxRight = Math.max(source.x + source.width, target.x + target.width)
+
+  candidates.add(maxRight + ROUTE_PADDING)
+
+  if (source.x + source.width + ROUTE_PADDING <= target.x)
+    candidates.add((source.x + source.width + target.x) / 2)
+  if (target.x + target.width + ROUTE_PADDING <= source.x)
+    candidates.add((target.x + target.width + source.x) / 2)
+
+  const columns = [...new Set(rects.map(r => r.x))].sort((a, b) => a - b)
+  for (let i = 0; i < columns.length - 1; i++) {
+    const gap = columns[i + 1] - (columns[i] + NODE_WIDTH)
+    if (gap >= ROUTE_PADDING)
+      candidates.add((columns[i] + NODE_WIDTH + columns[i + 1]) / 2)
+  }
+
+  return [...candidates].sort((a, b) => {
+    const sa = routeSideX(source, a)
+    const ta = routeSideX(target, a)
+    const sb = routeSideX(source, b)
+    const tb = routeSideX(target, b)
+    return Math.abs(a - sa) + Math.abs(a - ta) - (Math.abs(b - sb) + Math.abs(b - tb))
+  })
+}
+
+export function computeRelationshipPath(
+  sourceTable: string,
+  targetTable: string,
+  rects: Record<string, TableRect>,
+): string {
+  const source = rects[sourceTable]
+  const target = rects[targetTable]
+  if (!source || !target)
+    return ''
+
+  const y1 = source.y + source.height / 2
+  const y2 = target.y + target.height / 2
+  const ignored = new Set([source.name, target.name])
+  const allRects = Object.values(rects)
+  const candidates = candidateRouteXs(source, target, allRects)
+
+  // Pick the closest candidate that isn't blocked; fallback to rightmost + padding
+  const defaultRoute = Math.max(source.x + source.width, target.x + target.width) + ROUTE_PADDING
+  const routeX = candidates.find((c) => {
+    const x1 = routeSideX(source, c)
+    const x2 = routeSideX(target, c)
+    return (
+      !isVerticalRouteBlocked(c, y1, y2, ignored, allRects)
+      && !isHorizontalRouteBlocked(y1, x1, c, ignored, allRects)
+      && !isHorizontalRouteBlocked(y2, c, x2, ignored, allRects)
+    )
+  }) ?? defaultRoute
+
+  const x1 = routeSideX(source, routeX, 2)
+  const x2 = routeSideX(target, routeX, 2)
+  return `M ${x1} ${y1} L ${routeX} ${y1} L ${routeX} ${y2} L ${x2} ${y2}`
+}
+
+export function buildTableRectMap(
+  tableNames: string[],
+  nodePositions: Record<string, { x: number, y: number }>,
+  getHeight: (name: string) => number,
+): Record<string, TableRect> {
+  const map: Record<string, TableRect> = {}
+  for (const name of tableNames) {
+    const pos = nodePositions[name]
+    if (!pos)
+      continue
+    const h = getHeight(name)
+    map[name] = {
+      name,
+      x: pos.x - NODE_WIDTH / 2,
+      y: pos.y - h / 2,
+      width: NODE_WIDTH,
+      height: h,
+    }
+  }
+  return map
+}
diff --git a/src/components/er-diagram/types.ts b/src/components/er-diagram/types.ts
new file mode 100644
index 00000000..6f3f91c4
--- /dev/null
+++ b/src/components/er-diagram/types.ts
@@ -0,0 +1,59 @@
+import type { ForeignKeyInfo } from '@/datasources/erDiagramApi'
+import type { ColumnInfo } from '@/types/connection'
+
+export type TableInfo = {
+  name: string
+  schema?: string
+  table_type?: string
+}
+
+export type TableData = {
+  name: string
+  schema?: string
+  columns: ColumnInfo[]
+  foreignKeys: ForeignKeyInfo[]
+}
+
+export type RenderNode = {
+  id: string
+  x: number
+  y: number
+  width: number
+  height: number
+  table: TableData
+  isHighlighted: boolean
+  visibleColumns: ColumnInfo[]
+  showExpandButton: boolean
+  isExpanded: boolean
+}
+
+export type RenderEdge = {
+  from: string
+  to: string
+  label: string
+  path: string
+  isHighlighted: boolean
+}
+
+export type TableRect = {
+  name: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+// Layout constants
+export const NODE_WIDTH = 220
+export const COL_HEIGHT = 28
+export const HEADER_HEIGHT = 36
+export const EXPAND_BTN_HEIGHT = 30
+export const CARD_PADDING = 8
+export const ROUTE_PADDING = 56
+export const ROUTE_BLOCK_MARGIN = 18
+
+export function calcNodeHeight(columnsCount: number, hasMore: boolean, isExpanded: boolean): number {
+  const colCount = isExpanded ? columnsCount : Math.min(5, columnsCount)
+  const expandBtn = hasMore ? EXPAND_BTN_HEIGHT : 0
+  return HEADER_HEIGHT + colCount * COL_HEIGHT + expandBtn + CARD_PADDING
+}
diff --git a/src/components/sidebar/DatabaseSelectorRow.vue b/src/components/sidebar/DatabaseSelectorRow.vue
index 153600b4..a6e93c9e 100644
--- a/src/components/sidebar/DatabaseSelectorRow.vue
+++ b/src/components/sidebar/DatabaseSelectorRow.vue
@@ -31,6 +31,7 @@ type ActionKind
     | 'backupDatabase'
     | 'exportDatabase'
     | 'dropDatabase'
+    | 'showErDiagram'
 
 const props = defineProps<Props>()
 
@@ -190,6 +191,10 @@ watch(() => props.connectionId, async (connId) => {
         <DropdownMenuItem v-if="capabilities.procedures" @click="handleAction('newProcedure')">
           <span class="i-carbon-document mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newProcedure') }}
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem :disabled="!props.modelValue" @click="handleAction('showErDiagram')">
+          <span class="i-carbon-data-vis-3 mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.showErDiagram') }}
+        </DropdownMenuItem>
         <DropdownMenuSeparator v-if="capabilities.backup || capabilities.export" />
         <DropdownMenuItem v-if="capabilities.backup" @click="handleAction('backupDatabase')">
           <span class="i-carbon-download mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.backupDatabase') }}
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index dc5fe197..bd599ed6 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -1117,13 +1117,23 @@ export const enUS = {
       },
       erDiagram: {
         title: 'ER Diagram',
-        zoom: 'Zoom: {percentage}%',
+        viewMode: 'View',
+        zoom: '{percentage}%',
+        zoomIn: 'Zoom In',
+        zoomOut: 'Zoom Out',
+        allSchemas: 'All Schemas',
+        engineeringView: 'Engineering View',
         fitToScreen: 'Fit to Screen',
         searchPlaceholder: 'Filter tables...',
+        tablesCountBadge: '{count} tables',
+        tableView: 'Table View',
+        relationshipsCountBadge: '{count} relationships',
+        resetLayout: 'Reset Layout',
         largeSchemaWarning: 'This schema has {count} tables. Displaying all may be dense. Continue?',
         showAllColumns: 'Show All Columns ({count})',
         hideExtraColumns: 'Show Less',
         noForeignKeys: 'No foreign key relationships found',
+        openTable: 'Open Table Data',
         layoutDirection: 'Layout',
         layoutTopBottom: 'Top → Bottom',
         layoutLeftRight: 'Left → Right',
@@ -1557,6 +1567,7 @@ export const enUS = {
       newView: 'New View',
       newFunction: 'New Function',
       newProcedure: 'New Procedure',
+      showErDiagram: 'ER Diagram',
       backupDatabase: 'Backup Database',
       exportDatabase: 'Export Database',
       dropDatabase: 'Drop Database',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 18e8942a..741333e6 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -1117,13 +1117,23 @@ export const zhCN = {
       },
       erDiagram: {
         title: 'ER图表',
-        zoom: '缩放: {percentage}%',
+        viewMode: '视图',
+        zoom: '{percentage}%',
+        zoomIn: '放大',
+        zoomOut: '缩小',
+        allSchemas: '所有模式',
+        engineeringView: '工程视图',
         fitToScreen: '适应屏幕',
         searchPlaceholder: '过滤表...',
+        tablesCountBadge: '{count} 张表',
+        tableView: '表格视图',
+        relationshipsCountBadge: '{count} 个关系',
+        resetLayout: '重置布局',
         largeSchemaWarning: '此模式包含 {count} 张表，显示全部可能会过于密集，是否继续？',
         showAllColumns: '显示所有列 ({count})',
         hideExtraColumns: '显示更少',
         noForeignKeys: '未找到外键关系',
+        openTable: '打开表数据',
         layoutDirection: '布局方向',
         layoutTopBottom: '从上到下',
         layoutLeftRight: '从左到右',
@@ -1557,6 +1567,7 @@ export const zhCN = {
       newView: '新建视图',
       newFunction: '新建函数',
       newProcedure: '新建存储过程',
+      showErDiagram: 'ER 关系图',
       backupDatabase: '备份数据库',
       exportDatabase: '导出数据库',
       dropDatabase: '删除数据库',
diff --git a/src/pages/QueriesPage.vue b/src/pages/QueriesPage.vue
index 0b88d7b3..ded58c44 100644
--- a/src/pages/QueriesPage.vue
+++ b/src/pages/QueriesPage.vue
@@ -430,6 +430,14 @@ function handleShowErDiagram(database: string, schema?: string) {
     tabStore.openErDiagramTab(connId, database, schema)
 }
 
+function handleOpenTableFromErDiagram(tableName: string) {
+  const connId = getActiveConnectionId()
+  const tab = activeTab.value
+  if (!connId || !tab?.erDiagram)
+    return
+  tabStore.openTableViewTab(connId, tab.erDiagram.database, tableName, tab.erDiagram.schema)
+}
+
 function handleDropTable(table: TableInfo, database: string, schema?: string) {
   destructiveAction.value = { type: 'drop', table, database, schema }
   destructiveDialogOpen.value = true
@@ -691,6 +699,15 @@ function handleDatabaseAction(kind: string) {
     case 'exportDatabase':
       router.push('/transfer')
       break
+    case 'showErDiagram': {
+      const connId = getActiveConnectionId()
+      const db = selectedDatabase.value
+      // Database-level ER diagram: omit schema to show all tables across all schemas
+      if (connId && db) {
+        tabStore.openErDiagramTab(connId, db, undefined)
+      }
+      break
+    }
     default:
       toast.info(t('sidebar.notImplemented'))
   }
@@ -1025,6 +1042,7 @@ function closeResultPanel() {
             :database="activeTab.erDiagram.database"
             :schema="activeTab.erDiagram.schema"
             class="flex-1"
+            @open-table="handleOpenTableFromErDiagram"
           />
 
           <!-- Listing Tab (Views / Procedures / Functions) -->
@@ -1046,18 +1064,18 @@ function closeResultPanel() {
           <!-- Query editor area (shown for normal query tabs) -->
           <template v-else>
             <!-- Toolbar (DBX-style: compact h-9, colored icons, no constant bg) -->
-            <div class="h-9 shrink-0 border-b border-border bg-background/80 px-2 flex items-center gap-0.5 text-xs text-muted-foreground">
+            <div class="text-xs text-muted-foreground px-2 border-b border-border bg-background/80 flex shrink-0 gap-0.5 h-9 items-center">
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger as-child>
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-emerald-600 hover:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500/20 disabled:opacity-40"
+                      class="text-emerald-600 h-7 w-7 dark:text-emerald-400 hover:bg-emerald-500/10 disabled:opacity-40 dark:hover:bg-emerald-500/20"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId"
                       @click="executeQuery"
                     >
-                      <span class="i-lucide-play h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-play shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1072,12 +1090,12 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-violet-600 hover:bg-violet-500/10 dark:text-violet-400 dark:hover:bg-violet-500/20 disabled:opacity-40"
+                      class="text-violet-600 h-7 w-7 dark:text-violet-400 hover:bg-violet-500/10 disabled:opacity-40 dark:hover:bg-violet-500/20"
                       :class="{ '!text-emerald-600 !bg-emerald-500/10 !dark:bg-emerald-500/20': explainAnalyzeMode }"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId || activeTab.isExplaining"
                       @click="handleExplainQuery(explainAnalyzeMode)"
                     >
-                      <span class="i-lucide-line-chart h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-line-chart shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1091,12 +1109,12 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-muted-foreground hover:text-violet-600 hover:bg-violet-500/10 dark:hover:text-violet-400 dark:hover:bg-violet-500/20 disabled:opacity-40"
+                      class="text-muted-foreground h-7 w-7 hover:text-violet-600 hover:bg-violet-500/10 disabled:opacity-40 dark:hover:text-violet-400 dark:hover:bg-violet-500/20"
                       :class="explainAnalyzeMode ? '!text-violet-600 !bg-violet-100 dark:!text-violet-300 dark:!bg-violet-900/30' : ''"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId || activeTab.isExplaining"
                       @click="toggleExplainMode"
                     >
-                      <span class="i-lucide-activity h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-activity shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1105,7 +1123,7 @@ function closeResultPanel() {
                 </Tooltip>
               </TooltipProvider>
 
-              <div class="w-px h-4 bg-border mx-0.5" />
+              <div class="mx-0.5 bg-border h-4 w-px" />
 
               <TooltipProvider>
                 <Tooltip>
@@ -1113,11 +1131,11 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-amber-600 hover:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-500/20 disabled:opacity-40"
+                      class="text-amber-600 h-7 w-7 dark:text-amber-400 hover:bg-amber-500/10 disabled:opacity-40 dark:hover:bg-amber-500/20"
                       :disabled="!activeTab || activeTab.orphanFromConnectionId"
                       @click="handleToolbarFormat"
                     >
-                      <span class="i-lucide-align-left h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-align-left shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -1135,11 +1153,11 @@ function closeResultPanel() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      class="h-7 w-7 text-sky-600 hover:bg-sky-500/10 dark:text-sky-400 dark:hover:bg-sky-500/20 disabled:opacity-40"
+                      class="text-sky-600 h-7 w-7 dark:text-sky-400 hover:bg-sky-500/10 disabled:opacity-40 dark:hover:bg-sky-500/20"
                       :disabled="!activeTab || !activeTab.content.trim()"
                       @click="handleDownloadQuery"
                     >
-                      <span class="i-lucide-download h-3.5 w-3.5 shrink-0" />
+                      <span class="i-lucide-download shrink-0 h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>