From 473f8ae43ecf7b5d2ad0d1a1a49724a74068c96c Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 19 Aug 2025 22:44:32 +0800
Subject: [PATCH 1/4] feat: chunks graph view

---
 .../src/app/components/chunks/Graph.vue       | 525 ++++++++++++++++++
 .../src/app/components/modules/Graph.vue      |   2 +-
 .../app/pages/session/[session]/chunks.vue    |  58 +-
 .../devtools-vite/src/app/state/settings.ts   |   2 +
 4 files changed, 578 insertions(+), 9 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/chunks/Graph.vue

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..a4591753
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/chunks/Graph.vue
@@ -0,0 +1,525 @@
+<script setup lang="ts">
+import type { ChunkImport, Chunk as ChunkInfo } from '@rolldown/debug'
+import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
+import type { 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'
+
+const props = defineProps<{
+  chunks: ChunkInfo[]
+  session: SessionContext
+}>()
+
+interface Node {
+  chunk: ChunkInfo
+  import?: ChunkImport
+  expanded?: boolean
+  hasChildren: boolean
+  end?: boolean
+}
+
+type Link = HierarchyLink<Node> & {
+  id: string
+  import?: ChunkImport
+}
+
+const graphRender = ref<'normal' | 'mini'>('normal')
+
+const SPACING = reactive({
+  width: computed(() => graphRender.value === 'normal' ? 320 : 10),
+  height: computed(() => graphRender.value === 'normal' ? 55 : 20),
+  linkOffset: computed(() => graphRender.value === 'normal' ? 15 : 0),
+  margin: 120,
+  gap: computed(() => graphRender.value === 'normal' ? 80 : 40),
+})
+
+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 chunksMap = computed(() => {
+  const map = new Map<string, ChunkInfo>()
+  for (const chunk of props.chunks) {
+    map.set(`${chunk.chunk_id}`, chunk)
+  }
+  return map
+})
+
+const rootNodes = computed(() => props.chunks)
+
+const createLinkHorizontal = linkHorizontal()
+  .x(d => d[0])
+  .y(d => d[1])
+
+const createLinkVertical = linkVertical()
+  .x(d => d[0])
+  .y(d => d[1])
+
+function calculateGraph() {
+  // Unset the canvas size, and recalculate again after nodes are rendered
+  width.value = window.innerWidth
+  height.value = window.innerHeight
+
+  const root = hierarchy<Node>(
+    { chunk: { chunk_id: '~root' } } as any,
+    (parent) => {
+      if (`${parent.chunk.chunk_id}` === '~root') {
+        rootNodes.value.forEach((x) => {
+          if (isFirstCalculateGraph.value) {
+            childToParentMap.set(`${x.chunk_id}`, '~root')
+          }
+        })
+        return rootNodes.value.map(x => ({
+          chunk: x,
+          expanded: !collapsedNodes.has(`${x.chunk_id}`),
+          hasChildren: false,
+        }))
+      }
+
+      if (collapsedNodes.has(`${parent.chunk.chunk_id}`) || parent.end) {
+        return []
+      }
+
+      const nodes = parent.chunk.imports
+        .map((x): Node | undefined => {
+          const chunk = chunksMap.value.get(`${x.chunk_id}`)
+          if (!chunk)
+            return undefined
+
+          if (isFirstCalculateGraph.value) {
+            childToParentMap.set(`${chunk.chunk_id}`, `${parent.chunk.chunk_id}`)
+          }
+
+          return {
+            chunk,
+            import: x,
+            expanded: !collapsedNodes.has(`${chunk.chunk_id}`),
+            hasChildren: false,
+            end: true,
+          }
+        })
+        .filter(x => x !== undefined)
+
+      return nodes
+    },
+  )
+
+  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.chunk.imports) {
+      node.data.hasChildren = node.data.chunk.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 < 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.chunk.chunk_id}`, node)
+  }
+  const _links = root.links()
+    .filter(x => `${x.source.data.chunk.chunk_id}` !== '~root')
+    .map((x): Link => {
+      return {
+        ...x,
+        import: x.source.data.import,
+        id: `${x.source.data.chunk.chunk_id}|${x.target.data.chunk.chunk_id}`,
+      }
+    })
+  linksMap.clear()
+  for (const link of _links) {
+    linksMap.set(link.id, link)
+  }
+  links.value = _links
+
+  nextTick(() => {
+    width.value = (container.value!.scrollWidth / scale.value + SPACING.margin)
+    height.value = (container.value!.scrollHeight / scale.value + SPACING.margin)
+  })
+}
+
+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()
+
+  // 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.chunks.forEach((chunk) => {
+    if (chunk.imports.length > 0) {
+      collapsedNodes.add(`${chunk.chunk_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.chunks,
+    () => {
+      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' : ''"
+  >
+    <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.chunk.chunk_id"
+        >
+          <template v-if="`${node.data.chunk.chunk_id}` !== '~root'">
+            <div
+              absolute
+              class="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 row gap-1"
+                bg-glass
+                border="~ base rounded"
+                class="block px2 p1"
+                :style="{
+                  minWidth: graphRender === 'normal' ? `${SPACING.width}px` : undefined,
+                  maxWidth: '320px',
+                  maxHeight: '50px',
+                  overflow: 'hidden',
+                  transition: 'all 0.3s ease',
+                }"
+              >
+                <div flex="~ items-center">
+                  <span op50 font-mono w12>#{{ node.data.chunk.chunk_id }}</span>
+                  <div flex="~ gap-2 items-center" :title="`Chunk #${node.data.chunk.chunk_id}`">
+                    <div i-ph-shapes-duotone />
+                    <div>{{ node.data.chunk.name || '[unnamed]' }}</div>
+                    <DisplayBadge :text="node.data.chunk.reason" />
+                  </div>
+                  <div flex-auto />
+                  <div flex="~ gap-1 items-center">
+                    <div i-ph-package-duotone />
+                    {{ node.data.chunk.modules.length }}
+                  </div>
+                </div>
+              </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.chunk.chunk_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>
diff --git a/packages/devtools-vite/src/app/components/modules/Graph.vue b/packages/devtools-vite/src/app/components/modules/Graph.vue
index f32485c0..55b942df 100644
--- a/packages/devtools-vite/src/app/components/modules/Graph.vue
+++ b/packages/devtools-vite/src/app/components/modules/Graph.vue
@@ -30,7 +30,7 @@ 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),
+  margin: 800,
   gap: computed(() => graphRender.value === 'normal' ? 150 : 100),
 })
 
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..9231ad64 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,27 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
+import type { ClientSettings } from '~/state/settings'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
+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 +31,46 @@ const { state: chunks, isLoading } = useAsyncState(
   },
   null,
 )
