From 9d1845517b2d4cfb23cb9657cb6b0aa4036cde6c Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Wed, 25 Feb 2026 13:16:06 +0800
Subject: [PATCH 1/7] chore: remove dixrender/renderer.go file

---
 dixrender/renderer.go | 144 ------------------------------------------
 1 file changed, 144 deletions(-)
 delete mode 100644 dixrender/renderer.go

diff --git a/dixrender/renderer.go b/dixrender/renderer.go
deleted file mode 100644
index 2fbcfcc..0000000
--- a/dixrender/renderer.go
+++ /dev/null
@@ -1,144 +0,0 @@
-package dixrender
-
-import (
-	"bytes"
-	"fmt"
-	"sort"
-	"strings"
-)
-
-// DotRenderer implements DOT format graph rendering
-type DotRenderer struct {
-	Buf    *bytes.Buffer // Exported for testing
-	indent string
-	cache  map[string]string
-}
-
-func NewDotRenderer() *DotRenderer {
-	return &DotRenderer{
-		Buf:    &bytes.Buffer{},
-		indent: "",
-		cache:  make(map[string]string),
-	}
-}
-
-// Writef writes a formatted string to the renderer buffer
-func (d *DotRenderer) Writef(format string, args ...any) {
-	_, _ = fmt.Fprintf(d.Buf, d.indent+format+"\n", args...)
-}
-
-func (d *DotRenderer) writef(format string, args ...any) {
-	d.Writef(format, args...)
-}
-
-// escapeDotString escapes special characters for DOT format
-func escapeDotString(s string) string {
-	s = strings.ReplaceAll(s, "\\", "\\\\")
-	s = strings.ReplaceAll(s, "\"", "\\\"")
-	s = strings.ReplaceAll(s, "\n", "\\n")
-	s = strings.ReplaceAll(s, "\r", "\\r")
-	s = strings.ReplaceAll(s, "\t", "\\t")
-	return s
-}
-
-func (d *DotRenderer) RenderNode(name string, attrs map[string]string) {
-	escapedName := escapeDotString(name)
-	d.writef(`"%s" [label="%s"%s]`, escapedName, escapedName, d.formatAttrs(attrs))
-}
-
-func (d *DotRenderer) RenderEdge(from, to string, attrs map[string]string) {
-	d.writef(`"%s" -> "%s" %s`, escapeDotString(from), escapeDotString(to), d.formatAttrs(attrs))
-}
-
-func (d *DotRenderer) BeginSubgraph(name, label string) {
-	d.writef("subgraph %s {", escapeDotString(name))
-	d.indent += "\t"
-	d.writef("label=\"%s\"", escapeDotString(label))
-}
-
-func (d *DotRenderer) EndSubgraph() {
-	d.indent = d.indent[:len(d.indent)-1]
-	d.writef("}")
-}
-
-func (d *DotRenderer) String() string {
-	return d.Buf.String()
-}
-
-// FormatAttrs formats attributes map into DOT format string
-func (d *DotRenderer) FormatAttrs(attrs map[string]string) string {
-	return d.formatAttrs(attrs)
-}
-
-func (d *DotRenderer) formatAttrs(attrs map[string]string) string {
-	if len(attrs) == 0 {
-		return ""
-	}
-
-	// Sort keys to ensure consistent ordering
-	keys := make([]string, 0, len(attrs))
-	for k := range attrs {
-		keys = append(keys, k)
-	}
-	sort.Strings(keys)
-
-	var result bytes.Buffer
-	result.WriteString(" [")
-	first := true
-	for _, k := range keys {
-		if !first {
-			result.WriteString(",")
-		}
-		first = false
-		v := attrs[k]
-		fmt.Fprintf(&result, "%s=\"%s\"", k, v)
-	}
-	result.WriteString("]")
-	return result.String()
-}
-
-// Graph represents dependency graphs in DOT format
-type Graph struct {
-	Objects       string `json:"objects"`
-	Providers     string `json:"providers"`
-	ProviderTypes string `json:"provider_types"`
-}
-
-// GraphOptions holds configuration options for graph rendering
-type GraphOptions struct {
-	// MaxDepth limits the depth of dependencies to show (0 = unlimited)
-	MaxDepth int
-
-	// GroupByPackage enables grouping nodes by package
-	GroupByPackage bool
-
-	// ShowStructFields controls whether to show struct field dependencies
-	ShowStructFields bool
-
-	// FilterPackages allows filtering by specific packages
-	FilterPackages []string
-}
-
-// NewGraphOptions creates GraphOptions with sensible defaults
-func NewGraphOptions() *GraphOptions {
-	return &GraphOptions{
-		MaxDepth:         0, // Unlimited by default
-		GroupByPackage:   true,
-		ShowStructFields: false,
-		FilterPackages:   []string{},
-	}
-}
-
-// ShouldIncludeType checks if a type should be included in the graph based on filters
-func (opts *GraphOptions) ShouldIncludeType(typ string) bool {
-	if len(opts.FilterPackages) == 0 {
-		return true
-	}
-
-	for _, pkg := range opts.FilterPackages {
-		if strings.Contains(typ, pkg) {
-			return true
-		}
-	}
-	return false
-}

From 481965cefe189a4af95f9c5b4faed2a9b52201d9 Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Wed, 25 Feb 2026 13:18:17 +0800
Subject: [PATCH 2/7] build: update go.mod and go.sum dependencies

---
 example/go.mod | 8 ++------
 example/go.sum | 4 ----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/example/go.mod b/example/go.mod
index f8099a0..e8e20ac 100644
--- a/example/go.mod
+++ b/example/go.mod
@@ -4,10 +4,6 @@ go 1.24.0
 
 replace github.com/pubgo/dix/v2 => ../
 
-require github.com/pubgo/dix/v2 v2.0.0-alpha.3
+require github.com/pubgo/dix/v2 v2.0.0-00010101000000-000000000000
 
-require (
-	github.com/lmittmann/tint v1.1.2 // indirect
-	github.com/samber/lo v1.52.0 // indirect
-	golang.org/x/text v0.31.0 // indirect
-)
+require github.com/lmittmann/tint v1.1.2 // indirect
diff --git a/example/go.sum b/example/go.sum
index 802974a..ca8ef76 100644
--- a/example/go.sum
+++ b/example/go.sum
@@ -1,6 +1,2 @@
 github.com/lmittmann/tint v1.1.2 h1:2CQzrL6rslrsyjqLDwD11bZ5OpLBPU+g3G/r5LSfS8w=
 github.com/lmittmann/tint v1.1.2/go.mod h1:HIS3gSy7qNwGCj+5oRjAutErFBl4BzdQP6cJZ0NfMwE=
-github.com/samber/lo v1.52.0 h1:Rvi+3BFHES3A8meP33VPAxiBZX/Aws5RxrschYGjomw=
-github.com/samber/lo v1.52.0/go.mod h1:4+MXEGsJzbKGaUEQFKBq2xtfuznW9oz/WrgyzMzRoM0=
-golang.org/x/text v0.31.0 h1:aC8ghyu4JhP8VojJ2lEHBnochRno1sgL6nEi9WGFGMM=
-golang.org/x/text v0.31.0/go.mod h1:tKRAlv61yKIjGGHX/4tP1LTbc13YSec1pxVEWXzfoeM=

From 00c15cc00e5eaad19c8af77ffe99749b0ea5da79 Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Wed, 25 Feb 2026 13:49:39 +0800
Subject: [PATCH 3/7] docs: add base path support for server routes

---
 dixhttp/README.md     | 12 ++++++++
 dixhttp/README_zh.md  | 12 ++++++++
 dixhttp/server.go     | 68 +++++++++++++++++++++++++++++++++++++------
 dixhttp/template.html | 11 ++++---
 4 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/dixhttp/README.md b/dixhttp/README.md
