diff --git a/packages/devtools-vite/src/app/components/chunks/Graph.vue b/packages/devtools-vite/src/app/components/chunks/Graph.vue
new file mode 100644
index 00000000..0112d4a6
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/chunks/Graph.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { Chunk, ChunkImport } from '@rolldown/debug'
+import type { SessionContext } from '~~/shared/types/data'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
+import { computed, nextTick, unref } from 'vue'
+import { createModuleGraph } from '~/composables/moduleGraph'
+
+const props = defineProps<{
+  session: SessionContext
+  chunks: ChunkInfo[]
+}>()
+
+const chunks = computed(() => props.chunks)
+
+type ChunkInfo = Chunk & {
+  id: string
+}
+createModuleGraph<ChunkInfo, ChunkImport>({
+  modules: chunks,
+  spacing: {
+    width: 320,
+    height: 55,
+    linkOffset: 15,
+    margin: 120,
+    gap: 80,
+  },
+  generateGraph: (options) => {
+    const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap } = options
+    return () => {
+      width.value = window.innerWidth
+      height.value = window.innerHeight
+
+      const root = hierarchy<ModuleGraphNode<ChunkInfo, ChunkImport> & { end?: boolean }>(
+        { module: { id: '~root' } } as any,
+        (parent) => {
+          if (`${parent.module?.id}` === '~root') {
+            chunks.value.forEach((x) => {
+              if (isFirstCalculateGraph.value) {
+                childToParentMap.set(x.id, '~root')
+              }
+            })
+            return chunks.value.map(x => ({
+              module: x,
+              expanded: !collapsedNodes.has(x.id),
+              hasChildren: false,
+            }))
+          }
+
+          if (collapsedNodes.has(`${parent.module?.id}`) || parent.end) {
+            return []
+          }
+
+          const nodes = parent.module.imports
+            .map((x): ModuleGraphNode<ChunkInfo, ChunkImport> & { end: boolean } | undefined => {
+              const module = modulesMap.value.get(`${x.chunk_id}`)
+              if (!module)
+                return undefined
+
+              if (isFirstCalculateGraph.value) {
+                childToParentMap.set(module.id, parent.module.id)
+              }
+
+              return {
+                module,
+                import: x,
+                expanded: !collapsedNodes.has(module.id),
+                hasChildren: false,
+                end: true,
+              }
+            })
+            .filter(x => x !== undefined)
+
+          return nodes
+        },
+      )
+
+      if (isFirstCalculateGraph.value) {
+        isFirstCalculateGraph.value = false
+      }
+
+      // Calculate the layout
+      const layout = tree<ModuleGraphNode<ChunkInfo, ChunkImport> & { end?: boolean }>()
+        .nodeSize([unref(spacing.height), unref(spacing.width) + unref(spacing.gap)])
+      layout(root)
+
+      const _nodes = root.descendants()
+
+      for (const node of _nodes) {
+        // Rotate the graph from top-down to left-right
+        [node.x, node.y] = [node.y! - unref(spacing.width), node.x!]
+
+        if (node.data.module.imports) {
+          node.data.hasChildren = node.data.module.imports.length > 0 && !node.data.end
+        }
+      }
+
+      // Offset the graph and adding margin
+      const minX = Math.min(..._nodes.map(n => n.x!))
+      const minY = Math.min(..._nodes.map(n => n.y!))
+      if (minX < unref(spacing.margin)) {
+        for (const node of _nodes) {
+          node.x! += Math.abs(minX) + unref(spacing.margin)
+        }
+      }
+      if (minY < unref(spacing.margin)) {
+        for (const node of _nodes) {
+          node.y! += Math.abs(minY) + unref(spacing.margin)
+        }
+      }
+
+      nodes.value = _nodes
+      nodesMap.clear()
+      for (const node of _nodes) {
+        nodesMap.set(`${node.data.module.id}`, node)
+      }
+      const _links = root.links()
+        .filter(x => `${x.source.data.module.id}` !== '~root')
+        .map((x): ModuleGraphLink<ChunkInfo, ChunkImport> => {
+          return {
+            ...x,
+            import: x.source.data.import,
+            id: `${x.source.data.module.id}|${x.target.data.module.id}`,
+          }
+        })
+      linksMap.clear()
+      for (const link of _links) {
+        linksMap.set(link.id, link)
+      }
+      links.value = _links
+
+      nextTick(() => {
+        width.value = (container.value!.scrollWidth / scale.value + unref(spacing.margin))
+        height.value = (container.value!.scrollHeight / scale.value + unref(spacing.margin))
+      })
+    }
+  },
+})
+</script>
+
+<template>
+  <DisplayModuleGraph
+    :session="session"
+    :modules="chunks"
+  >
+    <template #default="{ node }">
+      <div flex="~ items-center">
+        <span op50 font-mono w12>#{{ node.data.module.id }}</span>
+        <div flex="~ gap-2 items-center" :title="`Chunk #${node.data.module.id}`">
+          <div i-ph-shapes-duotone />
+          <div>{{ node.data.module.name || '[unnamed]' }}</div>
+          <DisplayBadge :text="node.data.module.reason" />
+        </div>
+        <div flex-auto />
+        <div flex="~ gap-1 items-center">
+          <div i-ph-package-duotone />
+          {{ node.data.module.modules.length }}
+        </div>
+      </div>
+    </template>
+  </DisplayModuleGraph>
+</template>
diff --git a/packages/devtools-vite/src/app/components/data/AssetRelationships.vue b/packages/devtools-vite/src/app/components/data/AssetRelationships.vue
index 32cc60b7..16e1f893 100644
--- a/packages/devtools-vite/src/app/components/data/AssetRelationships.vue
+++ b/packages/devtools-vite/src/app/components/data/AssetRelationships.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
 import type { Asset as AssetInfo } from '@rolldown/debug'
-import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
-import { linkHorizontal, linkVertical } from 'd3-shape'
+import type { HierarchyNode } from 'd3-hierarchy'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
 import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+import { generateModuleGraphLink, getModuleGraphLinkColor } from '~/composables/moduleGraph'
 
 const props = defineProps<{
   importers?: AssetInfo[]
   imports?: AssetInfo[]
 }>()
 
-interface Node {
-  asset: AssetInfo
-}
-
-type Link = HierarchyLink<Node> & {
-  id: string
-}
-
 type LinkPoint = 'importer-start' | 'importer-end' | 'import-start' | 'import-end'
 
 const MAX_LINKS = 20
@@ -32,7 +25,7 @@ const SPACING = {
 }
 
 const container = useTemplateRef<HTMLDivElement>('container')