+
+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="chunks ?? []"
       />
     </template>
   </div>
diff --git a/packages/devtools-vite/src/app/state/settings.ts b/packages/devtools-vite/src/app/state/settings.ts
index e3338302..c4bf0cf9 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'
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -44,6 +45,7 @@ export const settings = useLocalStorage<ClientSettings>(
     pluginDetailsModuleTypes: null,
     pluginDetailsDurationSortType: '',
     pluginDetailSelectedHook: '',
+    chunkViewType: 'list',
   },
   {
     mergeDefaults: true,

From 59129474b80dbca5ae479af7f2dabcea969ff12f Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 21 Aug 2025 00:11:12 +0800
Subject: [PATCH 2/4] refactor: module graph

---
 .../app/components/display/ModuleGraph.vue    | 191 ++++++++++
 .../src/app/composables/moduleGraph.ts        | 351 ++++++++++++++++++
 .../app/pages/session/[session]/chunks.vue    | 158 +++++++-
 .../pages/session/[session]/graph/index.vue   | 174 ++++++++-
 4 files changed, 866 insertions(+), 8 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/display/ModuleGraph.vue
 create mode 100644 packages/devtools-vite/src/app/composables/moduleGraph.ts

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..ac7236b5
--- /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 { generateLink, 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="generateLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
+                <path
+                  :key="link.id"
+                  :d="generateLink<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/composables/moduleGraph.ts b/packages/devtools-vite/src/app/composables/moduleGraph.ts
new file mode 100644
index 00000000..223b2c5b
--- /dev/null
+++ b/packages/devtools-vite/src/app/composables/moduleGraph.ts
@@ -0,0 +1,351 @@
+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 ModuleGraphOptions<M, I> {
+  spacing: ModuleGraphSpacing
+  modules: Ref<M[]> | ComputedRef<M[]>
+  buildGraphFn: (options: {
+    isFirstCalculateGraph: Ref<boolean>
+    hierarchy: typeof hierarchy
+    tree: typeof tree
+    nodesRefMap: ShallowReactive<Map<string, HTMLDivElement>>
+    container: Ref<HTMLDivElement>
+    modulesMap: ComputedRef<Map<string, M>>
+    nodes: ShallowRef<HierarchyNode<ModuleGraphNode<M, I>>[], HierarchyNode<ModuleGraphNode<M, I>>[]>
+    links: ShallowRef<ModuleGraphLink<M, I>[], ModuleGraphLink<M, I>[]>
+    nodesMap: ShallowReactive<Map<string, HierarchyNode<ModuleGraphNode<M, I>>>>
+    linksMap: ShallowReactive<Map<string, ModuleGraphLink<M, I>>>
+    width: Ref<number>
+    height: Ref<number>
+    childToParentMap: ShallowReactive<Map<string, string>>
+    collapsedNodes: ShallowReactive<Set<string>>
+    spacing: ModuleGraphSpacing
+    scale: Ref<number, number>
+    focusOn: (id: string, animated?: boolean) => void
+  }) => (focusOnFirstRootNode?: boolean) => void
+}
+
+const ViteDevToolsModuleGraphStateSymbol: InjectionKey<{
+  spacing: {
+    width: MaybeRef<number>
+    height: MaybeRef<number>
+    linkOffset: MaybeRef<number>
+    margin: MaybeRef<number>
+    gap: MaybeRef<number>
+  }
+  isFirstCalculateGraph: Ref<boolean>
+  calculateGraph: (focusOnFirstRootNode?: boolean) => void
+  container: Ref<HTMLDivElement>
+  width: Ref<number>
+  height: Ref<number>
+  scale: Ref<number>
+  nodes: ShallowRef<HierarchyNode<ModuleGraphNode<any, any>>[], HierarchyNode<ModuleGraphNode<any, any>>[]>
+  links: ShallowRef<ModuleGraphLink<any, any>[], ModuleGraphLink<any, any>[]>
+  nodesRefMap: ShallowReactive<Map<string, HTMLDivElement>>
+  collapsedNodes: ShallowReactive<Set<string>>
+  childToParentMap: ShallowReactive<Map<string, string>>
+  ZOOM_MIN: number
+  ZOOM_MAX: number
+  zoomIn: (factor?: number) => void
+  zoomOut: (factor?: number) => void
+}> = Symbol.for('ViteDevToolsModuleGraphState')
+
+const createLinkHorizontal = linkHorizontal()
+  .x(d => d[0])
+  .y(d => d[1])
+
+const createLinkVertical = linkVertical()
+  .x(d => d[0])
+  .y(d => d[1])
+
+export function generateLink<M, I>(link: ModuleGraphLink<M, I>, spacing: ModuleGraphSpacing) {
+  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!],
+  })
+}
+
+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.buildGraphFn({
+    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 9231ad64..23b063e0 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
-import type { SessionContext } from '~~/shared/types'
+import type { Chunk, ChunkImport } from '@rolldown/debug'
+import type { SessionContext } from '~~/shared/types/data'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
 import type { ClientSettings } from '~/state/settings'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
+import { computed, nextTick, unref } from 'vue'
+import { createModuleGraph } from '~/composables/moduleGraph'
 import { settings } from '~/state/settings'
 
+type ChunkInfo = Chunk & {
+  id: string
+}
+
 const props = defineProps<{
   session: SessionContext
 }>()
@@ -31,10 +39,136 @@ 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
 }
+
+createModuleGraph<ChunkInfo, ChunkImport>({
+  modules: normalizedChunks,
+  spacing: {
+    width: 320,
+    height: 55,
+    linkOffset: 15,
+    margin: 120,
+    gap: 80,
+  },
+  buildGraphFn: (options) => {
+    const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap } = options
+    const rootNodes = computed(() => normalizedChunks.value)
+    return function () {
+      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') {
+            rootNodes.value.forEach((x) => {
+              if (isFirstCalculateGraph.value) {
+                childToParentMap.set(x.id, '~root')
+              }
+            })
+            return rootNodes.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>
@@ -68,10 +202,26 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
       </div>
     </template>
     <template v-else-if="settings.chunkViewType === 'graph'">
-      <ChunksGraph
+      <DisplayModuleGraph
         :session="session"
-        :chunks="chunks ?? []"
-      />
+        :modules="normalizedChunks"
+      >
+        <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>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue b/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
index ff4a99c8..c1a704d2 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import type { SessionContext } from '~~/shared/types'
+import type { ModuleImport, ModuleListItem, SessionContext } from '~~/shared/types'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
 import type { ClientSettings } from '~/state/settings'
 import { useRoute, useRouter } from '#app/composables/router'
 import { clearUndefined, toArray } from '@antfu/utils'
 import { computedWithControl, debouncedWatch } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, unref } from 'vue'
+import { createModuleGraph } from '~/composables/moduleGraph'
+
 import { settings } from '~/state/settings'
 import { parseReadablePath } from '~/utils/filepath'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
@@ -130,6 +133,150 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
   }
   settings.value.moduleGraphViewType = type
 }
+
+createModuleGraph<ModuleListItem, ModuleImport>({
+  modules: searched,
+  spacing: {
+    width: 400,
+    height: 55,
+    linkOffset: 20,
+    margin: 800,
+    gap: 150,
+  },
+  buildGraphFn: (options) => {
+    const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap, focusOn } = options
+    const rootModules = computed(() => {
+      return searched.value.filter(x => x.importers.length === 0)
+    })
+
+    return function (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,
+            }))
+          }
+
+          if (collapsedNodes.has(parent.module.id)) {
+            return []
+          }
+
+          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
+      }
+
+      // Calculate the layout
+      const layout = tree<ModuleGraphNode<ModuleListItem, ModuleImport>>()
+        .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
+            ?.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 < 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<ModuleListItem, ModuleImport> => {
+          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))
+        const moduleId = rootModules.value?.[0]?.id
+        if (focusOnFirstRootNode && moduleId) {
+          nextTick(() => {
+            focusOn(moduleId, false)
+          })
+        }
+      })
+    }
+  },
+})
 </script>
 
 <template>