index adf7cd9..9d28f1e 100644
--- a/dixhttp/README.md
+++ b/dixhttp/README.md
@@ -54,6 +54,18 @@ func main() {
 
 Open browser and visit `http://localhost:8080` to view the dependency graph.
 
+### Base Path / Prefix
+
+If you need to mount the UI and API under a path prefix (e.g. behind a gateway), use `WithBasePath`:
+
+```go
+server := dixhttp.NewServerWithOptions(
+  (*dixinternal.Dix)(di),
+  dixhttp.WithBasePath("/dix"),
+)
+// Visit http://localhost:8080/dix/
+```
+
 ## UI Layout
 
 ```
diff --git a/dixhttp/README_zh.md b/dixhttp/README_zh.md
index e3e709b..b0f0c60 100644
--- a/dixhttp/README_zh.md
+++ b/dixhttp/README_zh.md
@@ -54,6 +54,18 @@ func main() {
 
 打开浏览器访问 `http://localhost:8080` 即可查看依赖关系图。
 
+### 配置访问前缀
+
+如果需要将页面和 API 挂载到一个前缀路径（例如网关转发），可以使用 `WithBasePath`：
+
+```go
+server := dixhttp.NewServerWithOptions(
+  (*dixinternal.Dix)(di),
+  dixhttp.WithBasePath("/dix"),
+)
+// 访问 http://localhost:8080/dix/
+```
+
 ## 界面布局
 
 ```
diff --git a/dixhttp/server.go b/dixhttp/server.go
index 5ef068e..c0846ac 100644
--- a/dixhttp/server.go
+++ b/dixhttp/server.go
@@ -18,13 +18,36 @@ var htmlTemplate string
 type Server struct {
 	dix *dixinternal.Dix
 	mux *http.ServeMux
+	// basePath is an optional URL prefix (no trailing slash). Example: "/dix"
+	basePath string
 }
 
 // NewServer creates a new HTTP server for dependency visualization
 func NewServer(dix *dixinternal.Dix) *Server {
+	return NewServerWithOptions(dix)
+}
+
+// ServerOption customizes the HTTP server behavior.
+type ServerOption func(*Server)
+
+// WithBasePath sets an optional URL prefix for all routes. Example: "/dix".
+func WithBasePath(basePath string) ServerOption {
+	return func(s *Server) {
+		s.basePath = normalizeBasePath(basePath)
+	}
+}
+
+// NewServerWithOptions creates a new HTTP server with options.
+func NewServerWithOptions(dix *dixinternal.Dix, opts ...ServerOption) *Server {
 	s := &Server{
-		dix: dix,
-		mux: http.NewServeMux(),
+		dix:      dix,
+		mux:      http.NewServeMux(),
+		basePath: "",
+	}
+	for _, opt := range opts {
+		if opt != nil {
+			opt(s)
+		}
 	}
 	s.setupRoutes()
 	return s
@@ -32,12 +55,26 @@ func NewServer(dix *dixinternal.Dix) *Server {
 
 // setupRoutes configures all HTTP routes
 func (s *Server) setupRoutes() {
-	s.mux.HandleFunc("/", s.HandleIndex)
-	s.mux.HandleFunc("/api/dependencies", s.HandleDependencies)
-	s.mux.HandleFunc("/api/stats", s.HandleStats)
-	s.mux.HandleFunc("/api/packages", s.HandlePackages)
-	s.mux.HandleFunc("/api/package/", s.HandlePackageDetails)
-	s.mux.HandleFunc("/api/type/", s.HandleTypeDetails)
+	base := s.basePath
+	indexPath := "/"
+	if base != "" {
+		indexPath = base + "/"
+		// Redirect /base -> /base/
+		s.mux.HandleFunc(base, func(w http.ResponseWriter, r *http.Request) {
+			if r.URL.Path == base {
+				http.Redirect(w, r, indexPath, http.StatusMovedPermanently)
+				return
+			}
+			http.NotFound(w, r)
+		})
+	}
+
+	s.mux.HandleFunc(indexPath, s.HandleIndex)
+	s.mux.HandleFunc(base+"/api/dependencies", s.HandleDependencies)
+	s.mux.HandleFunc(base+"/api/stats", s.HandleStats)
+	s.mux.HandleFunc(base+"/api/packages", s.HandlePackages)
+	s.mux.HandleFunc(base+"/api/package/", s.HandlePackageDetails)
+	s.mux.HandleFunc(base+"/api/type/", s.HandleTypeDetails)
 }
 
 // ServeHTTP implements http.Handler interface
@@ -54,7 +91,8 @@ func (s *Server) ListenAndServe(addr string) error {
 func (s *Server) HandleIndex(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
 	w.WriteHeader(http.StatusOK)
-	fmt.Fprint(w, htmlTemplate)
+	html := strings.ReplaceAll(htmlTemplate, "__DIX_BASE_PATH__", s.basePath)
+	fmt.Fprint(w, html)
 }
 
 // HandleStats returns summary statistics
@@ -501,3 +539,15 @@ func writeJSON(w http.ResponseWriter, data any) {
 		http.Error(w, fmt.Sprintf("Failed to encode JSON: %v", err), http.StatusInternalServerError)
 	}
 }
+
+func normalizeBasePath(basePath string) string {
+	base := strings.TrimSpace(basePath)
+	if base == "" || base == "/" {
+		return ""
+	}
+	if !strings.HasPrefix(base, "/") {
+		base = "/" + base
+	}
+	base = strings.TrimRight(base, "/")
+	return base
+}
diff --git a/dixhttp/template.html b/dixhttp/template.html
index fc4efcb..2fb07a9 100644
--- a/dixhttp/template.html
+++ b/dixhttp/template.html
@@ -350,6 +350,9 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
     </div>
 
     <script>
+        const API_BASE = "__DIX_BASE_PATH__";
+        const apiUrl = (path) => (API_BASE ? API_BASE + path : path);
+
         function app() {
             return {
                 // State
@@ -389,7 +392,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
 
                 async loadStats() {
                     try {
-                        const res = await fetch('/api/stats');
+                        const res = await fetch(apiUrl('/api/stats'));
                         this.stats = await res.json();
                     } catch (e) {
                         console.error('加载统计失败:', e);
@@ -398,7 +401,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
 
                 async loadPackages() {
                     try {
-                        const res = await fetch('/api/packages');
+                        const res = await fetch(apiUrl('/api/packages'));
                         this.packages = await res.json();
                     } catch (e) {
                         console.error('加载包列表失败:', e);
@@ -413,7 +416,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                 async loadDependencies() {
                     this.loading = true;
                     try {
-                        let url = '/api/dependencies';
+                        let url = apiUrl('/api/dependencies');
                         if (this.currentPackage) {
                             url += '?package=' + encodeURIComponent(this.currentPackage);
                         }
@@ -891,7 +894,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     this.loading = true;
                     try {
                         const depth = parseInt(this.currentDepth) || 0;
-                        const url = `/api/type/${encodeURIComponent(typeName)}?depth=${depth}`;
+                        const url = apiUrl(`/api/type/${encodeURIComponent(typeName)}?depth=${depth}`);
                         const res = await fetch(url);
                         const data = await res.json();
                         this.renderTypeGraph(data);

From 8bcbd9a2cf40c647f2d0ad8c3ca8279d5615b85e Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Wed, 25 Feb 2026 15:11:45 +0800
Subject: [PATCH 4/7] refactor(api): deduplicate provider input types

---
 dixinternal/api.go | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/dixinternal/api.go b/dixinternal/api.go
index 6b88242..083e216 100644
--- a/dixinternal/api.go
+++ b/dixinternal/api.go
@@ -106,8 +106,26 @@ func (dix *Dix) GetProviderDetails() []ProviderDetails {
 		for _, providerFn := range providerList {
 			fnName := GetFnName(providerFn.fn)
 			var inputTypes []string
+			seen := make(map[string]bool)
 			for _, input := range providerFn.inputList {
-				inputTypes = append(inputTypes, input.typ.String())
+				if input.isStruct || input.typ.Kind() == reflect.Struct {
+					for _, in := range getProvideAllInputs(input.typ) {
+						name := in.typ.String()
+						if name == "" || seen[name] {
+							continue
+						}
+						seen[name] = true
+						inputTypes = append(inputTypes, name)
+					}
+					continue
+				}
+
+				name := input.typ.String()
+				if name == "" || seen[name] {
+					continue
+				}
+				seen[name] = true
+				inputTypes = append(inputTypes, name)
 			}
 			details = append(details, ProviderDetails{
 				OutputType:   outputType.String(),

From d08c5c687b03842d8fe19fdd159ab13a2f2bd3a9 Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Thu, 26 Feb 2026 10:41:58 +0800
Subject: [PATCH 5/7] docs: add group rules and prefix filter features

---
 dixhttp/README.md          |  63 +++-
 dixhttp/README_zh.md       |  62 +++-
 dixhttp/server.go          |  73 ++++
 dixhttp/template.html      | 707 ++++++++++++++++++++++++++++++++++++-
 dixinternal/api.go         |  37 ++
 example/cycle/main.go      |   3 -
 example/handler/main.go    |   6 -
 example/struct-out/main.go |   3 -
 8 files changed, 921 insertions(+), 33 deletions(-)

diff --git a/dixhttp/README.md b/dixhttp/README.md
index 9d28f1e..7fab872 100644
--- a/dixhttp/README.md
+++ b/dixhttp/README.md
@@ -12,6 +12,9 @@ This module provides an HTTP server to visualize dependency relationships in the
 - 🔄 **Bidirectional Dependency Tracking** - Show both upstream (dependencies) and downstream (dependents)
 - 📏 **Depth Control** - Limit dependency graph display levels (1-5 or all)
 - 🎨 **Multiple Layouts** - Support hierarchical and force-directed layouts
+- 🧩 **Group Rules (Prefix Aggregation)** - Aggregate nodes by package/prefix rules
+- 🔎 **Prefix Filter** - Show only nodes/providers matching a prefix
+- 🧭 **Group Subgraph** - View a group's internal + upstream/downstream dependencies
 - 📡 **RESTful API** - Provide JSON format dependency data
 
 ## Quick Start
@@ -155,6 +158,52 @@ Search `UserService` with different depths:
 - Depth 1: `Database ← UserService → Handler`
 - Depth 2: `Config ← Database ← UserService → Handler`
 
+### 🧩 Group Rules (Prefix Aggregation)
+
+You can aggregate nodes by **package or prefix** using group rules. Rules can be configured:
+
+- **In UI** (group list)
+- **From backend** via `RegisterGroupRules` (recommended for production)
+
+Backend registration:
+
+```go
+import "github.com/pubgo/dix/v2/dixhttp"
+
+dixhttp.RegisterGroupRules(
+  dixhttp.GroupRule{
+    Name: "service",
+    Prefixes: []string{
+      "github.com/acme/app/service",
+      "github.com/acme/app/internal/service",
+    },
+  },
+  dixhttp.GroupRule{
+    Name: "router",
+    Prefixes: []string{"github.com/acme/app/router"},
+  },
+)
+```
+
+The UI will auto-load `/api/group-rules` if local rules are empty.
+
+### 🔎 Prefix Filter
+
+The toolbar provides a **Prefix Filter** field. It filters the current graph to show only nodes/providers
+whose package/type/function name contains the given prefix. This works in:
+
+- Providers/Types view
+- Type-focused dependency view
+- Group subgraph view
+
+### 🧭 Group Subgraph
+
+Click a virtual group node to open the **group detail panel**, then click **View group graph** to see:
+
+- Internal nodes
+- Upstream & downstream dependencies
+- Depth control applied from the toolbar
+
 ### 📦 Package Grouping
 
 Left panel features:
@@ -212,8 +261,11 @@ Returns dependency data, supports package filtering
     {
       "id": "provider_*main.ServiceA_0",
       "output_type": "*main.ServiceA",
+      "output_pkg": "github.com/example/app/service",
       "function_name": "main.NewServiceA",
-      "input_types": ["*main.Config"]
+      "function_pkg": "github.com/example/app",
+      "input_types": ["*main.Config"],
+      "input_pkgs": ["github.com/example/app/config"]
     }
   ],
   "objects": [...],
@@ -238,6 +290,15 @@ Returns dependency chain for specified type
     {"from": "*db.Database", "to": "*service.UserService", "type": "dependency"}
   ]
 }
+
+### GET `/api/group-rules`
+Returns backend-registered group rules (used as UI defaults)
+
+```json
+[
+  {"name": "service", "prefixes": ["github.com/acme/app/service"]}
+]
+```
 ```
 
 ## Tech Stack
diff --git a/dixhttp/README_zh.md b/dixhttp/README_zh.md
index b0f0c60..f69bcb4 100644
--- a/dixhttp/README_zh.md
+++ b/dixhttp/README_zh.md
@@ -12,6 +12,9 @@
 - 🔄 **双向依赖追踪** - 同时展示依赖（上游）和被依赖（下游）关系
 - 📏 **深度控制** - 限制依赖图的展示层级（1-5级或全部）
 - 🎨 **多种布局** - 支持层级布局和力导向布局
+- 🧩 **分组清单（前缀聚合）** - 通过包路径/前缀聚合节点
+- 🔎 **前缀过滤** - 只显示匹配前缀的节点/Provider
+- 🧭 **组内子图** - 查看组内及上下游依赖
 - 📡 **RESTful API** - 提供 JSON 格式的依赖关系数据
 
 ## 快速开始
@@ -155,6 +158,51 @@ server := dixhttp.NewServerWithOptions(
 - 深度 1: `Database ← UserService → Handler`
 - 深度 2: `Config ← Database ← UserService → Handler`
 
+### 🧩 分组清单（前缀聚合）
+
+支持通过**包路径/前缀**聚合节点，规则来源：
+
+- **前端分组清单**
+- **后端全局注册**（推荐生产使用）
+
+后端注册示例：
+
+```go
+import "github.com/pubgo/dix/v2/dixhttp"
+
+dixhttp.RegisterGroupRules(
+  dixhttp.GroupRule{
+    Name: "service",
+    Prefixes: []string{
+      "github.com/acme/app/service",
+      "github.com/acme/app/internal/service",
+    },
+  },
+  dixhttp.GroupRule{
+    Name: "router",
+    Prefixes: []string{"github.com/acme/app/router"},
+  },
+)
+```
+
+当本地未配置分组清单时，前端会自动加载 `/api/group-rules`。
+
+### 🔎 前缀过滤
+
+工具栏提供“前缀过滤”，可按包路径/类型名/函数名过滤当前图：
+
+- Providers/类型视图
+- 类型依赖视图
+- 组内依赖视图
+
+### 🧭 组内子图
+
+点击虚拟组节点 → 详情面板 → “查看组内依赖图”，可以看到：
+
+- 组内节点
+- 上下游依赖
+- 受工具栏“深度”控制
+
 ### 📦 按包分组
 
 左侧面板功能：
@@ -212,8 +260,11 @@ server := dixhttp.NewServerWithOptions(
     {
       "id": "provider_*main.ServiceA_0",
       "output_type": "*main.ServiceA",
+      "output_pkg": "github.com/example/app/service",
       "function_name": "main.NewServiceA",
-      "input_types": ["*main.Config"]
+      "function_pkg": "github.com/example/app",
+      "input_types": ["*main.Config"],
+      "input_pkgs": ["github.com/example/app/config"]
     }
   ],
   "objects": [...],
@@ -238,6 +289,15 @@ server := dixhttp.NewServerWithOptions(
     {"from": "*db.Database", "to": "*service.UserService", "type": "dependency"}
   ]
 }
+
+### GET `/api/group-rules`
+返回后端注册的分组清单（前端默认配置）
+
+```json
+[
+  {"name": "service", "prefixes": ["github.com/acme/app/service"]}
+]
+```
 ```
 
 ## 技术栈
diff --git a/dixhttp/server.go b/dixhttp/server.go
index c0846ac..eeaf73a 100644
--- a/dixhttp/server.go
+++ b/dixhttp/server.go
@@ -7,6 +7,7 @@ import (
 	"net/http"
 	"strconv"
 	"strings"
+	"sync"
 
 	"github.com/pubgo/dix/v2/dixinternal"
 )
@@ -22,6 +23,62 @@ type Server struct {
 	basePath string
 }
 
+// GroupRule defines a group name with prefix list for aggregation.
+type GroupRule struct {
+	Name     string   `json:"name"`
+	Prefixes []string `json:"prefixes"`
+}
+
+var (
+	groupRulesMu sync.RWMutex
+	groupRules   []GroupRule
+)
+
+// RegisterGroupRules registers global group rules for visualization.
+// This can be called by business code to predefine group rules.
+func RegisterGroupRules(rules ...GroupRule) {
+	groupRulesMu.Lock()
+	defer groupRulesMu.Unlock()
+	groupRules = sanitizeGroupRules(rules)
+}
+
+func getGroupRules() []GroupRule {
+	groupRulesMu.RLock()
+	defer groupRulesMu.RUnlock()
+	if len(groupRules) == 0 {
+		return nil
+	}
+	result := make([]GroupRule, 0, len(groupRules))
+	for _, r := range groupRules {
+		result = append(result, GroupRule{Name: r.Name, Prefixes: append([]string{}, r.Prefixes...)})
+	}
+	return result
+}
+
+func sanitizeGroupRules(rules []GroupRule) []GroupRule {
+	var result []GroupRule
+	seen := make(map[string]bool)
+	for _, r := range rules {
+		name := strings.TrimSpace(r.Name)
+		if name == "" || seen[name] {
+			continue
+		}
+		seen[name] = true
+		var prefixes []string
+		prefixSeen := make(map[string]bool)
+		for _, p := range r.Prefixes {
+			pp := strings.TrimSpace(p)
+			if pp == "" || prefixSeen[pp] {
+				continue
+			}
+			prefixSeen[pp] = true
+			prefixes = append(prefixes, pp)
+		}
+		result = append(result, GroupRule{Name: name, Prefixes: prefixes})
+	}
+	return result
+}
+
 // NewServer creates a new HTTP server for dependency visualization
 func NewServer(dix *dixinternal.Dix) *Server {
 	return NewServerWithOptions(dix)
@@ -75,6 +132,7 @@ func (s *Server) setupRoutes() {
 	s.mux.HandleFunc(base+"/api/packages", s.HandlePackages)
 	s.mux.HandleFunc(base+"/api/package/", s.HandlePackageDetails)
 	s.mux.HandleFunc(base+"/api/type/", s.HandleTypeDetails)
+	s.mux.HandleFunc(base+"/api/group-rules", s.HandleGroupRules)
 }
 
 // ServeHTTP implements http.Handler interface
@@ -336,6 +394,15 @@ func (s *Server) HandleDependencies(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, data)
 }
 
+// HandleGroupRules returns global group rules for visualization.
+func (s *Server) HandleGroupRules(w http.ResponseWriter, r *http.Request) {
+	rules := getGroupRules()
+	if rules == nil {
+		rules = []GroupRule{}
+	}
+	writeJSON(w, rules)
+}
+
 // extractDependencyData extracts structured data from the Dix container
 func (s *Server) extractDependencyData(pkgFilter string, limit int) *DependencyData {
 	data := &DependencyData{
@@ -367,8 +434,11 @@ func (s *Server) extractDependencyData(pkgFilter string, limit int) *DependencyD
 		providerInfo := ProviderInfo{
 			ID:           providerID,
 			OutputType:   detail.OutputType,
+			OutputPkg:    detail.OutputPkg,
 			FunctionName: detail.FunctionName,
+			FunctionPkg:  detail.FunctionPkg,
 			InputTypes:   detail.InputTypes,
+			InputPkgs:    detail.InputPkgs,
 		}
 
 		// Add edges from input types to provider output
@@ -472,8 +542,11 @@ type DependencyData struct {
 type ProviderInfo struct {
 	ID           string   `json:"id"`
 	OutputType   string   `json:"output_type"`
+	OutputPkg    string   `json:"output_pkg"`
 	FunctionName string   `json:"function_name"`
+	FunctionPkg  string   `json:"function_pkg"`
 	InputTypes   []string `json:"input_types"`
+	InputPkgs    []string `json:"input_pkgs"`
 }
 
 // ObjectInfo contains information about an object instance
diff --git a/dixhttp/template.html b/dixhttp/template.html
index 2fb07a9..12739c8 100644
--- a/dixhttp/template.html
+++ b/dixhttp/template.html
@@ -177,6 +177,7 @@ <h3 x-show="!sidebarCollapsed" class="text-sm font-semibold text-gray-600 pl-2">
                         <span class="text-xs font-medium text-gray-500">深度:</span>
                         <select 
                             x-model="currentDepth"
+                            @change="onDepthChange()"
                             class="px-3 py-1.5 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-primary-500 outline-none"
                         >
                             <option value="1">1 级</option>
@@ -186,6 +187,129 @@ <h3 x-show="!sidebarCollapsed" class="text-sm font-semibold text-gray-600 pl-2">
                             <option value="0">全部</option>
                         </select>
                     </div>
+                    <div class="flex items-center gap-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-500 cursor-pointer">
+                            <input type="checkbox" x-model="aggregateGroups" @change="saveLocalState(); renderGraph()" class="rounded border-gray-300">
+                            按分组聚合
+                        </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-500 cursor-pointer">
+                            <input type="checkbox" x-model="debugGroupMatching" class="rounded border-gray-300">
+                            调试分组匹配
+                        </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span class="text-xs font-medium text-gray-500">前缀过滤:</span>
+                        <input
+                            type="text"
+                            x-model="filterPrefix"
+                            @input="renderGraph()"
+                            placeholder="输入包路径/类型/函数前缀"
+                            class="w-64 px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 outline-none"
+                        >
+                        <button
+                            @click="filterPrefix=''; renderGraph()"
+                            class="px-2 py-1 text-xs border border-gray-300 rounded-md hover:bg-gray-50"
+                        >
+                            清除
+                        </button>
+                    </div>
+                    <details class="text-xs">
+                        <summary class="cursor-pointer text-gray-500">分组清单</summary>
+                        <div class="mt-2 bg-white border border-gray-200 rounded-lg p-3 w-[520px]">
+                            <div class="flex items-center gap-2 mb-2">
+                                <input
+                                    type="text"
+                                    x-model="newGroupName"
+                                    placeholder="组名（如 service）"
+                                    class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 outline-none"
+                                >
+                                <input
+                                    type="text"
+                                    x-model="newGroupPrefix"
+                                    placeholder="匹配前缀（如 github.com/acme/app/service/）"
+                                    class="flex-[2] px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 outline-none"
+                                >
+                                <button
+                                    @click="addGroup()"
+                                    class="px-2 py-1 text-xs bg-primary-500 text-white rounded-md hover:bg-primary-600"
+                                >
+                                    添加
+                                </button>
+                            </div>
+                            <div class="mb-2">
+                                <div class="text-[11px] text-gray-500 mb-1">可选前缀（来自包路径，点击填充）</div>
+                                <div class="flex flex-wrap gap-2 max-h-24 overflow-y-auto">
+                                    <template x-for="p in prefixSuggestions" :key="p">
+                                        <button
+                                            @click="newGroupPrefix = p"
+                                            class="px-2 py-1 text-[11px] border border-gray-200 rounded-md hover:bg-gray-50"
+                                            x-text="p"
+                                        ></button>
+                                    </template>
+                                    <div x-show="prefixSuggestions.length === 0" class="text-[11px] text-gray-400">暂无可选前缀</div>
+                                </div>
+                            </div>
+                            <div class="space-y-2 max-h-48 overflow-y-auto">
+                                <template x-for="(grp, gidx) in groupRules" :key="grp.name">
+                                    <div class="border border-gray-200 rounded-md p-2">
+                                        <div class="flex items-center justify-between mb-1">
+                                            <div class="font-medium text-gray-700" x-text="grp.name"></div>
+                                            <button
+                                                @click="removeGroup(gidx)"
+                                                class="text-xs text-red-500 hover:underline"
+                                            >
+                                                删除组
+                                            </button>
+                                        </div>
+                                        <div class="flex items-center gap-2 mb-2">
+                                            <input
+                                                type="text"
+                                                x-model="grp._rename"
+                                                placeholder="新组名"
+                                                class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 outline-none"
+                                            >
+                                            <button
+                                                @click="renameGroup(gidx)"
+                                                class="px-2 py-1 text-xs border border-gray-300 rounded-md hover:bg-gray-50"
+                                            >
+                                                修改
+                                            </button>
+                                        </div>
+                                        <div class="space-y-1">
+                                            <template x-for="(p, pidx) in grp.prefixes" :key="p + pidx">
+                                                <div class="flex items-center gap-2">
+                                                    <span class="text-gray-500 break-all" x-text="p"></span>
+                                                    <button
+                                                        @click="removePrefix(gidx, pidx)"
+                                                        class="text-xs text-red-400 hover:underline"
+                                                    >
+                                                        移除
+                                                    </button>
+                                                </div>
+                                            </template>
+                                        </div>
+                                        <div class="flex items-center gap-2 mt-2">
+                                            <input
+                                                type="text"
+                                                x-model="grp._newPrefix"
+                                                placeholder="新增前缀"
+                                                class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 outline-none"
+                                            >
+                                            <button
+                                                @click="addPrefix(gidx)"
+                                                class="px-2 py-1 text-xs border border-gray-300 rounded-md hover:bg-gray-50"
+                                            >
+                                                添加前缀
+                                            </button>
+                                        </div>
+                                    </div>
+                                </template>
+                                <div x-show="groupRules.length === 0" class="text-gray-400 text-xs">暂无分组</div>
+                            </div>
+                        </div>
+                    </details>
                     <button 
                         @click="resetView()"
                         class="px-3 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition flex items-center gap-1"
@@ -314,6 +438,10 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">
                                 <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">类型</h4>
                                 <div class="text-sm text-gray-700 break-all leading-relaxed" x-text="selectedNode.data.fullType"></div>
                             </div>
+                            <div class="mb-5" x-show="selectedNode.data.packagePath">
+                                <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">包路径</h4>
+                                <div class="text-sm text-gray-700 break-all leading-relaxed" x-text="selectedNode.data.packagePath"></div>
+                            </div>
                             <button 
                                 @click="showDependencyGraph(selectedNode.data.fullType, 'type')"
                                 class="w-full px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition flex items-center justify-center gap-2"
@@ -322,6 +450,33 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">类型</h4>
                             </button>
                         </div>
                     </template>
+                    <!-- Group Detail -->
+                    <template x-if="selectedNode && selectedNode.data && selectedNode.data.type === 'group'">
+                        <div>
+                            <div class="mb-5">
+                                <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">分组</h4>
+                                <div class="text-sm text-gray-700 break-all leading-relaxed" x-text="selectedNode.data.group"></div>
+                            </div>
+                            <button
+                                @click="showGroupGraph(selectedNode.data.group)"
+                                class="w-full px-4 py-2 mb-4 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition flex items-center justify-center gap-2"
+                            >
+                                <span>🧩</span> 查看组内依赖图
+                            </button>
+                            <div class="mb-5">
+                                <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">包含节点</h4>
+                                <div class="text-xs text-gray-500 mb-2" x-text="(groupMembers[selectedNode.data.group] || []).length + ' 个'"></div>
+                                <ul class="space-y-1 max-h-64 overflow-y-auto">
+                                    <template x-for="item in (groupMembers[selectedNode.data.group] || [])" :key="item.id">
+                                        <li class="px-3 py-2 bg-gray-100 rounded text-xs break-all">
+                                            <div class="text-gray-700" x-text="item.id"></div>
+                                            <div class="text-gray-400" x-text="item.packagePath"></div>
+                                        </li>
+                                    </template>
+                                </ul>
+                            </div>
+                        </div>
+                    </template>
                 </div>
                 <!-- Legend -->
                 <div class="p-4 border-t border-gray-200 bg-gray-50">
@@ -370,6 +525,17 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                 allData: null,
                 selectedNode: null,
                 network: null,
+                focusedType: null,
+                focusedGraph: null,
+                focusedGroup: null,
+                aggregateGroups: true,
+                debugGroupMatching: false,
+                groupRules: [],
+                newGroupName: '',
+                newGroupPrefix: '',
+                storageKey: 'dix.groupRules.v1',
+                groupMembers: {},
+                filterPrefix: '',
 
                 // Computed
                 get filteredPackages() {
@@ -383,13 +549,39 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     return this.packages.reduce((sum, p) => sum + p.provider_count, 0);
                 },
 
+                get prefixSuggestions() {
+                    return this.getPackagePrefixSuggestions();
+                },
+
                 // Methods
                 async init() {
+                    this.loadLocalState();
+                    await this.loadGroupRules();
                     await this.loadStats();
                     await this.loadPackages();
                     await this.loadDependencies();
                 },
 
+                async loadGroupRules() {
+                    try {
+                        const res = await fetch(apiUrl('/api/group-rules'));
+                        const rules = await res.json();
+                        if (Array.isArray(rules) && rules.length > 0) {
+                            if (!this.groupRules || this.groupRules.length === 0) {
+                                this.groupRules = rules.map(g => ({
+                                    name: g.name,
+                                    prefixes: Array.isArray(g.prefixes) ? g.prefixes : [],
+                                    _newPrefix: '',
+                                    _rename: ''
+                                }));
+                                this.saveLocalState();
+                            }
+                        }
+                    } catch (e) {
+                        console.warn('加载分组清单失败:', e);
+                    }
+                },
+
                 async loadStats() {
                     try {
                         const res = await fetch(apiUrl('/api/stats'));
@@ -432,6 +624,8 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
 
                 switchView(view) {
                     this.currentView = view;
+                    this.focusedType = null;
+                    this.focusedGraph = null;
                     this.renderGraph();
                 },
 
@@ -442,9 +636,30 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     this.globalSearch = '';
                     this.searchResults = [];
                     this.selectedNode = null;
+                    this.focusedType = null;
+                    this.focusedGraph = null;
+                    this.saveLocalState();
                     this.loadDependencies();
                 },
 
+                onDepthChange() {
+                    if (this.focusedType) {
+                        if (this.focusedGraph === 'dependency') {
+                            this.showDependencyGraph(this.focusedType, 'type');
+                            return;
+                        }
+                        if (this.focusedGraph === 'type') {
+                            this.focusOnType(this.focusedType);
+                            return;
+                        }
+                    }
+                    if (this.focusedGraph === 'group' && this.focusedGroup) {
+                        this.showGroupGraph(this.focusedGroup);
+                        return;
+                    }
+                    this.renderGraph();
+                },
+
                 // Global search functionality
                 onGlobalSearchInput() {
                     if (!this.allData || this.globalSearch.length < 1) {
@@ -530,10 +745,15 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                 showDependencyGraph(targetType, nodeType) {
                     if (!this.allData) return;
 
+                    this.focusedType = targetType;
+                    this.focusedGraph = 'dependency';
+                    this.focusedGroup = null;
+
                     const depth = parseInt(this.currentDepth) || 2;
                     const nodes = [];
                     const edges = [];
                     const nodeMap = new Map();
+                    const typePkgMap = this.buildTypePkgMap();
 
                     // 构建类型到 Provider 的映射
                     const typeToProviders = new Map(); // outputType -> providers
@@ -634,7 +854,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                 title: `类型: ${type}\n层级: ${level}\n${direction === 'dependency' ? '← 依赖' : '→ 被依赖'}`,
                                 color: { background: bgColor, border: borderColor },
                                 level: direction === 'dependency' ? -level : level,
-                                data: { type: 'type', fullType: type }
+                                data: { type: 'type', fullType: type, packagePath: typePkgMap.get(type) || '' }
                             });
                             nodeMap.set(type, true);
                         }
@@ -660,10 +880,13 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     });
 
                     // 渲染图形
+                    const aggregated = this.aggregateByGroups(nodes, edges, new Set([targetType]));
+                    const filteredByPrefix = this.filterByPrefix(aggregated.nodes, aggregated.edges, new Set([targetType]));
+
                     const container = document.getElementById('network');
                     const graphData = {
-                        nodes: new vis.DataSet(nodes),
-                        edges: new vis.DataSet(edges)
+                        nodes: new vis.DataSet(filteredByPrefix.nodes),
+                        edges: new vis.DataSet(filteredByPrefix.edges)
                     };
 
                     if (this.network) {
@@ -703,9 +926,14 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                 renderGraph() {
                     if (!this.allData) return;
 
+                    this.focusedType = null;
+                    this.focusedGraph = null;
+                    this.focusedGroup = null;
+
                     const nodes = [];
                     const edges = [];
                     const nodeMap = new Map();
+                    const typePkgMap = this.buildTypePkgMap();
 
                     if (this.currentView === 'providers') {
                         this.allData.providers.forEach((provider) => {
@@ -722,7 +950,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                     color: { background: '#bbf7d0', border: '#22c55e' },
                                     shape: 'box',
                                     font: { size: 11 },
-                                    data: provider
+                                    data: { ...provider, type: 'provider', packagePath: provider.function_pkg || '' }
                                 });
                                 nodeMap.set(providerNodeId, true);
                             }
@@ -736,7 +964,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                     color: { background: '#bfdbfe', border: '#3b82f6' },
                                     shape: 'ellipse',
                                     font: { size: 10 },
-                                    data: { type: 'type', fullType: provider.output_type }
+                                    data: { type: 'type', fullType: provider.output_type, packagePath: typePkgMap.get(provider.output_type) || provider.output_pkg || '' }
                                 });
                                 nodeMap.set(provider.output_type, true);
                             }
@@ -759,7 +987,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                         color: { background: '#bfdbfe', border: '#3b82f6' },
                                         shape: 'ellipse',
                                         font: { size: 10 },
-                                        data: { type: 'type', fullType: inputType }
+                                        data: { type: 'type', fullType: inputType, packagePath: typePkgMap.get(inputType) || '' }
                                     });
                                     nodeMap.set(inputType, true);
                                 }
@@ -784,7 +1012,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                     label: this.formatTypeName(edge.from),
                                     title: '类型: ' + edge.from,
                                     color: { background: '#bfdbfe', border: '#3b82f6' },
-                                    data: { type: 'type', fullType: edge.from }
+                                    data: { type: 'type', fullType: edge.from, packagePath: typePkgMap.get(edge.from) || '' }
                                 });
                                 nodeMap.set(edge.from, true);
                             }
@@ -795,7 +1023,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                     label: this.formatTypeName(edge.to),
                                     title: '类型: ' + edge.to,
                                     color: { background: '#bfdbfe', border: '#3b82f6' },
-                                    data: { type: 'type', fullType: edge.to }
+                                    data: { type: 'type', fullType: edge.to, packagePath: typePkgMap.get(edge.to) || '' }
                                 });
                                 nodeMap.set(edge.to, true);
                             }
@@ -810,10 +1038,13 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     }
 
                     // Create network
+                    const aggregated = this.aggregateByGroups(nodes, edges);
+                    const filteredByPrefix = this.filterByPrefix(aggregated.nodes, aggregated.edges);
+
                     const container = document.getElementById('network');
                     const data = {
-                        nodes: new vis.DataSet(nodes),
-                        edges: new vis.DataSet(edges)
+                        nodes: new vis.DataSet(filteredByPrefix.nodes),
+                        edges: new vis.DataSet(filteredByPrefix.edges)
                     };
 
                     const options = this.getNetworkOptions();
@@ -845,8 +1076,11 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     });
                 },
 
-                getNetworkOptions() {
-                    const isHierarchical = this.currentLayout === 'hierarchical';
+                getNetworkOptions(forceHierarchical = false) {
+                    const isHierarchical = forceHierarchical || this.currentLayout === 'hierarchical';
+                    const levelSeparation = 120;
+                    const nodeSpacing = 150;
+                    const treeSpacing = 150;
                     return {
                         nodes: {
                             shape: 'box',
@@ -880,9 +1114,9 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                 enabled: true,
                                 direction: 'UD',
                                 sortMethod: 'directed',
-                                levelSeparation: 120,
-                                nodeSpacing: 150,
-                                treeSpacing: 150
+                                levelSeparation,
+                                nodeSpacing,
+                                treeSpacing
                             }
                         } : {
                             hierarchical: { enabled: false }
@@ -892,6 +1126,9 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
 
                 async focusOnType(typeName) {
                     this.loading = true;
+                    this.focusedType = typeName;
+                    this.focusedGraph = 'type';
+                    this.focusedGroup = null;
                     try {
                         const depth = parseInt(this.currentDepth) || 0;
                         const url = apiUrl(`/api/type/${encodeURIComponent(typeName)}?depth=${depth}`);
@@ -909,6 +1146,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     const nodes = [];
                     const edges = [];
                     const nodeMap = new Map();
+                    const typePkgMap = this.buildTypePkgMap();
 
                     data.nodes.forEach(node => {
                         if (!nodeMap.has(node.id)) {
@@ -921,7 +1159,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                                     ? { background: '#fde68a', border: '#f59e0b' }
                                     : { background: '#bfdbfe', border: '#3b82f6' },
                                 level: node.level,
-                                data: { type: 'type', fullType: node.type }
+                                data: { type: 'type', fullType: node.type, packagePath: typePkgMap.get(node.type) || node.package || '' }
                             });
                             nodeMap.set(node.id, true);
                         }
@@ -936,10 +1174,13 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         });
                     });
 
+                    const aggregated = this.aggregateByGroups(nodes, edges, new Set([data.root_type]));
+                    const filteredByPrefix = this.filterByPrefix(aggregated.nodes, aggregated.edges, new Set([data.root_type]));
+
                     const container = document.getElementById('network');
                     const graphData = {
-                        nodes: new vis.DataSet(nodes),
-                        edges: new vis.DataSet(edges)
+                        nodes: new vis.DataSet(filteredByPrefix.nodes),
+                        edges: new vis.DataSet(filteredByPrefix.edges)
                     };
 
                     if (this.network) {
@@ -957,6 +1198,130 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     });
                 },
 
+                showGroupGraph(groupName) {
+                    if (!groupName || !this.groupMembers || !this.groupMembers[groupName]) return;
+                    this.focusedGraph = 'group';
+                    this.focusedGroup = groupName;
+                    const memberList = this.groupMembers[groupName] || [];
+                    if (memberList.length === 0) return;
+
+                    const depth = parseInt(this.currentDepth) || 0;
+                    const depthLimit = depth > 0 ? depth : Number.POSITIVE_INFINITY;
+
+                    const memberIds = new Set(memberList.map(m => m.id));
+                    const nodes = [];
+                    const edges = [];
+                    const nodeMap = new Map();
+                    const typePkgMap = this.buildTypePkgMap();
+
+                    // Build full graph nodes and edges
+                    (this.allData.providers || []).forEach(provider => {
+                        const providerNodeId = provider.id;
+                        if (!nodeMap.has(providerNodeId)) {
+                            nodes.push({
+                                id: providerNodeId,
+                                label: this.formatFunctionName(provider.function_name),
+                                title: this.buildProviderTooltip(provider),
+                                color: { background: '#bbf7d0', border: '#22c55e' },
+                                shape: 'box',
+                                font: { size: 11 },
+                                data: { ...provider, type: 'provider', packagePath: provider.function_pkg || '' }
+                            });
+                            nodeMap.set(providerNodeId, true);
+                        }
+
+                        const outputType = provider.output_type;
+                        if (!nodeMap.has(outputType)) {
+                            nodes.push({
+                                id: outputType,
+                                label: this.formatTypeName(outputType),
+                                title: '类型: ' + outputType,
+                                color: { background: '#bfdbfe', border: '#3b82f6' },
+                                shape: 'ellipse',
+                                font: { size: 10 },
+                                data: { type: 'type', fullType: outputType, packagePath: typePkgMap.get(outputType) || provider.output_pkg || '' }
+                            });
+                            nodeMap.set(outputType, true);
+                        }
+
+                        edges.push({
+                            from: providerNodeId,
+                            to: outputType,
+                            arrows: 'to',
+                            color: { color: '#22c55e' }
+                        });
+
+                        (provider.input_types || []).forEach(inputType => {
+                            if (!nodeMap.has(inputType)) {
+                                nodes.push({
+                                    id: inputType,
+                                    label: this.formatTypeName(inputType),
+                                    title: '类型: ' + inputType,
+                                    color: { background: '#bfdbfe', border: '#3b82f6' },
+                                    shape: 'ellipse',
+                                    font: { size: 10 },
+                                    data: { type: 'type', fullType: inputType, packagePath: typePkgMap.get(inputType) || '' }
+                                });
+                                nodeMap.set(inputType, true);
+                            }
+
+                            edges.push({
+                                from: inputType,
+                                to: providerNodeId,
+                                arrows: 'to',
+                                dashes: true,
+                                color: { color: '#f59e0b' }
+                            });
+                        });
+                    });
+
+                    // BFS from group members to include upstream/downstream within depth
+                    const adjacency = new Map();
+                    nodes.forEach(n => adjacency.set(n.id, []));
+                    edges.forEach(e => {
+                        if (adjacency.has(e.from)) adjacency.get(e.from).push(e.to);
+                        if (adjacency.has(e.to)) adjacency.get(e.to).push(e.from);
+                    });
+
+                    const keep = new Set();
+                    const queue = Array.from(memberIds).map(id => ({ id, level: 0 }));
+                    while (queue.length > 0) {
+                        const { id, level } = queue.shift();
+                        if (keep.has(id) || level > depthLimit) continue;
+                        keep.add(id);
+                        const neighbors = adjacency.get(id) || [];
+                        neighbors.forEach(next => {
+                            if (!keep.has(next)) {
+                                queue.push({ id: next, level: level + 1 });
+                            }
+                        });
+                    }
+
+                    const filteredNodes = nodes.filter(n => keep.has(n.id));
+                    const filteredEdges = edges.filter(e => keep.has(e.from) && keep.has(e.to));
+
+                    const container = document.getElementById('network');
+                    const filteredByPrefix = this.filterByPrefix(filteredNodes, filteredEdges, memberIds);
+                    const graphData = {
+                        nodes: new vis.DataSet(filteredByPrefix.nodes),
+                        edges: new vis.DataSet(filteredByPrefix.edges)
+                    };
+
+                    if (this.network) {
+                        this.network.destroy();
+                    }
+
+                    this.network = new vis.Network(container, graphData, this.getNetworkOptions(true));
+                    this.network.on('click', params => {
+                        if (params.nodes.length > 0) {
+                            const nodeId = params.nodes[0];
+                            const node = graphData.nodes.get(nodeId);
+                            this.selectedNode = node;
+                        }
+                    });
+                },
+
+
                 // Helpers
                 formatPackageName(name) {
                     if (!name) return '(anonymous)';
@@ -1000,7 +1365,311 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         });
                     }
                     return tip;
-                }
+                },
+
+                addGroup() {
+                    const name = (this.newGroupName || '').trim();
+                    const prefix = (this.newGroupPrefix || '').trim();
+                    if (!name || !prefix) return;
+                    const exists = this.groupRules.find(g => g.name === name);
+                    if (exists) {
+                        if (!exists.prefixes.includes(prefix)) {
+                            exists.prefixes.push(prefix);
+                        }
+                    } else {
+                        this.groupRules.push({ name, prefixes: [prefix], _newPrefix: '', _rename: '' });
+                    }
+                    this.newGroupName = '';
+                    this.newGroupPrefix = '';
+                    this.saveLocalState();
+                    this.renderGraph();
+                },
+
+                removeGroup(index) {
+                    this.groupRules.splice(index, 1);
+                    this.saveLocalState();
+                    this.renderGraph();
+                },
+
+                renameGroup(groupIndex) {
+                    const grp = this.groupRules[groupIndex];
+                    if (!grp) return;
+                    const nextName = (grp._rename || '').trim();
+                    if (!nextName || nextName === grp.name) return;
+                    if (this.groupRules.some((g, i) => i !== groupIndex && g.name === nextName)) {
+                        return;
+                    }
+                    grp.name = nextName;
+                    grp._rename = '';
+                    this.saveLocalState();
+                    this.renderGraph();
+                },
+
+                addPrefix(groupIndex) {
+                    const grp = this.groupRules[groupIndex];
+                    if (!grp) return;
+                    const prefix = (grp._newPrefix || '').trim();
+                    if (!prefix) return;
+                    if (!grp.prefixes.includes(prefix)) {
+                        grp.prefixes.push(prefix);
+                    }
+                    grp._newPrefix = '';
+                    this.saveLocalState();
+                    this.renderGraph();
+                },
+
+                removePrefix(groupIndex, prefixIndex) {
+                    const grp = this.groupRules[groupIndex];
+                    if (!grp) return;
+                    grp.prefixes.splice(prefixIndex, 1);
+                    this.saveLocalState();
+                    this.renderGraph();
+                },
+
+                loadLocalState() {
+                    try {
+                        const raw = localStorage.getItem(this.storageKey);
+                        if (!raw) return;
+                        const data = JSON.parse(raw);
+                        if (typeof data.aggregateGroups === 'boolean') {
+                            this.aggregateGroups = data.aggregateGroups;
+                        }
+                        if (Array.isArray(data.groupRules)) {
+                            this.groupRules = data.groupRules.map(g => ({
+                                name: g.name,
+                                prefixes: Array.isArray(g.prefixes) ? g.prefixes : [],
+                                _newPrefix: '',
+                                _rename: ''
+                            }));
+                        }
+                    } catch (e) {
+                        console.warn('[dix] failed to load group rules from storage', e);
+                    }
+                },
+
+                saveLocalState() {
+                    try {
+                        const payload = {
+                            aggregateGroups: this.aggregateGroups,
+                            groupRules: this.groupRules.map(g => ({
+                                name: g.name,
+                                prefixes: g.prefixes || []
+                            }))
+                        };
+                        localStorage.setItem(this.storageKey, JSON.stringify(payload));
+                    } catch (e) {
+                        console.warn('[dix] failed to save group rules to storage', e);
+                    }
+                },
+
+                aggregateByGroups(nodes, edges, protectedIds = new Set()) {
+                    if (!this.aggregateGroups || this.groupRules.length === 0) {
+                        this.groupMembers = {};
+                        return { nodes, edges };
+                    }
+
+                    const mapping = new Map();
+                    const groupNodes = new Map();
+                    const debugStats = new Map();
+                    let typeNodeCount = 0;
+                    let emptyPkgCount = 0;
+                    const pkgSamples = [];
+                    const members = {};
+
+                    const makeGroup = (name) => ({
+                        id: `group:${name}`,
+                        label: name,
+                        color: { background: '#e5e7eb', border: '#6b7280' },
+                        data: { type: 'group', group: name }
+                    });
+
+                    nodes.forEach(n => {
+                        if (protectedIds.has(n.id)) return;
+                        const isTypeNode = n.data && n.data.type === 'type';
+                        const isProviderNode = n.data && n.data.type === 'provider';
+                        if (!isTypeNode && !isProviderNode) return;
+                        typeNodeCount += 1;
+                        if (!n.data.packagePath) {
+                            emptyPkgCount += 1;
+                            if (pkgSamples.length < 20) {
+                                pkgSamples.push({ id: n.id, packagePath: n.data.packagePath || '' });
+                            }
+                        }
+                        const groupName = this.matchGroup(n.id, n.data && n.data.packagePath ? n.data.packagePath : '');
+                        if (!groupName) return;
+                        mapping.set(n.id, `group:${groupName}`);
+                        if (!groupNodes.has(groupName)) {
+                            groupNodes.set(groupName, makeGroup(groupName));
+                        }
+
+                        if (!members[groupName]) {
+                            members[groupName] = [];
+                        }
+                        if (members[groupName].length < 200) {
+                            members[groupName].push({
+                                id: n.id,
+                                packagePath: n.data.packagePath || '',
+                                nodeType: n.data.type
+                            });
+                        }
+
+                        if (this.debugGroupMatching) {
+                            const pkg = n.data && n.data.packagePath ? n.data.packagePath : '';
+                            if (!debugStats.has(groupName)) {
+                                debugStats.set(groupName, []);
+                            }
+                            if (debugStats.get(groupName).length < 50) {
+                                debugStats.get(groupName).push({ id: n.id, packagePath: pkg });
+                            }
+                        }
+                    });
+
+                    if (this.debugGroupMatching) {
+                        console.group('[dix] group matching');
+                        console.log('rules', JSON.parse(JSON.stringify(this.groupRules)));
+                        console.log('type nodes', typeNodeCount, 'empty packagePath', emptyPkgCount, 'samples', pkgSamples);
+                        this.groupRules.forEach(grp => {
+                            const items = debugStats.get(grp.name) || [];
+                            console.log(`group=${grp.name} matched=${items.length}`, items);
+                        });
+                        console.groupEnd();
+                    }
+
+                    this.groupMembers = members;
+
+                    if (mapping.size === 0) {
+                        return { nodes, edges };
+                    }
+
+                    const mappedNodes = nodes.filter(n => !mapping.has(n.id));
+                    groupNodes.forEach(n => mappedNodes.push(n));
+
+                    const edgeMap = new Map();
+                    edges.forEach(e => {
+                        const from = mapping.get(e.from) || e.from;
+                        const to = mapping.get(e.to) || e.to;
+                        if (from === to) return;
+                        const key = `${from}=>${to}`;
+                        if (edgeMap.has(key)) return;
+                        edgeMap.set(key, { ...e, from, to });
+                    });
+
+                    return { nodes: mappedNodes, edges: Array.from(edgeMap.values()) };
+                },
+
+                matchGroup(typeName, pkgPathOverride = '') {
+                    if (!typeName) return null;
+                    const normalized = this.normalizeTypeForMatch(typeName);
+                    const pkgPath = pkgPathOverride || this.extractPackagePath(normalized);
+                    for (const grp of this.groupRules) {
+                        for (const prefix of (grp.prefixes || [])) {
+                            const p = String(prefix || '').trim();
+                            if (!p) continue;
+                            const target = pkgPath || normalized;
+                            if (this.isPathLikePrefix(p)) {
+                                if (target.startsWith(p) || target.includes(p)) {
+                                    return grp.name;
+                                }
+                                continue;
+                            }
+                            if (target.includes(p)) {
+                                return grp.name;
+                            }
+                        }
+                    }
+                    return null;
+                },
+
+                isPathLikePrefix(prefix) {
+                    return prefix.includes('/') || prefix.startsWith('github.com/') || prefix.startsWith('gitee.com/') || prefix.startsWith('gitlab.com/');
+                },
+
+                normalizeTypeForMatch(typeName) {
+                    let t = String(typeName).trim();
+                    t = t.replace(/^\*/, '').replace(/^\[\]/, '');
+                    if (t.startsWith('map[')) {
+                        const idx = t.indexOf(']');
+                        if (idx > -1 && idx < t.length - 1) {
+                            t = t.slice(idx + 1);
+                            t = t.replace(/^\*/, '');
+                        }
+                    }
+                    return t;
+                },
+
+                extractPackagePath(typeName) {
+                    const t = String(typeName || '').trim();
+                    if (!t) return '';
+                    const lastSlash = t.lastIndexOf('/');
+                    const lastDot = t.lastIndexOf('.');
+                    if (lastDot > -1 && lastDot > lastSlash) {
+                        return t.slice(0, lastDot);
+                    }
+                    return '';
+                },
+
+                buildTypePkgMap() {
+                    const map = new Map();
+                    if (!this.allData || !this.allData.providers) return map;
+                    this.allData.providers.forEach(p => {
+                        if (p.output_type) {
+                            map.set(p.output_type, p.output_pkg || '');
+                        }
+                        if (p.input_types && p.input_types.length) {
+                            p.input_types.forEach((t, i) => {
+                                const pkg = (p.input_pkgs && p.input_pkgs[i]) ? p.input_pkgs[i] : '';
+                                if (!map.has(t)) {
+                                    map.set(t, pkg);
+                                }
+                            });
+                        }
+                    });
+                    return map;
+                },
+
+                getPackagePrefixSuggestions() {
+                    if (!this.allData || !this.allData.providers) return [];
+                    const set = new Set();
+                    this.allData.providers.forEach(p => {
+                        if (p.output_pkg) set.add(p.output_pkg);
+                        if (p.function_pkg) set.add(p.function_pkg);
+                        if (p.input_pkgs && p.input_pkgs.length) {
+                            p.input_pkgs.forEach(pkg => {
+                                if (pkg) set.add(pkg);
+                            });
+                        }
+                    });
+                    return Array.from(set).sort();
+                },
+
+
+
+                filterByPrefix(nodes, edges, protectedIds = new Set()) {
+                    const prefix = (this.filterPrefix || '').trim();
+                    if (!prefix) {
+                        return { nodes, edges };
+                    }
+
+                    const matches = (node) => {
+                        if (!node || !node.data) return false;
+                        const pkg = (node.data.packagePath || '').toString();
+                        const id = (node.id || '').toString();
+                        const fullType = (node.data.fullType || '').toString();
+                        const fn = (node.data.function_name || '').toString();
+                        return pkg.includes(prefix) || id.includes(prefix) || fullType.includes(prefix) || fn.includes(prefix);
+                    };
+
+                    const keep = new Set();
+                    nodes.forEach(n => {
+                        if (protectedIds.has(n.id) || matches(n)) {
+                            keep.add(n.id);
+                        }
+                    });
+
+                    const filteredNodes = nodes.filter(n => keep.has(n.id));
+                    const filteredEdges = edges.filter(e => keep.has(e.from) && keep.has(e.to));
+                    return { nodes: filteredNodes, edges: filteredEdges };
+                },
             };
         }
     </script>
diff --git a/dixinternal/api.go b/dixinternal/api.go
index 083e216..08b5fa9 100644
--- a/dixinternal/api.go
+++ b/dixinternal/api.go
@@ -3,6 +3,7 @@ package dixinternal
 import (
 	"errors"
 	"reflect"
+	"strings"
 )
 
 // New Dix new
@@ -95,8 +96,11 @@ func (dix *Dix) GetObjects() map[reflect.Type]map[string][]reflect.Value {
 // ProviderDetails contains detailed information about a provider
 type ProviderDetails struct {
 	OutputType   string
+	OutputPkg    string
 	FunctionName string
+	FunctionPkg  string
 	InputTypes   []string
+	InputPkgs    []string
 }
 
 // GetProviderDetails returns detailed information about all providers
@@ -106,6 +110,7 @@ func (dix *Dix) GetProviderDetails() []ProviderDetails {
 		for _, providerFn := range providerList {
 			fnName := GetFnName(providerFn.fn)
 			var inputTypes []string
+			var inputPkgs []string
 			seen := make(map[string]bool)
 			for _, input := range providerFn.inputList {
 				if input.isStruct || input.typ.Kind() == reflect.Struct {
@@ -116,6 +121,7 @@ func (dix *Dix) GetProviderDetails() []ProviderDetails {
 						}
 						seen[name] = true
 						inputTypes = append(inputTypes, name)
+						inputPkgs = append(inputPkgs, resolveTypePkgPath(in.typ))
 					}
 					continue
 				}
@@ -126,13 +132,44 @@ func (dix *Dix) GetProviderDetails() []ProviderDetails {
 				}
 				seen[name] = true
 				inputTypes = append(inputTypes, name)
+				inputPkgs = append(inputPkgs, resolveTypePkgPath(input.typ))
 			}
 			details = append(details, ProviderDetails{
 				OutputType:   outputType.String(),
+				OutputPkg:    resolveTypePkgPath(outputType),
 				FunctionName: fnName,
+				FunctionPkg:  resolveFuncPkgPath(fnName),
 				InputTypes:   inputTypes,
+				InputPkgs:    inputPkgs,
 			})
 		}
 	}
 	return details
 }
+
+func resolveTypePkgPath(typ reflect.Type) string {
+	if typ == nil {
+		return ""
+	}
+	for typ.Kind() == reflect.Ptr || typ.Kind() == reflect.Slice || typ.Kind() == reflect.Array {
+		typ = typ.Elem()
+		if typ == nil {
+			return ""
+		}
+	}
+	if typ.Kind() == reflect.Map {
+		return resolveTypePkgPath(typ.Elem())
+	}
+	return typ.PkgPath()
+}
+
+func resolveFuncPkgPath(fnName string) string {
+	name := strings.TrimSpace(fnName)
+	if name == "" {
+		return ""
+	}
+	if idx := strings.LastIndex(name, "."); idx > 0 {
+		return name[:idx]
+	}
+	return ""
+}
diff --git a/example/cycle/main.go b/example/cycle/main.go
index dfe6973..9c9b9a5 100644
--- a/example/cycle/main.go
+++ b/example/cycle/main.go
@@ -12,9 +12,6 @@ func main() {
 			fmt.Printf("panic: %v\n", r)
 		}
 	}()
-	defer func() {
-		fmt.Println(dixglobal.Graph())
-	}()
 
 	type (
 		A struct{}
diff --git a/example/handler/main.go b/example/handler/main.go
index 9a004ac..b1a3eab 100644
--- a/example/handler/main.go
+++ b/example/handler/main.go
@@ -24,10 +24,6 @@ func main() {
 		}
 	}()
 
-	defer func() {
-		fmt.Println(dixglobal.Graph())
-	}()
-
 	dixglobal.Provide(func() *log.Logger {
 		return log.New(os.Stderr, "example: ", log.LstdFlags|log.Lshortfile)
 	})
@@ -47,8 +43,6 @@ func main() {
 		}
 	})
 
-	fmt.Println(dixglobal.Graph())
-
 	dixglobal.Inject(func(r *Redis, l *log.Logger, rr map[string]*Redis) {
 		l.Println("invoke redis")
 		fmt.Println("invoke:", r.name)
diff --git a/example/struct-out/main.go b/example/struct-out/main.go
index ed7b3ed..c11015d 100644
--- a/example/struct-out/main.go
+++ b/example/struct-out/main.go
@@ -50,7 +50,6 @@ func main() {
 				err = fmt.Errorf("panic: %v", r)
 			}
 			fmt.Printf("panic: %v\n", err)
-			fmt.Println(dixglobal.Graph()) // Original behavior from recovery.Exit's func
 		}
 	}()
 
@@ -97,6 +96,4 @@ func main() {
 		fmt.Println(dm)
 		fmt.Println(d5)
 	})
-
-	fmt.Println(dixglobal.Graph())
 }

From 88c4608a87973e22cb42c98f327325cf21cdfe45 Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Thu, 26 Feb 2026 11:11:51 +0800
Subject: [PATCH 6/7] feat: add SVG export button for network graph

---
 dixhttp/template.html | 132 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)

diff --git a/dixhttp/template.html b/dixhttp/template.html
index 12739c8..f5b91f7 100644
--- a/dixhttp/template.html
+++ b/dixhttp/template.html
@@ -316,6 +316,13 @@ <h3 x-show="!sidebarCollapsed" class="text-sm font-semibold text-gray-600 pl-2">
                     >
                         <span>🔄</span> 重置
                     </button>
+                    <button
+                        @click="exportSvg()"
+                        class="px-3 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition flex items-center gap-1"
+                        :disabled="!network"
+                    >
+                        <span>⬇️</span> 下载 SVG
+                    </button>
                     
                     <!-- Global Search -->
                     <div class="flex-1"></div>
@@ -1642,6 +1649,131 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     return Array.from(set).sort();
                 },
 
+                async exportSvg() {
+                    try {
+                        if (!this.network || !this.network.body) return;
+                        const nodesData = this.network.body.data.nodes.get();
+                        const edgesData = this.network.body.data.edges.get();
+                        if (!nodesData || nodesData.length === 0) return;
+
+                        const positions = this.network.getPositions(nodesData.map(n => n.id));
+                        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+                        nodesData.forEach(n => {
+                            const id = n.id;
+                            let box;
+                            try {
+                                box = this.network.getBoundingBox(id);
+                            } catch (e) {
+                                box = null;
+                            }
+                            const pos = positions[id] || { x: 0, y: 0 };
+                            const left = box ? box.left : pos.x - 50;
+                            const right = box ? box.right : pos.x + 50;
+                            const top = box ? box.top : pos.y - 25;
+                            const bottom = box ? box.bottom : pos.y + 25;
+                            minX = Math.min(minX, left);
+                            minY = Math.min(minY, top);
+                            maxX = Math.max(maxX, right);
+                            maxY = Math.max(maxY, bottom);
+                        });
+
+                        if (!isFinite(minX) || !isFinite(minY) || !isFinite(maxX) || !isFinite(maxY)) return;
+
+                        const padding = 20;
+                        const width = Math.max(1, Math.round(maxX - minX + padding * 2));
+                        const height = Math.max(1, Math.round(maxY - minY + padding * 2));
+
+                        const mapX = (x) => x - minX + padding;
+                        const mapY = (y) => y - minY + padding;
+
+                        const escapeXml = (s) => String(s || '')
+                            .replace(/&/g, '&amp;')
+                            .replace(/</g, '&lt;')
+                            .replace(/>/g, '&gt;')
+                            .replace(/"/g, '&quot;')
+                            .replace(/'/g, '&#39;');
+
+                        const parts = [];
+                        parts.push(`<?xml version="1.0" encoding="UTF-8"?>`);
+                        parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`);
+                        parts.push(`<defs>`);
+                        parts.push(`<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">`);
+                        parts.push(`<path d="M0,0 L0,6 L9,3 z" fill="#9ca3af" />`);
+                        parts.push(`</marker>`);
+                        parts.push(`</defs>`);
+
+                        edgesData.forEach(e => {
+                            const from = positions[e.from];
+                            const to = positions[e.to];
+                            if (!from || !to) return;
+                            const x1 = mapX(from.x);
+                            const y1 = mapY(from.y);
+                            const x2 = mapX(to.x);
+                            const y2 = mapY(to.y);
+                            const color = (e.color && e.color.color) ? e.color.color : '#9ca3af';
+                            const dash = e.dashes ? ' stroke-dasharray="6 4"' : '';
+                            parts.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${color}" stroke-width="1.5" marker-end="url(#arrow)"${dash} />`);
+                        });
+
+                        nodesData.forEach(n => {
+                            const id = n.id;
+                            const pos = positions[id] || { x: 0, y: 0 };
+                            let box;
+                            try {
+                                box = this.network.getBoundingBox(id);
+                            } catch (e) {
+                                box = null;
+                            }
+                            const left = box ? box.left : pos.x - 50;
+                            const right = box ? box.right : pos.x + 50;
+                            const top = box ? box.top : pos.y - 25;
+                            const bottom = box ? box.bottom : pos.y + 25;
+                            const w = Math.max(10, right - left);
+                            const h = Math.max(10, bottom - top);
+                            const x = mapX(left);
+                            const y = mapY(top);
+                            const cx = mapX(pos.x);
+                            const cy = mapY(pos.y);
+
+                            const bg = n.color && n.color.background ? n.color.background : '#bfdbfe';
+                            const border = n.color && n.color.border ? n.color.border : '#3b82f6';
+                            const fontSize = (n.font && n.font.size) ? n.font.size : 12;
+                            const fontColor = (n.font && n.font.color) ? n.font.color : '#111827';
+
+                            const nodeType = n.data && n.data.type ? n.data.type : '';
+                            const isBox = n.shape === 'box' || nodeType === 'provider' || nodeType === 'group';
+
+                            if (isBox) {
+                                const rx = nodeType === 'group' ? 8 : 4;
+                                parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${rx}" ry="${rx}" fill="${bg}" stroke="${border}" stroke-width="2" />`);
+                            } else {
+                                parts.push(`<ellipse cx="${cx}" cy="${cy}" rx="${w / 2}" ry="${h / 2}" fill="${bg}" stroke="${border}" stroke-width="2" />`);
+                            }
+
+                            const label = escapeXml(n.label || '');
+                            if (label) {
+                                parts.push(`<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="system-ui, sans-serif" fill="${fontColor}">${label}</text>`);
+                            }
+                        });
+
+                        parts.push(`</svg>`);
+
+                        const svg = parts.join('\n');
+                        const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `dix-graph-${Date.now()}.svg`;
+                        document.body.appendChild(a);
+                        a.click();
+                        a.remove();
+                        setTimeout(() => URL.revokeObjectURL(url), 1000);
+                    } catch (e) {
+                        console.warn('导出 SVG 失败:', e);
+                    }
+                },
+
 
 
                 filterByPrefix(nodes, edges, protectedIds = new Set()) {

From 347a92ac1b0b9777745b8a96aba3bdbfdb23d795 Mon Sep 17 00:00:00 2001
From: barry <kookshine@gmail.com>
Date: Sat, 28 Feb 2026 18:05:21 +0800
Subject: [PATCH 7/7] chore: quick update fix/rm_render at 2026-02-28 18:05:20

---
 dixhttp/README.md     |  10 +++
 dixhttp/README_zh.md  |  10 +++
 dixhttp/template.html | 200 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 220 insertions(+)

diff --git a/dixhttp/README.md b/dixhttp/README.md
index 7fab872..3e679f7 100644
--- a/dixhttp/README.md
+++ b/dixhttp/README.md
@@ -16,6 +16,7 @@ This module provides an HTTP server to visualize dependency relationships in the
 - 🔎 **Prefix Filter** - Show only nodes/providers matching a prefix
 - 🧭 **Group Subgraph** - View a group's internal + upstream/downstream dependencies
 - 📡 **RESTful API** - Provide JSON format dependency data
+- 🧩 **Mermaid Export/Preview** - Generate Mermaid flowcharts for current graph (respects grouping/filtering)
 
 ## Quick Start
 
@@ -222,6 +223,15 @@ Left panel features:
 | **Scroll Zoom** | Zoom in/out graph |
 | **Click Type in Details** | Jump to view that type's dependencies |
 
+## Mermaid Support
+
+The toolbar includes a **Mermaid** button. It generates a Mermaid `flowchart` from the **current graph view** (including grouping, depth, and prefix filters), opens a preview modal, and lets you copy the Mermaid source.
+
+**Typical usage**:
+1. Adjust view / grouping / filters.
+2. Click **Mermaid**.
+3. Copy the generated Mermaid text or use the preview.
+
 ## API Endpoints
 
 ### GET `/`
diff --git a/dixhttp/README_zh.md b/dixhttp/README_zh.md
index f69bcb4..228133f 100644
--- a/dixhttp/README_zh.md
+++ b/dixhttp/README_zh.md
@@ -16,6 +16,7 @@
 - 🔎 **前缀过滤** - 只显示匹配前缀的节点/Provider
 - 🧭 **组内子图** - 查看组内及上下游依赖
 - 📡 **RESTful API** - 提供 JSON 格式的依赖关系数据
+- 🧩 **Mermaid 预览/导出** - 将当前图生成 Mermaid 流程图（支持分组/过滤）
 
 ## 快速开始
 
@@ -221,6 +222,15 @@ dixhttp.RegisterGroupRules(
 | **滚轮缩放** | 放大/缩小图形 |
 | **点击详情中的类型** | 跳转查看该类型的依赖 |
 
+## Mermaid 支持
+
+工具栏新增 **Mermaid** 按钮，会基于**当前视图**生成 Mermaid `flowchart`，并弹出预览窗口，支持一键复制源码。
+
+**典型用法**：
+1. 调整视图/分组/过滤条件。
+2. 点击 **Mermaid**。
+3. 复制生成的 Mermaid 文本或直接预览。
+
 ## API 端点
 
 ### GET `/`
diff --git a/dixhttp/template.html b/dixhttp/template.html
index f5b91f7..6a43b10 100644
--- a/dixhttp/template.html
+++ b/dixhttp/template.html
@@ -7,6 +7,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
     <style>
         [x-cloak] { display: none !important; }
         .vis-tooltip {
@@ -20,6 +21,10 @@
             max-width: 400px !important;
             font-family: ui-monospace, monospace !important;
         }
+        .mermaid-preview svg {
+            max-width: 100%;
+            height: auto;
+        }
     </style>
     <script>
         tailwind.config = {
@@ -323,6 +328,13 @@ <h3 x-show="!sidebarCollapsed" class="text-sm font-semibold text-gray-600 pl-2">
                     >
                         <span>⬇️</span> 下载 SVG
                     </button>
+                    <button
+                        @click="openMermaid()"
+                        class="px-3 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition flex items-center gap-1"
+                        :disabled="!network"
+                    >
+                        <span>🧩</span> Mermaid
+                    </button>
                     
                     <!-- Global Search -->
                     <div class="flex-1"></div>
@@ -470,6 +482,11 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">分组</h4>
                             >
                                 <span>🧩</span> 查看组内依赖图
                             </button>
+                            <button
+                                @click="toggleGroupExpand(selectedNode.data.group)"
+                                class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center justify-center gap-2"
+                                x-text="isGroupExpanded(selectedNode.data.group) ? '收起到分组节点' : '展开组内节点'"
+                            ></button>
                             <div class="mb-5">
                                 <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">包含节点</h4>
                                 <div class="text-xs text-gray-500 mb-2" x-text="(groupMembers[selectedNode.data.group] || []).length + ' 个'"></div>
@@ -509,6 +526,53 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                 </div>
             </aside>
         </div>
+        <!-- Mermaid Modal -->
+        <div
+            x-show="mermaidOpen"
+            x-cloak
+            class="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
+            @keydown.escape.window="mermaidOpen = false"
+        >
+            <div class="bg-white w-[90vw] h-[85vh] rounded-xl shadow-xl flex flex-col">
+                <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+                    <div class="font-semibold text-gray-700">🧩 Mermaid 预览</div>
+                    <button
+                        @click="mermaidOpen = false"
+                        class="px-2 py-1 text-xs border border-gray-300 rounded-md hover:bg-gray-50"
+                    >
+                        关闭
+                    </button>
+                </div>
+                <div class="flex-1 grid grid-cols-2 gap-4 p-4 overflow-hidden">
+                    <div class="flex flex-col h-full">
+                        <div class="text-xs text-gray-500 mb-2">Mermaid 源码</div>
+                        <textarea
+                            x-model="mermaidSource"
+                            class="flex-1 w-full text-xs font-mono border border-gray-200 rounded-lg p-2 resize-none"
+                        ></textarea>
+                        <div class="mt-2 flex items-center gap-2">
+                            <button
+                                @click="copyMermaidSource()"
+                                class="px-3 py-1.5 text-xs border border-gray-300 rounded-md hover:bg-gray-50"
+                            >
+                                复制源码
+                            </button>
+                            <button
+                                @click="renderMermaid()"
+                                class="px-3 py-1.5 text-xs bg-primary-500 text-white rounded-md hover:bg-primary-600"
+                            >
+                                重新渲染
+                            </button>
+                            <div x-show="mermaidError" class="text-xs text-red-500" x-text="mermaidError"></div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col h-full">
+                        <div class="text-xs text-gray-500 mb-2">预览</div>
+                        <div class="flex-1 border border-gray-200 rounded-lg p-3 overflow-auto mermaid-preview" x-html="mermaidSvg"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -543,6 +607,12 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                 storageKey: 'dix.groupRules.v1',
                 groupMembers: {},
                 filterPrefix: '',
+                mermaidOpen: false,
+                mermaidSource: '',
+                mermaidSvg: '',
+                mermaidError: '',
+                lastGraphData: null,
+                expandedGroups: [],
 
                 // Computed
                 get filteredPackages() {
@@ -567,6 +637,9 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     await this.loadStats();
                     await this.loadPackages();
                     await this.loadDependencies();
+                    if (window.mermaid && window.mermaid.initialize) {
+                        window.mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });
+                    }
                 },
 
                 async loadGroupRules() {
@@ -667,6 +740,38 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     this.renderGraph();
                 },
 
+                rerenderCurrentGraph() {
+                    if (this.focusedType) {
+                        if (this.focusedGraph === 'dependency') {
+                            this.showDependencyGraph(this.focusedType, 'type');
+                            return;
+                        }
+                        if (this.focusedGraph === 'type') {
+                            this.focusOnType(this.focusedType);
+                            return;
+                        }
+                    }
+                    if (this.focusedGraph === 'group' && this.focusedGroup) {
+                        this.showGroupGraph(this.focusedGroup);
+                        return;
+                    }
+                    this.renderGraph();
+                },
+
+                isGroupExpanded(groupName) {
+                    return this.expandedGroups.includes(groupName);
+                },
+
+                toggleGroupExpand(groupName) {
+                    if (!groupName) return;
+                    if (this.isGroupExpanded(groupName)) {
+                        this.expandedGroups = this.expandedGroups.filter(g => g !== groupName);
+                    } else {
+                        this.expandedGroups = [...this.expandedGroups, groupName];
+                    }
+                    this.rerenderCurrentGraph();
+                },
+
                 // Global search functionality
                 onGlobalSearchInput() {
                     if (!this.allData || this.globalSearch.length < 1) {
@@ -895,6 +1000,9 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         nodes: new vis.DataSet(filteredByPrefix.nodes),
                         edges: new vis.DataSet(filteredByPrefix.edges)
                     };
+                    this.lastGraphData = graphData;
+                    this.lastGraphData = graphData;
+                    this.lastGraphData = graphData;
 
                     if (this.network) {
                         this.network.destroy();
@@ -923,6 +1031,10 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         if (params.nodes.length > 0) {
                             const nodeId = params.nodes[0];
                             const node = graphData.nodes.get(nodeId);
+                            if (node && node.data && node.data.type === 'group') {
+                                this.toggleGroupExpand(node.data.group);
+                                return;
+                            }
                             if (node && node.data && node.data.fullType) {
                                 this.showDependencyGraph(node.data.fullType, 'type');
                             }
@@ -1053,6 +1165,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         nodes: new vis.DataSet(filteredByPrefix.nodes),
                         edges: new vis.DataSet(filteredByPrefix.edges)
                     };
+                    this.lastGraphData = data;
 
                     const options = this.getNetworkOptions();
 
@@ -1076,6 +1189,10 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         if (params.nodes.length > 0) {
                             const nodeId = params.nodes[0];
                             const node = data.nodes.get(nodeId);
+                            if (node && node.data && node.data.type === 'group') {
+                                this.toggleGroupExpand(node.data.group);
+                                return;
+                            }
                             if (node && node.data && node.data.type === 'type') {
                                 this.focusOnType(node.data.fullType);
                             }
@@ -1203,6 +1320,16 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                             this.selectedNode = node;
                         }
                     });
+
+                    this.network.on('doubleClick', params => {
+                        if (params.nodes.length > 0) {
+                            const nodeId = params.nodes[0];
+                            const node = graphData.nodes.get(nodeId);
+                            if (node && node.data && node.data.type === 'group') {
+                                this.toggleGroupExpand(node.data.group);
+                            }
+                        }
+                    });
                 },
 
                 showGroupGraph(groupName) {
@@ -1504,6 +1631,7 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                         }
                         const groupName = this.matchGroup(n.id, n.data && n.data.packagePath ? n.data.packagePath : '');
                         if (!groupName) return;
