Fix/rm render

dixhttp/README.md

@@ -12,7 +12,11 @@ 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
+- 🧩 **Mermaid Export/Preview** - Generate Mermaid flowcharts for current graph (respects grouping/filtering)
 
 ## Quick Start
 
@@ -54,6 +58,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
 
 ```
@@ -143,6 +159,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:
@@ -161,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 `/`
@@ -200,8 +271,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": [...],
@@ -226,6 +300,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

dixhttp/README_zh.md

@@ -12,7 +12,11 @@
 - 🔄 **双向依赖追踪** - 同时展示依赖（上游）和被依赖（下游）关系
 - 📏 **深度控制** - 限制依赖图的展示层级（1-5级或全部）
 - 🎨 **多种布局** - 支持层级布局和力导向布局
+- 🧩 **分组清单（前缀聚合）** - 通过包路径/前缀聚合节点
+- 🔎 **前缀过滤** - 只显示匹配前缀的节点/Provider
+- 🧭 **组内子图** - 查看组内及上下游依赖
 - 📡 **RESTful API** - 提供 JSON 格式的依赖关系数据
+- 🧩 **Mermaid 预览/导出** - 将当前图生成 Mermaid 流程图（支持分组/过滤）
 
 ## 快速开始
 
@@ -54,6 +58,18 @@ func main() {
 
 打开浏览器访问 `http://localhost:8080` 即可查看依赖关系图。
 
+### 配置访问前缀
+
+如果需要将页面和 API 挂载到一个前缀路径（例如网关转发），可以使用 `WithBasePath`：
+
+```go
+server := dixhttp.NewServerWithOptions(
+  (*dixinternal.Dix)(di),
+  dixhttp.WithBasePath("/dix"),
+)
+// 访问 http://localhost:8080/dix/
+```
+
 ## 界面布局
 
 ```
@@ -143,6 +159,51 @@ func main() {
 - 深度 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/类型视图
+- 类型依赖视图
+- 组内依赖视图
+
+### 🧭 组内子图
+
+点击虚拟组节点 → 详情面板 → “查看组内依赖图”，可以看到：
+
+- 组内节点
+- 上下游依赖
+- 受工具栏“深度”控制
+
 ### 📦 按包分组
 
 左侧面板功能：
@@ -161,6 +222,15 @@ func main() {
 | **滚轮缩放** | 放大/缩小图形 |
 | **点击详情中的类型** | 跳转查看该类型的依赖 |
 
+## Mermaid 支持
+
+工具栏新增 **Mermaid** 按钮，会基于**当前视图**生成 Mermaid `flowchart`，并弹出预览窗口，支持一键复制源码。
+
+**典型用法**：
+1. 调整视图/分组/过滤条件。
+2. 点击 **Mermaid**。
+3. 复制生成的 Mermaid 文本或直接预览。
+
 ## API 端点
 
 ### GET `/`
@@ -200,8 +270,11 @@ func main() {
     {
       "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": [...],
@@ -226,6 +299,15 @@ func main() {
     {"from": "*db.Database", "to": "*service.UserService", "type": "dependency"}
   ]
 }
+
+### GET `/api/group-rules`
+返回后端注册的分组清单（前端默认配置）
+
+```json
+[
+  {"name": "service", "prefixes": ["github.com/acme/app/service"]}
+]
+```
 ```
 
 ## 技术栈