@@ -180,10 +327,29 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
       </div>
     </template>
     <template v-else-if="settings.moduleGraphViewType === 'graph'">
-      <ModulesGraph
+      <DisplayModuleGraph
         :session="session"
         :modules="searched"
-      />
+      >
+        <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>
     <template v-else>
       <ModulesFolder

From 40cc30feff1fb188d4d7276c8e3a84f4ada038cc Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 21 Aug 2025 22:16:38 +0800
Subject: [PATCH 3/4] chore: update

---
 .../src/app/components/chunks/Graph.vue       | 525 -----------------
 .../components/data/AssetRelationships.vue    |  52 +-
 .../data/ModuleImportRelationships.vue        |  55 +-
 .../app/components/display/ModuleGraph.vue    |   6 +-
 .../src/app/components/modules/Graph.vue      | 547 ------------------
 .../src/app/composables/moduleGraph.ts        |  85 +--
 .../app/pages/session/[session]/chunks.vue    |   8 +-
 .../pages/session/[session]/graph/index.vue   |   4 +-
 8 files changed, 74 insertions(+), 1208 deletions(-)
 delete mode 100644 packages/devtools-vite/src/app/components/chunks/Graph.vue
 delete mode 100644 packages/devtools-vite/src/app/components/modules/Graph.vue