+                        if (this.isGroupExpanded(groupName)) return;
                         mapping.set(n.id, `group:${groupName}`);
                         if (!groupNodes.has(groupName)) {
                             groupNodes.set(groupName, makeGroup(groupName));
@@ -1774,6 +1902,78 @@ <h4 class="text-xs font-semibold text-gray-400 uppercase mb-3">图例</h4>
                     }
                 },
 
+                openMermaid() {
+                    this.mermaidError = '';
+                    this.mermaidSource = this.buildMermaidSource();
+                    this.mermaidOpen = true;
+                    this.renderMermaid();
+                },
+
+                buildMermaidSource() {
+                    const data = this.lastGraphData;
+                    if (!data || !data.nodes || !data.edges) {
+                        return 'flowchart TD\n  A[No data]';
+                    }
+
+                    const nodes = typeof data.nodes.get === 'function' ? data.nodes.get() : data.nodes;
+                    const edges = typeof data.edges.get === 'function' ? data.edges.get() : data.edges;
+                    const idMap = new Map();
+                    const lines = ['flowchart TD'];
+
+                    (nodes || []).forEach((n, idx) => {
+                        const safeId = `N${idx}`;
+                        idMap.set(n.id, safeId);
+                        const label = this.escapeMermaidLabel(n.label || n.id);
+                        lines.push(`  ${safeId}["${label}"]`);
+                    });
+
+                    (edges || []).forEach(e => {
+                        const from = idMap.get(e.from);
+                        const to = idMap.get(e.to);
+                        if (!from || !to) return;
+                        lines.push(`  ${from} --> ${to}`);
+                    });
+
+                    return lines.join('\n');
+                },
+
+                escapeMermaidLabel(label) {
+                    return String(label || '')
+                        .replace(/"/g, "'")
+                        .replace(/\n/g, ' ')
+                        .replace(/\r/g, ' ');
+                },
+
+                async renderMermaid() {
+                    this.mermaidError = '';
+                    const source = (this.mermaidSource || '').trim();
+                    if (!source) {
+                        this.mermaidSvg = '';
+                        return;
+                    }
+                    if (!window.mermaid || !window.mermaid.render) {
+                        this.mermaidError = 'Mermaid 脚本未加载';
+                        return;
+                    }
+                    try {
+                        const id = `dix-mermaid-${Date.now()}`;
+                        const res = await window.mermaid.render(id, source);
+                        this.mermaidSvg = res.svg || '';
+                    } catch (e) {
+                        this.mermaidError = 'Mermaid 渲染失败';
+                    }
+                },
+
+                async copyMermaidSource() {
+                    try {
+                        if (navigator.clipboard && navigator.clipboard.writeText) {
+                            await navigator.clipboard.writeText(this.mermaidSource || '');
+                        }
+                    } catch (e) {
+                        console.warn('复制失败:', e);
+                    }
+                },
+
 
 
                 filterByPrefix(nodes, edges, protectedIds = new Set()) {