-const links = shallowRef<Link[]>([])
+const links = shallowRef<ModuleGraphLink<AssetInfo, AssetInfo>[]>([])
 
 const normalizedMaxLinks = computed(() => {
   return Math.min(Math.max(props.importers?.length || 0, props.imports?.length || 0), MAX_LINKS)
@@ -54,31 +47,6 @@ const importsVerticalOffset = computed(() => {
   return Math.min(offset, nodesHeight.value / 2)
 })
 
-const createLinkHorizontal = linkHorizontal()
-  .x(d => d[0])
-  .y(d => d[1])
-
-const createLinkVertical = linkVertical()
-  .x(d => d[0])
-  .y(d => d[1])
-
-function generateLink(link: Link) {
-  if (link.target.x! <= link.source.x!) {
-    return createLinkVertical({
-      source: [link.source.x!, link.source.y!],
-      target: [link.target.x!, link.target.y!],
-    })
-  }
-  return createLinkHorizontal({
-    source: [link.source.x!, link.source.y!],
-    target: [link.target.x!, link.target.y!],
-  })
-}
-
-function getLinkColor(_link: Link) {
-  return 'stroke-#8882'
-}
-
 const dotNodeMargin = computed(() => `${nodesHeight.value / 2 - SPACING.dot / 2}px ${SPACING.dotOffset}px 0  ${props.importers?.length ? SPACING.dotOffset : 0}px`)
 const linkStartX = computed(() => props.importers?.length ? SPACING.width + SPACING.marginX : SPACING.marginX)
 const dotStartX = computed(() => props.importers?.length ? linkStartX.value + SPACING.dotOffset : linkStartX.value)
@@ -120,11 +88,11 @@ function generateLinks() {
         source: {
           x: calculateLinkX('importer-start'),
           y: calculateLinkY('importer-start', i),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
         target: {
           x: calculateLinkX('importer-end'),
           y: calculateLinkY('importer-end'),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
       }
     })
     links.value.push(..._importersLinks)
@@ -138,11 +106,11 @@ function generateLinks() {
         source: {
           x: calculateLinkX('import-start'),
           y: calculateLinkY('import-start'),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
         target: {
           x: calculateLinkX('import-end'),
           y: calculateLinkY('import-end', i),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<AssetInfo, AssetInfo>>,
       }
     })
     links.value.push(..._importsLinks)
@@ -255,8 +223,8 @@ onMounted(() => {
         <path
           v-for="link of links"
           :key="link.id"
-          :d="generateLink(link)!"
-          :class="getLinkColor(link)"
+          :d="generateModuleGraphLink<AssetInfo, AssetInfo>(link)!"
+          :class="getModuleGraphLinkColor<AssetInfo, AssetInfo>(link)"
           fill="none"
         />
       </g>
diff --git a/packages/devtools-vite/src/app/components/data/ModuleImportRelationships.vue b/packages/devtools-vite/src/app/components/data/ModuleImportRelationships.vue
index c44272d1..49f11830 100644
--- a/packages/devtools-vite/src/app/components/data/ModuleImportRelationships.vue
+++ b/packages/devtools-vite/src/app/components/data/ModuleImportRelationships.vue
@@ -1,24 +1,15 @@
 <script setup lang="ts">
-import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
+import type { HierarchyNode } from 'd3-hierarchy'
 import type { ModuleImport, ModuleInfo, ModuleListItem, SessionContext } from '~~/shared/types'
-import { linkHorizontal, linkVertical } from 'd3-shape'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
 import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+import { generateModuleGraphLink, getModuleGraphLinkColor } from '~/composables/moduleGraph'
 
 const props = defineProps<{
   module: ModuleInfo
   session: SessionContext
 }>()
 
-interface Node {
-  module: ModuleListItem
-  import?: ModuleImport
-}
-
-type Link = HierarchyLink<Node> & {
-  id: string
-  import?: ModuleImport
-}
-
 type LinkPoint = 'importer-start' | 'importer-end' | 'import-start' | 'import-end'
 
 const MAX_LINKS = 20
@@ -31,10 +22,11 @@ const SPACING = {
   margin: 8,
   dot: 16,
   dotOffset: 80,
+  linkOffset: 0,
 }
 
 const container = useTemplateRef<HTMLDivElement>('container')
-const links = shallowRef<Link[]>([])
+const links = shallowRef<ModuleGraphLink<ModuleListItem, ModuleImport>[]>([])
 
 const modulesMap = computed(() => {
   const map = new Map<string, ModuleListItem>()
@@ -66,31 +58,6 @@ const importsVerticalOffset = computed(() => {
   return Math.min(offset, nodesHeight.value / 2)
 })
 
-const createLinkHorizontal = linkHorizontal()
-  .x(d => d[0])
-  .y(d => d[1])
-
-const createLinkVertical = linkVertical()
-  .x(d => d[0])
-  .y(d => d[1])
-
-function generateLink(link: Link) {
-  if (link.target.x! <= link.source.x!) {
-    return createLinkVertical({
-      source: [link.source.x!, link.source.y!],
-      target: [link.target.x!, link.target.y!],
-    })
-  }
-  return createLinkHorizontal({
-    source: [link.source.x!, link.source.y!],
-    target: [link.target.x!, link.target.y!],
-  })
-}
-
-function getLinkColor(_link: Link) {
-  return 'stroke-#8882'
-}
-
 const dotNodeMargin = computed(() => `${nodesHeight.value / 2 - SPACING.dot / 2}px ${SPACING.dotOffset}px 0  ${importers.value?.length ? SPACING.dotOffset : 0}px`)
 const linkStartX = computed(() => importers.value?.length ? SPACING.width + SPACING.marginX : SPACING.marginX)
 const dotStartX = computed(() => importers.value?.length ? linkStartX.value + SPACING.dotOffset : linkStartX.value)
@@ -131,11 +98,11 @@ function generateLinks() {
         source: {
           x: calculateLinkX('importer-start'),
           y: calculateLinkY('importer-start', i),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<ModuleListItem, ModuleImport>>,
         target: {
           x: calculateLinkX('importer-end'),
           y: calculateLinkY('importer-end'),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<ModuleListItem, ModuleImport>>,
       }
     })
     links.value.push(..._importersLinks)
@@ -148,11 +115,11 @@ function generateLinks() {
         source: {
           x: calculateLinkX('import-start'),
           y: calculateLinkY('import-start'),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<ModuleListItem, ModuleImport>>,
         target: {
           x: calculateLinkX('import-end'),
           y: calculateLinkY('import-end', i),
-        } as HierarchyNode<Node>,
+        } as HierarchyNode<ModuleGraphNode<ModuleListItem, ModuleImport>>,
       }
     })
     links.value.push(..._importsLinks)
@@ -250,8 +217,8 @@ onMounted(() => {
         <path
           v-for="link of links"
           :key="link.id"
-          :d="generateLink(link)!"
-          :class="getLinkColor(link)"
+          :d="generateModuleGraphLink<ModuleListItem, ModuleImport>(link)!"
+          :class="getModuleGraphLinkColor<ModuleListItem, ModuleImport>(link)"
           :stroke-dasharray="link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
           fill="none"
         />
diff --git a/packages/devtools-vite/src/app/components/display/ModuleGraph.vue b/packages/devtools-vite/src/app/components/display/ModuleGraph.vue
new file mode 100644
index 00000000..d84f429e
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/display/ModuleGraph.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts" generic="T extends { id: string, imports: unknown[] }, I">
+import type { SessionContext } from '~~/shared/types'
+import { onMounted, unref, watch } from 'vue'
+import { generateModuleGraphLink, getModuleGraphLinkColor, useGraphDraggingScroll, useGraphZoom, useModuleGraph, useToggleGraphNodeExpanded } from '~/composables/moduleGraph'
+
+const props = defineProps<{
+  modules: T[]
+  session: SessionContext
+}>()
+
+const { isFirstCalculateGraph, childToParentMap, collapsedNodes, calculateGraph, container, width, height, scale, nodes, links, spacing, nodesRefMap } = useModuleGraph()
+const { isGrabbing, init: initGraphDraggingScroll } = useGraphDraggingScroll()
+const { zoomIn, zoomOut, ZOOM_MIN, ZOOM_MAX } = useGraphZoom()
+const { isGraphNodeToggling, toggleNode, expandAll, collapseAll } = useToggleGraphNodeExpanded({
+  modules: props.modules,
+})
+
+onMounted(() => {
+  initGraphDraggingScroll()
+
+  watch(
+    () => props.modules,
+    () => {
+      isFirstCalculateGraph.value = true
+      collapsedNodes.clear()
+      childToParentMap.clear()
+      calculateGraph()
+    },
+    { immediate: true },
+  )
+})
+</script>
+
+<template>
+  <div
+    ref="container"
+    w-full h-screen of-scroll relative select-none
+    :class="isGrabbing ? 'cursor-grabbing' : ''"
+  >
+    <div
+      :style="{
+        width: `${width * scale}px`,
+        height: `${height * scale}px`,
+      }"
+    >
+      <div
+        flex="~ items-center justify-center"
+        :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
+      >
+        <div
+          absolute left-0 top-0
+          :style="{
+            width: `${width}px`,
+            height: `${height}px`,
+          }"
+          class="bg-dots"
+        />
+        <svg pointer-events-none absolute left-0 top-0 z-graph-link :width="width" :height="height">
+          <g>
+            <template v-for="link of links" :key="link.id">
+              <slot name="link" :link="link" :d="generateModuleGraphLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
+                <path
+                  :key="link.id"
+                  :d="generateModuleGraphLink<T, I>(link, spacing)!"
+                  :class="getModuleGraphLinkColor<T, I>(link)"
+                  fill="none"
+                />
+              </slot>
+            </template>
+          </g>
+        </svg>
+        <template
+          v-for="node of nodes"
+          :key="node.data.module.id"
+        >
+          <template v-if="node.data.module.id !== '~root'">
+            <div
+              absolute
+              class="group z-graph-node flex gap-1 items-center"
+              :style="{
+                left: `${node.x}px`,
+                top: `${node.y}px`,
+                transform: 'translate(-50%, -50%)',
+              }"
+            >
+              <div
+                flex="~ items-center gap-1"
+                bg-glass
+                border="~ base rounded"
+                class="group-hover:bg-active block px2 p1"
+                :style="{
+                  minWidth: `${unref(spacing.width)}px`,
+                  maxWidth: `${unref(spacing.width)}px`,
+                  maxHeight: `${unref(spacing.height)}px`,
+                  overflow: 'hidden',
+                  transition: 'all 0.3s ease',
+                }"
+              >
+                <slot :node="node" :nodes-ref-map="nodesRefMap" />
+              </div>
+
+              <!-- Expand/Collapse Button -->
+              <div class="w-4">
+                <button
+                  v-if="node.data.hasChildren"
+                  w-4
+                  h-4
+                  rounded-full
+                  flex="items-center justify-center"
+                  text-xs
+                  border="~ active"
+                  class="flex cursor-pointer z-graph-node-active bg-base"
+                  :disabled="isGraphNodeToggling"
+                  :class="{ 'cursor-not-allowed': isGraphNodeToggling, 'hover:bg-active': !isGraphNodeToggling }"
+                  :title="node.data.expanded ? 'Collapse' : 'Expand'"
+                  @click.stop="toggleNode(node.data.module.id)"
+                >
+                  <div
+                    class="text-primary h-4"
+                    :class="[
+                      node.data.expanded ? 'i-ph-minus' : 'i-ph-plus',
+                    ]"
+                    transition="transform duration-200"
+                  />
+                </button>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+    <div
+      fixed right-6 bottom-6 z-panel-nav flex="~ col gap-2 items-center"
+    >
+      <div w-10 flex="~ items-center justify-center">
+        <DisplayTimeoutView :content="`${Math.round(scale * 100)}%`" class="text-sm" />
+      </div>
+
+      <div bg-glass rounded-full border border-base shadow flex="~ col gap-1 p1">
+        <button
+          v-tooltip.left="'Expand All'"
+          w-10 h-10 rounded-full hover:bg-active op-fade
+          hover:op100 flex="~ items-center justify-center"
+          :disabled="isGraphNodeToggling"
+          :class="{ 'op50 cursor-not-allowed': isGraphNodeToggling, 'hover:bg-active': !isGraphNodeToggling }"
+          title="Expand All"
+          @click="expandAll()"
+        >
+          <div class="i-carbon:expand-categories" />
+        </button>
+        <button
+          v-tooltip.left="'Collapse All'"
+          w-10 h-10 rounded-full hover:bg-active op-fade
+          hover:op100 flex="~ items-center justify-center"
+          :disabled="isGraphNodeToggling"
+          :class="{ 'op50 cursor-not-allowed': isGraphNodeToggling, 'hover:bg-active': !isGraphNodeToggling }"
+          title="Collapse All"
+          @click="collapseAll()"
+        >
+          <div class="i-carbon:collapse-categories" />
+        </button>
+
+        <div border="t base" my1 />
+
+        <button
+          v-tooltip.left="'Zoom In (Ctrl + =)'"
+          :disabled="scale >= ZOOM_MAX"
+          w-10 h-10 rounded-full hover:bg-active op-fade
+          hover:op100 disabled:op20 disabled:bg-none
+          disabled:cursor-not-allowed
+          flex="~ items-center justify-center"
+          title="Zoom In (Ctrl + =)"
+          @click="zoomIn()"
+        >
+          <div i-ph-magnifying-glass-plus-duotone />
+        </button>
+        <button
+          v-tooltip.left="'Zoom Out (Ctrl + -)'"
+          :disabled="scale <= ZOOM_MIN"
+          w-10 h-10 rounded-full hover:bg-active op-fade hover:op100
+          disabled:op20 disabled:bg-none disabled:cursor-not-allowed
+          flex="~ items-center justify-center"
+          title="Zoom Out (Ctrl + -)"
+          @click="zoomOut()"
+        >
+          <div i-ph-magnifying-glass-minus-duotone />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools-vite/src/app/components/modules/Graph.vue b/packages/devtools-vite/src/app/components/modules/Graph.vue
index f32485c0..a2258206 100644
--- a/packages/devtools-vite/src/app/components/modules/Graph.vue
+++ b/packages/devtools-vite/src/app/components/modules/Graph.vue
@@ -1,547 +1,183 @@
 <script setup lang="ts">
-import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
 import type { ModuleImport, ModuleListItem, SessionContext } from '~~/shared/types'
-import { onKeyPressed, useEventListener, useMagicKeys } from '@vueuse/core'
-import { hierarchy, tree } from 'd3-hierarchy'
-import { linkHorizontal, linkVertical } from 'd3-shape'
-import { computed, nextTick, onMounted, reactive, ref, shallowReactive, shallowRef, useTemplateRef, watch } from 'vue'
-import { useZoomElement } from '~/composables/zoomElement'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
+import { computed, nextTick, unref } from 'vue'
+import { createModuleGraph } from '~/composables/moduleGraph'
 
 const props = defineProps<{
-  session: SessionContext
   modules: ModuleListItem[]
+  session: SessionContext
 }>()
 
-interface Node {
-  module: ModuleListItem
-  import?: ModuleImport
-  expanded?: boolean
-  hasChildren: boolean
-}
-
-type Link = HierarchyLink<Node> & {
-  id: string
-  import?: ModuleImport
-}
-
-const graphRender = ref<'normal' | 'mini'>('normal')
-
-const SPACING = reactive({
-  width: computed(() => graphRender.value === 'normal' ? 400 : 10),
-  height: computed(() => graphRender.value === 'normal' ? 55 : 20),
-  linkOffset: computed(() => graphRender.value === 'normal' ? 20 : 0),
-  margin: computed(() => 800),
-  gap: computed(() => graphRender.value === 'normal' ? 150 : 100),
-})
-
-const container = useTemplateRef<HTMLDivElement>('container')
-const isGrabbing = ref(false)
-const width = ref(window.innerWidth)
-const height = ref(window.innerHeight)
-const nodesRefMap = shallowReactive(new Map<string, HTMLDivElement>())
-
-const isUpdating = ref(false)
-const isFirstCalculateGraph = ref(true)
-const collapsedNodes = shallowReactive(new Set<string>())
-const childToParentMap = shallowReactive(new Map<string, string>())
-
-const nodes = shallowRef<HierarchyNode<Node>[]>([])
-const links = shallowRef<Link[]>([])
-const nodesMap = shallowReactive(new Map<string, HierarchyNode<Node>>())
-const linksMap = shallowReactive(new Map<string, Link>())
-
-const ZOOM_MIN = 0.4
-const ZOOM_MAX = 2
-const { control } = useMagicKeys()
-const { scale, zoomIn, zoomOut } = useZoomElement(container, {
-  wheel: control,
-  minScale: ZOOM_MIN,
-  maxScale: ZOOM_MAX,
-})
-
-onKeyPressed(['-', '_'], (e) => {
-  if (e.ctrlKey)
-    zoomOut()
-})
-
-onKeyPressed(['=', '+'], (e) => {
-  if (e.ctrlKey)
-    zoomIn()
-})
+const modules = computed(() => props.modules)
+
+createModuleGraph<ModuleListItem, ModuleImport>({
+  modules,
+  spacing: {
+    width: 400,
+    height: 55,
+    linkOffset: 20,
+    margin: 800,
+    gap: 150,
+  },
+  generateGraph: (options) => {
+    const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap, focusOn } = options
+    const rootModules = computed(() => {
+      return modules.value.filter(x => x.importers.length === 0)
+    })
 
-const modulesMap = computed(() => {
-  const map = new Map<string, ModuleListItem>()
-  for (const module of props.modules) {
-    map.set(module.id, module)
-  }
-  return map
-})
+    return (focusOnFirstRootNode = true) => {
+      width.value = window.innerWidth
+      height.value = window.innerHeight
+
+      const seen = new Set<ModuleListItem>()
+      const root = hierarchy<ModuleGraphNode<ModuleListItem, ModuleImport>>(
+        { module: { id: '~root' } } as any,
+        (parent) => {
+          if (parent.module.id === '~root') {
+            rootModules.value.forEach((x) => {
+              seen.add(x)
+
+              if (isFirstCalculateGraph.value) {
+                childToParentMap.set(x.id, '~root')
+              }
+            })
+            return rootModules.value.map(x => ({
+              module: x,
+              expanded: !collapsedNodes.has(x.id),
+              hasChildren: false,
+            }))
+          }
 
-const rootModules = computed(() => {
-  return props.modules.filter(x => x.importers.length === 0)
-})
+          if (collapsedNodes.has(parent.module.id)) {
+            return []
+          }
 
-const createLinkHorizontal = linkHorizontal()
-  .x(d => d[0])
-  .y(d => d[1])
+          const modules = parent.module.imports
+            .map((x): ModuleGraphNode<ModuleListItem, ModuleImport> | undefined => {
+              const module = modulesMap.value.get(x.module_id)
+              if (!module)
+                return undefined
+              if (seen.has(module))
+                return undefined
+
+              // Check if the module is a child of the current parent
+              if (childToParentMap.has(module.id) && childToParentMap.get(module.id) !== parent.module.id)
+                return undefined
+
+              seen.add(module)
+
+              if (isFirstCalculateGraph.value) {
+                childToParentMap.set(module.id, parent.module.id)
+              }
+
+              return {
+                module,
+                import: x,
+                expanded: !collapsedNodes.has(module.id),
+                hasChildren: false,
+              }
+            })
+            .filter(x => x !== undefined)
+
+          return modules
+        },
+      )
+
+      if (isFirstCalculateGraph.value) {
+        isFirstCalculateGraph.value = false
+      }
 
-const createLinkVertical = linkVertical()
-  .x(d => d[0])
-  .y(d => d[1])
+      // Calculate the layout
+      const layout = tree<ModuleGraphNode<ModuleListItem, ModuleImport>>()
+        .nodeSize([unref(spacing.height), unref(spacing.width) + unref(spacing.gap)])
+      layout(root)
 
-function calculateGraph(focusOnFirstRooeNode = true) {
-  // Unset the canvas size, and recalculate again after nodes are rendered
-  width.value = window.innerWidth
-  height.value = window.innerHeight
+      const _nodes = root.descendants()
 
-  const seen = new Set<ModuleListItem>()
-  const root = hierarchy<Node>(
-    { module: { id: '~root' } } as any,
-    (parent) => {
-      if (parent.module.id === '~root') {
-        rootModules.value.forEach((x) => {
-          seen.add(x)
+      for (const node of _nodes) {
+        // Rotate the graph from top-down to left-right
+        [node.x, node.y] = [node.y! - unref(spacing.width), node.x!]
 
-          if (isFirstCalculateGraph.value) {
-            childToParentMap.set(x.id, '~root')
-          }
-        })
-        return rootModules.value.map(x => ({
-          module: x,
-          expanded: !collapsedNodes.has(x.id),
-          hasChildren: false,
-        }))
+        if (node.data.module.imports) {
+          node.data.hasChildren = node.data.module.imports
+            ?.filter(subNode => childToParentMap.get(subNode.module_id) === node.data.module.id)
+            .length > 0
+        }
       }
 
-      if (collapsedNodes.has(parent.module.id)) {
-        return []
+      // Offset the graph and adding margin
+      const minX = Math.min(..._nodes.map(n => n.x!))
+      const minY = Math.min(..._nodes.map(n => n.y!))
+      if (minX < unref(spacing.margin)) {
+        for (const node of _nodes) {
+          node.x! += Math.abs(minX) + unref(spacing.margin)
+        }
+      }
+      if (minY < unref(spacing.margin)) {
+        for (const node of _nodes) {
+          node.y! += Math.abs(minY) + unref(spacing.margin)
+        }
       }
 
-      const modules = parent.module.imports
-        .map((x): Node | undefined => {
-          const module = modulesMap.value.get(x.module_id)
-          if (!module)
-            return undefined
-          if (seen.has(module))
-            return undefined
-
-          // Check if the module is a child of the current parent
-          if (childToParentMap.has(module.id) && childToParentMap.get(module.id) !== parent.module.id)
-            return undefined
-
-          seen.add(module)
-
-          if (isFirstCalculateGraph.value) {
-            childToParentMap.set(module.id, parent.module.id)
-          }
-
+      nodes.value = _nodes
+      nodesMap.clear()
+      for (const node of _nodes) {
+        nodesMap.set(node.data.module.id, node)
+      }
+      const _links = root.links()
+        .filter(x => x.source.data.module.id !== '~root')
+        .map((x): ModuleGraphLink<ModuleListItem, ModuleImport> => {
           return {
-            module,
-            import: x,
-            expanded: !collapsedNodes.has(module.id),
-            hasChildren: false,
+            ...x,
+            import: x.source.data.import,
+            id: `${x.source.data.module.id}|${x.target.data.module.id}`,
           }
         })
-        .filter(x => x !== undefined)
-
-      return modules
-    },
-  )
-
-  if (isFirstCalculateGraph.value) {
-    isFirstCalculateGraph.value = false
-  }
-
-  // Calculate the layout
-  const layout = tree<Node>()
-    .nodeSize([SPACING.height, SPACING.width + SPACING.gap])
-  layout(root)
-
-  const _nodes = root.descendants()
-
-  for (const node of _nodes) {
-    // Rotate the graph from top-down to left-right
-    [node.x, node.y] = [node.y! - SPACING.width, node.x!]
-
-    if (node.data.module.imports) {
-      node.data.hasChildren = node.data.module.imports
-        ?.filter(subNode => childToParentMap.get(subNode.module_id) === node.data.module.id)
-        .length > 0
-    }
-  }
-
-  // Offset the graph and adding margin
-  const minX = Math.min(..._nodes.map(n => n.x!))
-  const minY = Math.min(..._nodes.map(n => n.y!))
-  if (minX < SPACING.margin) {
-    for (const node of _nodes) {
-      node.x! += Math.abs(minX) + SPACING.margin
-    }
-  }
-  if (minY < SPACING.margin) {
-    for (const node of _nodes) {
-      node.y! += Math.abs(minY) + SPACING.margin
-    }
-  }
 
-  nodes.value = _nodes
-  nodesMap.clear()
-  for (const node of _nodes) {
-    nodesMap.set(node.data.module.id, node)
-  }
-  const _links = root.links()
-    .filter(x => x.source.data.module.id !== '~root')
-    .map((x): Link => {
-      return {
-        ...x,
-        import: x.source.data.import,
-        id: `${x.source.data.module.id}|${x.target.data.module.id}`,
+      linksMap.clear()
+      for (const link of _links) {
+        linksMap.set(link.id, link)
       }
-    })
-  linksMap.clear()
-  for (const link of _links) {
-    linksMap.set(link.id, link)
-  }
-  links.value = _links
+      links.value = _links
 
-  nextTick(() => {
-    width.value = (container.value!.scrollWidth / scale.value + SPACING.margin)
-    height.value = (container.value!.scrollHeight / scale.value + SPACING.margin)
-    const moduleId = rootModules.value?.[0]?.id
-    if (focusOnFirstRooeNode && moduleId) {
       nextTick(() => {
-        focusOn(moduleId, false)
+        width.value = (container.value!.scrollWidth / scale.value + unref(spacing.margin))
+        height.value = (container.value!.scrollHeight / scale.value + unref(spacing.margin))
+        const moduleId = rootModules.value?.[0]?.id
+        if (focusOnFirstRootNode && moduleId) {
+          nextTick(() => {
+            focusOn(moduleId, false)
+          })
+        }
       })
     }
-  })
-}
-
-function focusOn(id: string, animated = true) {
-  const el = nodesRefMap.get(id)
-  el?.scrollIntoView({
-    block: 'center',
-    inline: 'center',
-    behavior: animated ? 'smooth' : 'instant',
-  })
-}
-
-function adjustScrollPositionAfterToggle(id: string, beforePosition: { x: number, y: number }) {
-  // Ensure this runs after the nextTick inside calculateGraph completes (width and height are computed)
-  nextTick(() => {
-    nextTick(() => {
-      const newNode = nodesRefMap.get(id)
-
-      if (newNode && beforePosition && container.value) {
-        const containerRect = container.value.getBoundingClientRect()
-        const newRect = newNode.getBoundingClientRect()
-
-        const viewportDiffX = newRect.left - containerRect.left - beforePosition.x
-        const viewportDiffY = newRect.top - containerRect.top - beforePosition.y
-
-        container.value.scrollLeft += viewportDiffX
-        container.value.scrollTop += viewportDiffY
-      }
-    })
-  })
-}
-
-function toggleNode(id: string) {
-  if (isUpdating.value)
-    return
-  isUpdating.value = true
-
-  const node = nodesRefMap.get(id)
-  let beforePosition: null | { x: number, y: number } = null
-
-  // Record position relative to the scroll container to avoid drift after reflow
-  if (node && container.value) {
-    const containerRect = container.value.getBoundingClientRect()
-    const rect = node.getBoundingClientRect()
-    beforePosition = {
-      x: rect.left - containerRect.left,
-      y: rect.top - containerRect.top,
-    }
-  }
-
-  if (collapsedNodes.has(id)) {
-    collapsedNodes.delete(id)
-  }
-  else {
-    collapsedNodes.add(id)
-  }
-
-  calculateGraph(false)
-
-  // Adjust scroll position after layout changes
-  if (beforePosition) {
-    adjustScrollPositionAfterToggle(id, beforePosition)
-  }
-
-  isUpdating.value = false
-}
-
-function expandAll() {
-  if (isUpdating.value)
-    return
-
-  isUpdating.value = true
-
-  collapsedNodes.clear()
-  calculateGraph()
-
-  setTimeout(() => {
-    isUpdating.value = false
-  }, 300)
-}
-
-function collapseAll() {
-  if (isUpdating.value)
-    return
-
-  isUpdating.value = true
-
-  props.modules.forEach((module) => {
-    if (module.imports.length > 0) {
-      collapsedNodes.add(module.id)
-    }
-  })
-  calculateGraph()
-
-  setTimeout(() => {
-    isUpdating.value = false
-  }, 300)
-}
-
-function generateLink(link: Link) {
-  if (link.target.x! <= link.source.x!) {
-    return createLinkVertical({
-      source: [link.source.x! + SPACING.width / 2 - SPACING.linkOffset, link.source.y!],
-      target: [link.target.x! - SPACING.width / 2 + SPACING.linkOffset, link.target.y!],
-    })
-  }
-  return createLinkHorizontal({
-    source: [link.source.x! + SPACING.width / 2 - SPACING.linkOffset, link.source.y!],
-    target: [link.target.x! - SPACING.width / 2 + SPACING.linkOffset, link.target.y!],
-  })
-}
-
-function getLinkColor(_link: Link) {
-  return 'stroke-#8885'
-}
-
-function handleDraggingScroll() {
-  let x = 0
-  let y = 0
-  const SCROLLBAR_THICKNESS = 20
-
-  useEventListener(container, 'mousedown', (e) => {
-    // prevent dragging when clicking on scrollbar
-    const rect = container.value!.getBoundingClientRect()
-    const distRight = rect.right - e.clientX
-    const distBottom = rect.bottom - e.clientY
-
-    if (distRight <= SCROLLBAR_THICKNESS || distBottom <= SCROLLBAR_THICKNESS) {
-      return
-    }
-
-    isGrabbing.value = true
-    x = container.value!.scrollLeft + e.pageX
-    y = container.value!.scrollTop + e.pageY
-  })
-  useEventListener(container, 'contextmenu', e => e.preventDefault())
-  useEventListener('mouseleave', () => isGrabbing.value = false)
-  useEventListener('mouseup', () => isGrabbing.value = false)
-  useEventListener('mousemove', (e) => {
-    if (!isGrabbing.value)
-      return
-    e.preventDefault()
-    container.value!.scrollLeft = x - e.pageX
-    container.value!.scrollTop = y - e.pageY
-  })
-}
-
-onMounted(() => {
-  handleDraggingScroll()
-
-  watch(
-    () => props.modules,
-    () => {
-      isFirstCalculateGraph.value = true
-      collapsedNodes.clear()
-      childToParentMap.clear()
-      calculateGraph()
-    },
-    { immediate: true },
-  )
-
-  watch(
-    () => graphRender.value,
-    () => calculateGraph(),
-  )
+  },
 })
 </script>
 
 <template>
-  <div
-    ref="container"
-    w-full h-screen of-scroll relative select-none
-    :class="isGrabbing ? 'cursor-grabbing' : ''"
+  <DisplayModuleGraph
+    :session="session"
+    :modules="modules"
   >
-    <div
-      :style="{
-        width: `${width * scale}px`,
-        height: `${height * scale}px`,
-      }"
-    >
-      <!-- Make this <div> in order to expand the scroll bar -->
-      <div
-        flex="~ items-center justify-center"
-        :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
-      >
-        <div
-          absolute left-0 top-0
-          :style="{
-            width: `${width}px`,
-            height: `${height}px`,
-          }"
-          class="bg-dots"
-        />
-        <svg pointer-events-none absolute left-0 top-0 z-graph-link :width="width" :height="height">
-          <g>
-            <path
-              v-for="link of links"
-              :key="link.id"
-              :d="generateLink(link)!"
-              :class="getLinkColor(link)"
-              :stroke-dasharray="link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
-              fill="none"
-            />
-          </g>
-        </svg>
-        <template
-          v-for="node of nodes"
-          :key="node.data.module.id"
-        >
-          <template v-if="node.data.module.id !== '~root'">
-            <div
-              absolute
-              class="group z-graph-node flex gap-1 items-center"
-              :style="{
-                left: `${node.x}px`,
-                top: `${node.y}px`,
-                transform: 'translate(-50%, -50%)',
-              }"
-            >
-              <div
-                flex="~ items-center gap-1"
-                bg-glass
-                border="~ base rounded"
-                class="group-hover:bg-active block px2 p1"
-                :style="{
-                  minWidth: graphRender === 'normal' ? `${SPACING.width}px` : undefined,
-                  maxWidth: '400px',
-                  maxHeight: '50px',
-                  overflow: 'hidden',
-                  transition: 'all 0.3s ease',
-                }"
-              >
-                <DisplayModuleId
-                  :id="node.data.module.id"
-                  :ref="(el: any) => nodesRefMap.set(node.data.module.id, el?.$el)"
-                  :link="true"
-                  :session="session"
-                  :minimal="true"
-                  flex="1"
-                />
-              </div>
-
-              <!-- Expand/Collapse Button -->
-              <div class="w-4">
-                <button
-                  v-if="node.data.hasChildren"
-                  w-4
-                  h-4
-                  rounded-full
-                  flex="items-center justify-center"
-                  text-xs
-                  border="~ active"
-                  class="flex cursor-pointer z-graph-node-active bg-base"
-                  :disabled="isUpdating"
-                  :class="{ 'cursor-not-allowed': isUpdating, 'hover:bg-active': !isUpdating }"
-                  :title="node.data.expanded ? 'Collapse' : 'Expand'"
-                  @click.stop="toggleNode(node.data.module.id)"
-                >
-                  <div
-                    class="text-primary h-4"
-                    :class="[
-                      node.data.expanded ? 'i-ph-minus' : 'i-ph-plus',
-                    ]"
-                    transition="transform duration-200"
-                  />
-                </button>
-              </div>
-            </div>
-          </template>
-        </template>
-      </div>
-    </div>
-    <div
-      fixed right-6 bottom-6 z-panel-nav flex="~ col gap-2 items-center"
-    >
-      <div w-10 flex="~ items-center justify-center">
-        <DisplayTimeoutView :content="`${Math.round(scale * 100)}%`" class="text-sm" />
-      </div>
-
-      <div bg-glass rounded-full border border-base shadow flex="~ col gap-1 p1">
-        <button
-          v-tooltip.left="'Expand All'"
-          w-10 h-10 rounded-full hover:bg-active op-fade
-          hover:op100 flex="~ items-center justify-center"
-          :disabled="isUpdating"
-          :class="{ 'op50 cursor-not-allowed': isUpdating, 'hover:bg-active': !isUpdating }"
-          title="Expand All"
-          @click="expandAll()"
-        >
-          <div class="i-carbon:expand-categories" />
-        </button>
-        <button
-          v-tooltip.left="'Collapse All'"
-          w-10 h-10 rounded-full hover:bg-active op-fade
-          hover:op100 flex="~ items-center justify-center"
-          :disabled="isUpdating"
-          :class="{ 'op50 cursor-not-allowed': isUpdating, 'hover:bg-active': !isUpdating }"
-          title="Collapse All"
-          @click="collapseAll()"
-        >
-          <div class="i-carbon:collapse-categories" />
-        </button>
-
-        <div border="t base" my1 />
-
-        <button
-          v-tooltip.left="'Zoom In (Ctrl + =)'"
-          :disabled="scale >= ZOOM_MAX"
-          w-10 h-10 rounded-full hover:bg-active op-fade
-          hover:op100 disabled:op20 disabled:bg-none
-          disabled:cursor-not-allowed
-          flex="~ items-center justify-center"
-          title="Zoom In (Ctrl + =)"
-          @click="zoomIn()"
-        >
-          <div i-ph-magnifying-glass-plus-duotone />
-        </button>
-        <button
-          v-tooltip.left="'Zoom Out (Ctrl + -)'"
-          :disabled="scale <= ZOOM_MIN"
-          w-10 h-10 rounded-full hover:bg-active op-fade hover:op100
-          disabled:op20 disabled:bg-none disabled:cursor-not-allowed
-          flex="~ items-center justify-center"
-          title="Zoom Out (Ctrl + -)"
-          @click="zoomOut()"
-        >
-          <div i-ph-magnifying-glass-minus-duotone />
-        </button>
-      </div>
-    </div>
-  </div>
+    <template #default="{ node, nodesRefMap }">
+      <DisplayModuleId
+        :id="node.data.module.id"
+        :ref="(el: any) => nodesRefMap.set(node.data.module.id, el?.$el)"
+        :link="true"
+        :session="session"
+        :minimal="true"
+        flex="1"
+      />
+    </template>
+    <template #link="{ link, d, linkClass }">
+      <path
+        :d="d"
+        :class="linkClass"
+        :stroke-dasharray="link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
+        fill="none"
+      />
+    </template>
+  </DisplayModuleGraph>
 </template>
diff --git a/packages/devtools-vite/src/app/composables/moduleGraph.ts b/packages/devtools-vite/src/app/composables/moduleGraph.ts
new file mode 100644
index 00000000..ddb9a084
--- /dev/null
+++ b/packages/devtools-vite/src/app/composables/moduleGraph.ts
@@ -0,0 +1,354 @@
+import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
+import type { ComputedRef, InjectionKey, MaybeRef, Ref, ShallowReactive, ShallowRef } from 'vue'
+import { onKeyPressed, useEventListener, useMagicKeys } from '@vueuse/core'
+import { hierarchy, tree } from 'd3-hierarchy'
+import { linkHorizontal, linkVertical } from 'd3-shape'
+import { computed, inject, nextTick, provide, ref, shallowReactive, shallowRef, unref } from 'vue'
+import { useZoomElement } from './zoomElement'
+
+export interface ModuleGraphNode<M, I> {
+  module: M
+  import?: I
+  expanded?: boolean
+  hasChildren?: boolean
+}
+
+export interface ModuleGraphSpacing {
+  width: MaybeRef<number>
+  height: MaybeRef<number>
+  linkOffset: MaybeRef<number>
+  margin: MaybeRef<number>
+  gap: MaybeRef<number>
+}
+
+export type ModuleGraphLink<M, I> = HierarchyLink<ModuleGraphNode<M, I>> & {
+  id: string
+  import?: I
+}
+
+interface ModuleGraphGenerateBaseOptions {
+  spacing: ModuleGraphSpacing
+  isFirstCalculateGraph: Ref<boolean>
+  container: Ref<HTMLDivElement>
+  nodesRefMap: ShallowReactive<Map<string, HTMLDivElement>>
+  width: Ref<number>
+  height: Ref<number>
+  scale: Ref<number, number>
+  childToParentMap: ShallowReactive<Map<string, string>>
+  collapsedNodes: ShallowReactive<Set<string>>
+}
+
+interface ModuleGraphOptions<M, I> {
+  spacing: ModuleGraphSpacing
+  modules: Ref<M[]> | ComputedRef<M[]>
+  generateGraph: (options: ModuleGraphGenerateBaseOptions & {
+    nodes: ShallowRef<HierarchyNode<ModuleGraphNode<M, I>>[], HierarchyNode<ModuleGraphNode<M, I>>[]>
+    links: ShallowRef<ModuleGraphLink<M, I>[], ModuleGraphLink<M, I>[]>
+    hierarchy: typeof hierarchy
+    tree: typeof tree
+    modulesMap: ComputedRef<Map<string, M>>
+    nodesMap: ShallowReactive<Map<string, HierarchyNode<ModuleGraphNode<M, I>>>>
+    linksMap: ShallowReactive<Map<string, ModuleGraphLink<M, I>>>
+
+    focusOn: (id: string, animated?: boolean) => void
+  }) => (focusOnFirstRootNode?: boolean) => void
+}
+
+const ViteDevToolsModuleGraphStateSymbol: InjectionKey<ModuleGraphGenerateBaseOptions & {
+  nodes: ShallowRef<HierarchyNode<ModuleGraphNode<any, any>>[], HierarchyNode<ModuleGraphNode<any, any>>[]>
+  links: ShallowRef<ModuleGraphLink<any, any>[], ModuleGraphLink<any, any>[]>
+  calculateGraph: (focusOnFirstRootNode?: boolean) => void
+  ZOOM_MIN: number
+  ZOOM_MAX: number
+  zoomIn: (factor?: number) => void
+  zoomOut: (factor?: number) => void
+}> = Symbol.for('ViteDevToolsModuleGraphState')
+
+export const createLinkHorizontal = linkHorizontal()
+  .x(d => d[0])
+  .y(d => d[1])
+
+export const createLinkVertical = linkVertical()
+  .x(d => d[0])
+  .y(d => d[1])
+
+export function generateModuleGraphLink<M, I>(link: ModuleGraphLink<M, I>, spacing?: ModuleGraphSpacing) {
+  if (!spacing) {
+    if (link.target.x! <= link.source.x!) {
+      return createLinkVertical({
+        source: [link.source.x!, link.source.y!],
+        target: [link.target.x!, link.target.y!],
+      })
+    }
+    return createLinkHorizontal({
+      source: [link.source.x!, link.source.y!],
+      target: [link.target.x!, link.target.y!],
+    })
+  }
+  else {
+    if (link.target.x! <= link.source.x!) {
+      return createLinkVertical({
+        source: [link.source.x! + unref(spacing.width) / 2 - unref(spacing.linkOffset), link.source.y!],
+        target: [link.target.x! - unref(spacing.width) / 2 + unref(spacing.linkOffset), link.target.y!],
+      })
+    }
+    return createLinkHorizontal({
+      source: [link.source.x! + unref(spacing.width) / 2 - unref(spacing.linkOffset), link.source.y!],
+      target: [link.target.x! - unref(spacing.width) / 2 + unref(spacing.linkOffset), link.target.y!],
+    })
+  }
+}
+// @unocss-include
+export function getModuleGraphLinkColor<M, I>(_link: ModuleGraphLink<M, I>) {
+  return 'stroke-#8885'
+}
+
+export function createModuleGraph<M extends { id: string }, I>(options: ModuleGraphOptions<M, I>) {
+  const ZOOM_MIN = 0.4
+  const ZOOM_MAX = 2
+  const container = ref<HTMLDivElement>() as Ref<HTMLDivElement>
+  const width = ref(window.innerWidth)
+  const height = ref(window.innerHeight)
+  const nodesRefMap = shallowReactive(new Map<string, HTMLDivElement>())
+  const collapsedNodes = shallowReactive(new Set<string>())
+  const isFirstCalculateGraph = ref(true)
+  const childToParentMap = shallowReactive(new Map<string, string>())
+
+  const nodes = shallowRef<HierarchyNode<ModuleGraphNode<M, I>>[]>([])
+  const links = shallowRef<ModuleGraphLink<M, I>[]>([])
+  const nodesMap = shallowReactive(new Map<string, HierarchyNode<ModuleGraphNode<M, I>>>())
+  const linksMap = shallowReactive(new Map<string, ModuleGraphLink<M, I>>())
+
+  const modulesMap = computed(() => {
+    const map = new Map<string, M>()
+    for (const module of options.modules.value) {
+      map.set(module.id, module)
+    }
+    return map
+  })
+
+  const { control } = useMagicKeys()
+  const { scale, zoomIn, zoomOut } = useZoomElement(container, {
+    wheel: control,
+    minScale: ZOOM_MIN,
+    maxScale: ZOOM_MAX,
+  })
+
+  function focusOn(id: string, animated = true) {
+    const el = nodesRefMap.get(id)
+    el?.scrollIntoView({
+      block: 'center',
+      inline: 'center',
+      behavior: animated ? 'smooth' : 'instant',
+    })
+  }
+
+  const _calculateGraph = options.generateGraph({
+    isFirstCalculateGraph,
+    hierarchy,
+    tree,
+    nodesRefMap,
+    container,
+    modulesMap,
+    nodes,
+    links,
+    scale,
+    nodesMap,
+    linksMap,
+    width,
+    height,
+    childToParentMap,
+    focusOn,
+    collapsedNodes,
+    spacing: options.spacing,
+  })
+
+  provide(ViteDevToolsModuleGraphStateSymbol, {
+    spacing: options.spacing,
+    calculateGraph: _calculateGraph,
+    isFirstCalculateGraph,
+    container,
+    width,
+    height,
+    scale,
+    nodes,
+    links,
+    nodesRefMap,
+    collapsedNodes,
+    childToParentMap,
+    ZOOM_MIN,
+    ZOOM_MAX,
+    zoomIn,
+    zoomOut,
+  })
+}
+
+export function useModuleGraph() {
+  const state = inject(ViteDevToolsModuleGraphStateSymbol)!
+  return state
+}
+
+export function useToggleGraphNodeExpanded<M extends { id: string, imports: unknown[] }>(options: {
+  modules: MaybeRef<M[]>
+}) {
+  const { nodesRefMap, container, calculateGraph, collapsedNodes } = inject(ViteDevToolsModuleGraphStateSymbol)!
+  const isGraphNodeToggling = ref(false)
+
+  function restoreScrollPosition(id: string, beforePosition: { x: number, y: number }) {
+  // Ensure this runs after the nextTick inside calculateGraph completes (width and height are computed)
+    nextTick(() => {
+      nextTick(() => {
+        const newNode = nodesRefMap.get(id)
+
+        if (newNode && beforePosition && container.value) {
+          const containerRect = container.value.getBoundingClientRect()
+          const newRect = newNode.getBoundingClientRect()
+
+          const viewportDiffX = newRect.left - containerRect.left - beforePosition.x
+          const viewportDiffY = newRect.top - containerRect.top - beforePosition.y
+
+          container.value.scrollLeft += viewportDiffX
+          container.value.scrollTop += viewportDiffY
+        }
+      })
+    })
+  }
+
+  function toggleNode(id: string) {
+    if (isGraphNodeToggling.value)
+      return
+    isGraphNodeToggling.value = true
+
+    const node = nodesRefMap.get(id)
+    let prevNodeOffset: null | { x: number, y: number } = null
+
+    // Record position relative to the scroll container to avoid drift after reflow
+    if (node && container.value) {
+      const containerRect = container.value.getBoundingClientRect()
+      const rect = node.getBoundingClientRect()
+      prevNodeOffset = {
+        x: rect.left - containerRect.left,
+        y: rect.top - containerRect.top,
+      }
+    }
+
+    if (collapsedNodes.has(id)) {
+      collapsedNodes.delete(id)
+    }
+    else {
+      collapsedNodes.add(id)
+    }
+
+    calculateGraph()
+
+    // Adjust scroll position after layout changes
+    if (prevNodeOffset) {
+      restoreScrollPosition(id, prevNodeOffset)
+    }
+
+    isGraphNodeToggling.value = false
+  }
+
+  function expandAll() {
+    if (isGraphNodeToggling.value)
+      return
+
+    isGraphNodeToggling.value = true
+
+    collapsedNodes.clear()
+    calculateGraph()
+
+    setTimeout(() => {
+      isGraphNodeToggling.value = false
+    }, 300)
+  }
+
+  function collapseAll() {
+    if (isGraphNodeToggling.value)
+      return
+
+    isGraphNodeToggling.value = true
+
+    unref(options.modules).forEach((module) => {
+      if (module.imports.length > 0) {
+        collapsedNodes.add(module.id)
+      }
+    })
+    calculateGraph()
+
+    setTimeout(() => {
+      isGraphNodeToggling.value = false
+    }, 300)
+  }
+
+  return {
+    isGraphNodeToggling,
+    toggleNode,
+    expandAll,
+    collapseAll,
+  }
+}
+
+export function useGraphZoom() {
+  const state = inject(ViteDevToolsModuleGraphStateSymbol)!
+
+  const { scale, zoomIn, zoomOut, ZOOM_MIN, ZOOM_MAX } = state
+
+  onKeyPressed(['-', '_'], (e) => {
+    if (e.ctrlKey)
+      zoomOut()
+  })
+
+  onKeyPressed(['=', '+'], (e) => {
+    if (e.ctrlKey)
+      zoomIn()
+  })
+
+  return {
+    ZOOM_MIN,
+    ZOOM_MAX,
+    scale,
+    zoomIn,
+    zoomOut,
+  }
+}
+
+export function useGraphDraggingScroll() {
+  const { container } = inject(ViteDevToolsModuleGraphStateSymbol)!
+  const isGrabbing = ref(false)
+  const SCROLLBAR_THICKNESS = 20
+  let x = 0
+  let y = 0
+
+  function init() {
+    useEventListener(container, 'mousedown', (e) => {
+      // prevent dragging when clicking on scrollbar
+      const rect = container.value!.getBoundingClientRect()
+      const distRight = rect.right - e.clientX
+      const distBottom = rect.bottom - e.clientY
+
+      if (distRight <= SCROLLBAR_THICKNESS || distBottom <= SCROLLBAR_THICKNESS) {
+        return
+      }
+
+      isGrabbing.value = true
+      x = container.value!.scrollLeft + e.pageX
+      y = container.value!.scrollTop + e.pageY
+    })
+    useEventListener(container, 'contextmenu', e => e.preventDefault())
+    useEventListener('mouseleave', () => isGrabbing.value = false)
+    useEventListener('mouseup', () => isGrabbing.value = false)
+    useEventListener('mousemove', (e) => {
+      if (!isGrabbing.value)
+        return
+      e.preventDefault()
+      container.value!.scrollLeft = x - e.pageX
+      container.value!.scrollTop = y - e.pageY
+    })
+  }
+
+  return {
+    init,
+    isGrabbing,
+  }
+}
diff --git a/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue b/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
index 2aeb43a2..b3208aff 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
@@ -1,12 +1,28 @@
 <script setup lang="ts">
-import type { SessionContext } from '~~/shared/types'
+import type { SessionContext } from '~~/shared/types/data'
+import type { ClientSettings } from '~/state/settings'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+import { settings } from '~/state/settings'
 
 const props = defineProps<{
   session: SessionContext
 }>()
 
+const chunkViewTypes = [
+  {
+    label: 'List',
+    value: 'list',
+    icon: 'i-carbon-list',
+  },
+  {
+    label: 'Graph',
+    value: 'graph',
+    icon: 'i-ph-graph-duotone',
+  },
+] as const
+
 const rpc = useRpc()
 const { state: chunks, isLoading } = useAsyncState(
   async () => {
@@ -16,19 +32,50 @@ const { state: chunks, isLoading } = useAsyncState(
   },
   null,
 )
+const normalizedChunks = computed(() => chunks.value?.map(x => ({
+  ...x,
+  id: `${x.chunk_id}`,
+})) ?? [])
+
+function toggleDisplay(type: ClientSettings['chunkViewType']) {
+  settings.value.chunkViewType = type
+}
 </script>
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else p5 flex="~ col gap-4">
-    Chunks
-    <!-- TODO: graph view -->
-    <template v-for="chunk of chunks" :key="chunk.id">
-      <DataChunkDetails
-        border="~ base rounded-lg"
-        p3
-        :chunk="chunk"
+  <div v-else relative max-h-screen of-hidden>
+    <div absolute left-4 top-4 z-panel-nav>
+      <div flex="~ gap-2 items-center" p2 border="~ base rounded-xl" bg-glass>
+        <span op50 pl2 text-sm>View as</span>
+        <button
+          v-for="viewType of chunkViewTypes"
+          :key="viewType.value"
+          btn-action
+          :class="settings.chunkViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
+          @click="toggleDisplay(viewType.value)"
+        >
+          <div :class="viewType.icon" />
+          {{ viewType.label }}
+        </button>
+      </div>
+    </div>
+    <template v-if="settings.chunkViewType === 'list'">
+      <div class="px5 pt24" flex="~ col gap-4">
+        <template v-for="chunk of chunks" :key="chunk.id">
+          <DataChunkDetails
+            border="~ base rounded-lg"
+            p3
+            :chunk="chunk"
+            :session="session"
+          />
+        </template>
+      </div>
+    </template>
+    <template v-else-if="settings.chunkViewType === 'graph'">
+      <ChunksGraph
         :session="session"
+        :chunks="normalizedChunks"
       />
     </template>
   </div>
diff --git a/packages/devtools-vite/src/app/state/settings.ts b/packages/devtools-vite/src/app/state/settings.ts
index 4a2d2d64..ce2323af 100644
--- a/packages/devtools-vite/src/app/state/settings.ts
+++ b/packages/devtools-vite/src/app/state/settings.ts
@@ -21,6 +21,7 @@ export interface ClientSettings {
   pluginDetailsModuleTypes: string[] | null
   pluginDetailsDurationSortType: string
   pluginDetailSelectedHook: string
+  chunkViewType: 'list' | 'graph'
   pluginDetailsShowType: 'changed' | 'unchanged' | 'all'
 }
 
@@ -45,6 +46,7 @@ export const settings = useLocalStorage<ClientSettings>(
     pluginDetailsModuleTypes: null,
     pluginDetailsDurationSortType: '',
     pluginDetailSelectedHook: '',
+    chunkViewType: 'list',
     pluginDetailsShowType: 'all',
   },
   {