diff --git a/packages/devtools-vite/src/app/components/chunks/Graph.vue b/packages/devtools-vite/src/app/components/chunks/Graph.vue
deleted file mode 100644
index a4591753..00000000
--- a/packages/devtools-vite/src/app/components/chunks/Graph.vue
+++ /dev/null
@@ -1,525 +0,0 @@
-<script setup lang="ts">
-import type { ChunkImport, Chunk as ChunkInfo } from '@rolldown/debug'
-import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
-import type { 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'
-
-const props = defineProps<{
-  chunks: ChunkInfo[]
-  session: SessionContext
-}>()
-
-interface Node {
-  chunk: ChunkInfo
-  import?: ChunkImport
-  expanded?: boolean
-  hasChildren: boolean
-  end?: boolean
-}
-
-type Link = HierarchyLink<Node> & {
-  id: string
-  import?: ChunkImport
-}
-
-const graphRender = ref<'normal' | 'mini'>('normal')
-
-const SPACING = reactive({
-  width: computed(() => graphRender.value === 'normal' ? 320 : 10),
-  height: computed(() => graphRender.value === 'normal' ? 55 : 20),
-  linkOffset: computed(() => graphRender.value === 'normal' ? 15 : 0),
-  margin: 120,
-  gap: computed(() => graphRender.value === 'normal' ? 80 : 40),
-})
-
-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 chunksMap = computed(() => {
-  const map = new Map<string, ChunkInfo>()
-  for (const chunk of props.chunks) {
-    map.set(`${chunk.chunk_id}`, chunk)
-  }
-  return map
-})
-
-const rootNodes = computed(() => props.chunks)
-
-const createLinkHorizontal = linkHorizontal()
-  .x(d => d[0])
-  .y(d => d[1])
-
-const createLinkVertical = linkVertical()
-  .x(d => d[0])
-  .y(d => d[1])
-
-function calculateGraph() {
-  // Unset the canvas size, and recalculate again after nodes are rendered
-  width.value = window.innerWidth
-  height.value = window.innerHeight
-
-  const root = hierarchy<Node>(
-    { chunk: { chunk_id: '~root' } } as any,
-    (parent) => {
-      if (`${parent.chunk.chunk_id}` === '~root') {
-        rootNodes.value.forEach((x) => {
-          if (isFirstCalculateGraph.value) {
-            childToParentMap.set(`${x.chunk_id}`, '~root')
-          }
-        })
-        return rootNodes.value.map(x => ({
-          chunk: x,
-          expanded: !collapsedNodes.has(`${x.chunk_id}`),
-          hasChildren: false,
-        }))
-      }
-
-      if (collapsedNodes.has(`${parent.chunk.chunk_id}`) || parent.end) {
-        return []
-      }
-
-      const nodes = parent.chunk.imports
-        .map((x): Node | undefined => {
-          const chunk = chunksMap.value.get(`${x.chunk_id}`)
-          if (!chunk)
-            return undefined
-
-          if (isFirstCalculateGraph.value) {
-            childToParentMap.set(`${chunk.chunk_id}`, `${parent.chunk.chunk_id}`)
-          }
-
-          return {
-            chunk,
-            import: x,
-            expanded: !collapsedNodes.has(`${chunk.chunk_id}`),
-            hasChildren: false,
-            end: true,
-          }
-        })
-        .filter(x => x !== undefined)
-
-      return nodes
-    },
-  )
-
-  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.chunk.imports) {
-      node.data.hasChildren = node.data.chunk.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 < 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.chunk.chunk_id}`, node)
-  }
-  const _links = root.links()
-    .filter(x => `${x.source.data.chunk.chunk_id}` !== '~root')
-    .map((x): Link => {
-      return {
-        ...x,
-        import: x.source.data.import,
-        id: `${x.source.data.chunk.chunk_id}|${x.target.data.chunk.chunk_id}`,
-      }
-    })
-  linksMap.clear()
-  for (const link of _links) {
-    linksMap.set(link.id, link)
-  }
-  links.value = _links
-
-  nextTick(() => {
-    width.value = (container.value!.scrollWidth / scale.value + SPACING.margin)
-    height.value = (container.value!.scrollHeight / scale.value + SPACING.margin)
-  })
-}
-
-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()
-
-  // 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.chunks.forEach((chunk) => {
-    if (chunk.imports.length > 0) {
-      collapsedNodes.add(`${chunk.chunk_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.chunks,
-    () => {
-      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' : ''"
-  >
-    <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.chunk.chunk_id"
-        >
-          <template v-if="`${node.data.chunk.chunk_id}` !== '~root'">
-            <div
-              absolute
-              class="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 row gap-1"
-                bg-glass
-                border="~ base rounded"
-                class="block px2 p1"
-                :style="{
-                  minWidth: graphRender === 'normal' ? `${SPACING.width}px` : undefined,
-                  maxWidth: '320px',
-                  maxHeight: '50px',
-                  overflow: 'hidden',
-                  transition: 'all 0.3s ease',
-                }"
-              >
-                <div flex="~ items-center">
-                  <span op50 font-mono w12>#{{ node.data.chunk.chunk_id }}</span>
-                  <div flex="~ gap-2 items-center" :title="`Chunk #${node.data.chunk.chunk_id}`">
-                    <div i-ph-shapes-duotone />
-                    <div>{{ node.data.chunk.name || '[unnamed]' }}</div>
-                    <DisplayBadge :text="node.data.chunk.reason" />
-                  </div>
-                  <div flex-auto />
-                  <div flex="~ gap-1 items-center">
-                    <div i-ph-package-duotone />
-                    {{ node.data.chunk.modules.length }}
-                  </div>
-                </div>
-              </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.chunk.chunk_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>
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
index ac7236b5..d84f429e 100644
--- a/packages/devtools-vite/src/app/components/display/ModuleGraph.vue
+++ b/packages/devtools-vite/src/app/components/display/ModuleGraph.vue
@@ -1,7 +1,7 @@
 <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 { generateLink, getModuleGraphLinkColor, useGraphDraggingScroll, useGraphZoom, useModuleGraph, useToggleGraphNodeExpanded } from '~/composables/moduleGraph'
+import { generateModuleGraphLink, getModuleGraphLinkColor, useGraphDraggingScroll, useGraphZoom, useModuleGraph, useToggleGraphNodeExpanded } from '~/composables/moduleGraph'
 
 const props = defineProps<{
   modules: T[]
@@ -58,10 +58,10 @@ onMounted(() => {
         <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="generateLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
+              <slot name="link" :link="link" :d="generateModuleGraphLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
                 <path
                   :key="link.id"
-                  :d="generateLink<T, I>(link, spacing)!"
+                  :d="generateModuleGraphLink<T, I>(link, spacing)!"
                   :class="getModuleGraphLinkColor<T, I>(link)"
                   fill="none"
                 />
diff --git a/packages/devtools-vite/src/app/components/modules/Graph.vue b/packages/devtools-vite/src/app/components/modules/Graph.vue
deleted file mode 100644
index 55b942df..00000000
--- a/packages/devtools-vite/src/app/components/modules/Graph.vue
+++ /dev/null
@@ -1,547 +0,0 @@
-<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'
-
-const props = defineProps<{
-  session: SessionContext
-  modules: ModuleListItem[]
-}>()
-
-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: 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 modulesMap = computed(() => {
-  const map = new Map<string, ModuleListItem>()
-  for (const module of props.modules) {
-    map.set(module.id, module)
-  }
-  return map
-})
-
-const rootModules = computed(() => {
-  return props.modules.filter(x => x.importers.length === 0)
-})
-
-const createLinkHorizontal = linkHorizontal()
-  .x(d => d[0])
-  .y(d => d[1])
-
-const createLinkVertical = linkVertical()
-  .x(d => d[0])
-  .y(d => d[1])
-
-function calculateGraph(focusOnFirstRooeNode = true) {
-  // Unset the canvas size, and recalculate again after nodes are rendered
-  width.value = window.innerWidth
-  height.value = window.innerHeight
-
-  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)
-
-          if (isFirstCalculateGraph.value) {
-            childToParentMap.set(x.id, '~root')
-          }
-        })
-        return rootModules.value.map(x => ({
-          module: x,
-          expanded: !collapsedNodes.has(x.id),
-          hasChildren: false,
-        }))
-      }
-
-      if (collapsedNodes.has(parent.module.id)) {
-        return []
-      }
-
-      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)
-          }
-
-          return {
-            module,
-            import: x,
-            expanded: !collapsedNodes.has(module.id),
-            hasChildren: false,
-          }
-        })
-        .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)
-  }
-  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)
-      })
-    }
-  })
-}
-
-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' : ''"
-  >
-    <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>
diff --git a/packages/devtools-vite/src/app/composables/moduleGraph.ts b/packages/devtools-vite/src/app/composables/moduleGraph.ts
index 223b2c5b..ddb9a084 100644
--- a/packages/devtools-vite/src/app/composables/moduleGraph.ts
+++ b/packages/devtools-vite/src/app/composables/moduleGraph.ts
@@ -10,7 +10,7 @@ export interface ModuleGraphNode<M, I> {
   module: M
   import?: I
   expanded?: boolean
-  hasChildren: boolean
+  hasChildren?: boolean
 }
 
 export interface ModuleGraphSpacing {
@@ -26,76 +26,79 @@ export type ModuleGraphLink<M, I> = HierarchyLink<ModuleGraphNode<M, I>> & {
   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[]>
-  buildGraphFn: (options: {
-    isFirstCalculateGraph: Ref<boolean>
+  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
-    nodesRefMap: ShallowReactive<Map<string, HTMLDivElement>>
-    container: Ref<HTMLDivElement>
     modulesMap: ComputedRef<Map<string, M>>
-    nodes: ShallowRef<HierarchyNode<ModuleGraphNode<M, I>>[], HierarchyNode<ModuleGraphNode<M, I>>[]>
-    links: ShallowRef<ModuleGraphLink<M, I>[], ModuleGraphLink<M, I>[]>
     nodesMap: ShallowReactive<Map<string, HierarchyNode<ModuleGraphNode<M, I>>>>
     linksMap: ShallowReactive<Map<string, ModuleGraphLink<M, I>>>
-    width: Ref<number>
-    height: Ref<number>
-    childToParentMap: ShallowReactive<Map<string, string>>
-    collapsedNodes: ShallowReactive<Set<string>>
-    spacing: ModuleGraphSpacing
-    scale: Ref<number, number>
+
     focusOn: (id: string, animated?: boolean) => void
   }) => (focusOnFirstRootNode?: boolean) => void
 }
 
-const ViteDevToolsModuleGraphStateSymbol: InjectionKey<{
-  spacing: {
-    width: MaybeRef<number>
-    height: MaybeRef<number>
-    linkOffset: MaybeRef<number>
-    margin: MaybeRef<number>
-    gap: MaybeRef<number>
-  }
-  isFirstCalculateGraph: Ref<boolean>
-  calculateGraph: (focusOnFirstRootNode?: boolean) => void
-  container: Ref<HTMLDivElement>
-  width: Ref<number>
-  height: Ref<number>
-  scale: Ref<number>
+const ViteDevToolsModuleGraphStateSymbol: InjectionKey<ModuleGraphGenerateBaseOptions & {
   nodes: ShallowRef<HierarchyNode<ModuleGraphNode<any, any>>[], HierarchyNode<ModuleGraphNode<any, any>>[]>
   links: ShallowRef<ModuleGraphLink<any, any>[], ModuleGraphLink<any, any>[]>
-  nodesRefMap: ShallowReactive<Map<string, HTMLDivElement>>
-  collapsedNodes: ShallowReactive<Set<string>>
-  childToParentMap: ShallowReactive<Map<string, string>>
+  calculateGraph: (focusOnFirstRootNode?: boolean) => void
   ZOOM_MIN: number
   ZOOM_MAX: number
   zoomIn: (factor?: number) => void
   zoomOut: (factor?: number) => void
 }> = Symbol.for('ViteDevToolsModuleGraphState')
 
-const createLinkHorizontal = linkHorizontal()
+export const createLinkHorizontal = linkHorizontal()
   .x(d => d[0])
   .y(d => d[1])
 
-const createLinkVertical = linkVertical()
+export const createLinkVertical = linkVertical()
   .x(d => d[0])
   .y(d => d[1])
 
-export function generateLink<M, I>(link: ModuleGraphLink<M, I>, spacing: ModuleGraphSpacing) {
-  if (link.target.x! <= link.source.x!) {
-    return createLinkVertical({
+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!],
     })
   }
-  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'
 }
@@ -140,7 +143,7 @@ export function createModuleGraph<M extends { id: string }, I>(options: ModuleGr
     })
   }
 
-  const _calculateGraph = options.buildGraphFn({
+  const _calculateGraph = options.generateGraph({
     isFirstCalculateGraph,
     hierarchy,
     tree,
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 23b063e0..cbbd04d6 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
@@ -57,17 +57,17 @@ createModuleGraph<ChunkInfo, ChunkImport>({
     margin: 120,
     gap: 80,
   },
-  buildGraphFn: (options) => {
+  generateGraph: (options) => {
     const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap } = options
     const rootNodes = computed(() => normalizedChunks.value)
-    return function () {
+    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') {
+          if (`${parent.module?.id}` === '~root') {
             rootNodes.value.forEach((x) => {
               if (isFirstCalculateGraph.value) {
                 childToParentMap.set(x.id, '~root')
@@ -80,7 +80,7 @@ createModuleGraph<ChunkInfo, ChunkImport>({
             }))
           }
 
-          if (collapsedNodes.has(`${parent.module.id}`) || parent.end) {
+          if (collapsedNodes.has(`${parent.module?.id}`) || parent.end) {
             return []
           }
 
diff --git a/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue b/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
index c1a704d2..2e4f81f0 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
@@ -143,13 +143,13 @@ createModuleGraph<ModuleListItem, ModuleImport>({
     margin: 800,
     gap: 150,
   },
-  buildGraphFn: (options) => {
+  generateGraph: (options) => {
     const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap, focusOn } = options
     const rootModules = computed(() => {
       return searched.value.filter(x => x.importers.length === 0)
     })
 
-    return function (focusOnFirstRootNode = true) {
+    return (focusOnFirstRootNode = true) => {
       width.value = window.innerWidth
       height.value = window.innerHeight
 

From 3148e0c52c3e3e58e704931be10afa5a58129ab2 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 21 Aug 2025 22:29:26 +0800
Subject: [PATCH 4/4] chore: update

---
 .../src/app/components/chunks/Graph.vue       | 161 +++++++++++++++
 .../src/app/components/modules/Graph.vue      | 183 ++++++++++++++++++
 .../app/pages/session/[session]/chunks.vue    | 153 +--------------
 .../pages/session/[session]/graph/index.vue   | 174 +----------------
 4 files changed, 352 insertions(+), 319 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/chunks/Graph.vue
 create mode 100644 packages/devtools-vite/src/app/components/modules/Graph.vue

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/modules/Graph.vue b/packages/devtools-vite/src/app/components/modules/Graph.vue
new file mode 100644
index 00000000..a2258206
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/modules/Graph.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import type { ModuleImport, ModuleListItem, SessionContext } from '~~/shared/types'
+import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
+import { computed, nextTick, unref } from 'vue'
+import { createModuleGraph } from '~/composables/moduleGraph'
+
+const props = defineProps<{
+  modules: ModuleListItem[]
+  session: SessionContext
+}>()
+
+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)
+    })
+
+    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,
+            }))
+          }
+
+          if (collapsedNodes.has(parent.module.id)) {
+            return []
+          }
+
+          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
+      }
+
+      // Calculate the layout
+      const layout = tree<ModuleGraphNode<ModuleListItem, ModuleImport>>()
+        .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
+            ?.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 < 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<ModuleListItem, ModuleImport> => {
+          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))
+        const moduleId = rootModules.value?.[0]?.id
+        if (focusOnFirstRootNode && moduleId) {
+          nextTick(() => {
+            focusOn(moduleId, false)
+          })
+        }
+      })
+    }
+  },
+})
+</script>
+
+<template>
+  <DisplayModuleGraph
+    :session="session"
+    :modules="modules"
+  >
+    <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/pages/session/[session]/chunks.vue b/packages/devtools-vite/src/app/pages/session/[session]/chunks.vue
index cbbd04d6..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,18 +1,11 @@
 <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 type { ClientSettings } from '~/state/settings'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
-import { computed, nextTick, unref } from 'vue'
-import { createModuleGraph } from '~/composables/moduleGraph'
+import { computed } from 'vue'
 import { settings } from '~/state/settings'
 
-type ChunkInfo = Chunk & {
-  id: string
-}
-
 const props = defineProps<{
   session: SessionContext
 }>()
@@ -47,128 +40,6 @@ const normalizedChunks = computed(() => chunks.value?.map(x => ({
 function toggleDisplay(type: ClientSettings['chunkViewType']) {
   settings.value.chunkViewType = type
 }
-
-createModuleGraph<ChunkInfo, ChunkImport>({
-  modules: normalizedChunks,
-  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
-    const rootNodes = computed(() => normalizedChunks.value)
-    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') {
-            rootNodes.value.forEach((x) => {
-              if (isFirstCalculateGraph.value) {
-                childToParentMap.set(x.id, '~root')
-              }
-            })
-            return rootNodes.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>
@@ -202,26 +73,10 @@ createModuleGraph<ChunkInfo, ChunkImport>({
       </div>
     </template>
     <template v-else-if="settings.chunkViewType === 'graph'">
-      <DisplayModuleGraph
+      <ChunksGraph
         :session="session"
-        :modules="normalizedChunks"
-      >
-        <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>
+        :chunks="normalizedChunks"
+      />
     </template>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue b/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
index 2e4f81f0..ff4a99c8 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/graph/index.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import type { ModuleImport, ModuleListItem, SessionContext } from '~~/shared/types'
-import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
+import type { SessionContext } from '~~/shared/types'
 import type { ClientSettings } from '~/state/settings'
 import { useRoute, useRouter } from '#app/composables/router'
 import { clearUndefined, toArray } from '@antfu/utils'
 import { computedWithControl, debouncedWatch } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, nextTick, ref, unref } from 'vue'
-import { createModuleGraph } from '~/composables/moduleGraph'
-
+import { computed, ref } from 'vue'
 import { settings } from '~/state/settings'
 import { parseReadablePath } from '~/utils/filepath'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
@@ -133,150 +130,6 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
   }
   settings.value.moduleGraphViewType = type
 }
-
-createModuleGraph<ModuleListItem, ModuleImport>({
-  modules: searched,
-  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 searched.value.filter(x => x.importers.length === 0)
-    })
-
-    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,
-            }))
-          }
-
-          if (collapsedNodes.has(parent.module.id)) {
-            return []
-          }
-
-          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
-      }
-
-      // Calculate the layout
-      const layout = tree<ModuleGraphNode<ModuleListItem, ModuleImport>>()
-        .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
-            ?.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 < 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<ModuleListItem, ModuleImport> => {
-          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))
-        const moduleId = rootModules.value?.[0]?.id
-        if (focusOnFirstRootNode && moduleId) {
-          nextTick(() => {
-            focusOn(moduleId, false)
-          })
-        }
-      })
-    }
-  },
-})
 </script>
 
 <template>
@@ -327,29 +180,10 @@ createModuleGraph<ModuleListItem, ModuleImport>({
       </div>
     </template>
     <template v-else-if="settings.moduleGraphViewType === 'graph'">
-      <DisplayModuleGraph
+      <ModulesGraph
         :session="session"
         :modules="searched"
-      >
-        <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>
     <template v-else>
       <ModulesFolder