Wolfi-OwO/network-visualizer
GitHub: Wolfi-OwO/network-visualizer
一款基于浏览器的企业网络可视化与模拟工具，支持拖拽式拓扑构建、实时数据包逐跳追踪及 Wireshark 风格的流量捕获分析。
Stars: 0 | Forks: 0
# NetViz — 网络可视化与模拟器
**在浏览器中设计、可视化并*模拟*真实的企业网络。**
通过拖拽构建拓扑，实时观察数据包逐跳传输，像 Wireshark 一样检查流量，并计算子网——所有功能集于一身。
[](https://github.com/Wolfi-OwO/network-visualizer/actions/workflows/lint.yml)
[](https://github.com/Wolfi-OwO/network-visualizer/actions/workflows/ci.yml)
[](https://github.com/Wolfi-OwO/network-visualizer/actions/workflows/release.yml)
[](./LICENSE)
[](https://github.com/Wolfi-OwO/network-visualizer/actions/workflows/ci.yml)
## 功能
### 网络构建器
- **拖拽式画布**（由 React Flow 提供支持），包含跨多个类别的 25 种以上设备类型：路由器、L2/L3 交换机、防火墙、IDS/IPS、VPN 网关、负载均衡器、反向代理、API 网关、服务器（DNS、DHCP、邮件、文件、数据库、VM 宿主机）、NAS/存储、终端（PC、笔记本电脑、手机、打印机、IoT）以及 Internet/ISP/云。
- **简洁的线条图标集**（无 emoji），按角色进行颜色编码，并带有每个设备的**硬件/功能**（NIC、Wi-Fi 网卡、CPU/RAM 等）。
- **可从设备的任意一侧连接**；命名并配置链路（标签、带宽、延迟、连接状态）。
- **逐设备电源按钮** — 开启设备后，它会**自动广播 DHCP (DORA)** 并获取地址。关闭设备后，流量将正确地停止穿过它。
- **实时并发流量模拟** — 多个标记的数据包（DNS、HTTPS、SMTP、SQL、DHCP 等）并行且实时地进行动画演示。DNS 查找在服务器请求之前进行，就像现实生活中一样。
- **发送数据包追踪**：带有路由（最长前缀匹配）的逐跳路径、**防火墙 ACL**（入口/出口 + 隐式拒绝）、Internet 边缘的 **NAT**、**TTL**、**VLAN 隔离**和**子网分段**强制执行，以及明确的阻止原因。
- **可调整大小的检查器**、**撤销/重做**（`Ctrl+Z` / `Ctrl+Shift+Z`）以及**自动保存**到本地存储。
- **引导式构建教程**，逐步教授整个工作流程。
### 数据包捕获（Wireshark 风格）
- 通过 **Server-Sent Events** 的实时数据包流、协议树、十六进制转储和统计信息。
- 真实生成的 **16 种以上协议**（HTTP、TLS、DNS、mDNS、DHCP、ARP、ICMP、TCP、UDP、STP、NTP、LLDP、SNMP、OSPF、SSDP、SIP），带有**按协议开启/关闭的切换开关**。
### CIDR 计算器
- 子网 / 网络 / 广播 / 主机计算、二进制视图、子网拆分器，以及带有严格输入验证的超网（路由汇总）。
### 账户、角色与管理
- **使用 Google 或 Microsoft 登录**（带有 CSRF 保护状态的 OAuth 2.0），或用于本地使用的无密码**开发者登录**。会话是 `httpOnly` cookie 中签名的 JWT。
- **基于角色的访问控制** — `admin` / `editor` / `viewer`；第一个登录的账户成为管理员。每个用户独立、隔离的网络工作区。
- 用于用户和角色管理的**管理控制台**、变更操作的**审计日志**（TTL 过期）以及**系统指标**。
- 详情见 [organizational/](organizational/README.md)。
## 技术栈
| 层级 | 技术 |
| -------- | ----------------------------------------------------------------------------------------------------- |
| 前端 | React 19, TypeScript, Vite, Tailwind CSS, React Flow (`@xyflow/react`), Recharts, lucide-react, axios |
| 后端 | Node.js, Express, TypeScript, MongoDB + Mongoose, Server-Sent Events, terminus (健康检查) |
| 认证 | OAuth 2.0 (Google / Microsoft), JWT 会话 cookies, 基于角色的访问控制, 速率限制 |
| 工具链 | ESLint, `tsc`, Mocha + Supertest + c8, GitHub Actions, Docker |
HTTP API 是 **RESTful (Richardson 成熟度模型 3 级)** 的：复数资源 URL（`/api/networks`、`/api/packets`、`/api/capture`、`/api/cidr`），正确的动词/状态码（`201 Created` + `Location`、`204 No Content`），以及每个表示上的 **HATEOAS** `_links`。`GET /api` 是超媒体入口点。认证端点位于 **`/auth`** 下（登录是一个浏览器重定向流程，而不是 API 资源）。存活/就绪探针暴露在 `/api/live` 和 `/api/ready`。查看完整的 [API 参考](docs/api.md)。
## 项目结构
```
routing-visualizer/
├─ application/ # Express + TypeScript backend (REST + SSE)
│ ├─ src/
│ │ ├─ routes/ # express.Router per resource: auth, users, networks, packets, capture, cidr, audit, metrics
│ │ ├─ handlers/ # request handlers (controllers) per route
│ │ ├─ services/ # business logic: packet-simulator, packet-sender, cidr, auth, metrics, versions, validation
│ │ ├─ db/ # MongoDB: connection, models/, network-service (repository), seed
│ │ ├─ middlewares/ # auth (sessions + roles), audit, rate-limit, request-logger, error-handler
│ │ ├─ lib/ # logger, HTTP error classes, hateoas links, health-checks, jwt
│ │ ├─ config/ # environment-driven configuration
│ │ ├─ types/ # shared domain types (packet, network, cidr)
│ │ └─ app.ts # express app assembly (CORS, body parsing, routes, SPA serving)
│ ├─ server.ts # entrypoint (config validation, DB connect + seed, health checks)
│ ├─ tests/ # Mocha + Supertest suite (in-memory MongoDB)
│ ├─ Dockerfile · docker-compose.yml · .env.example · README.md
│ │
│ └─ client/ # React + Vite frontend (kebab-case, explicit import extensions)
│ ├─ src/
│ │ ├─ pages/ # one folder per page (dashboard/, network/, packets/, cidr/, admin/, auth/)
│ │ ├─ components/ · layouts/ · hooks/ · context/
│ │ ├─ lib/api/ # axios API client (one module per backend resource)
│ │ ├─ config/ · styles/ · types/
│ ├─ vite.config.ts # dev proxy /api and /auth → http://localhost:8080
│ └─ README.md
├─ docs/ # API reference, screenshots
├─ deploy/ # production deployment runbook (Azure Container Apps)
├─ organizational/ # roles, admin guide, access control, account lifecycle
├─ .github/workflows/ # lint.yml · ci.yml (build + test) · package.yml · deploy.yml · release.yml
├─ CONTRIBUTING.md · SECURITY.md · CHANGELOG.md · LICENSE
└─ ReadMe.md
```
## 快速开始
### 前置条件
- **Node.js ≥ 20**（CI 使用 Node 22）和 **npm**
- **MongoDB** — 使用 `docker run -p 27017:27017 mongo:7` 在本地运行一个（或者使用 `application/` 中捆绑的 `docker compose up mongo`）。使用 `MONGODB_CONNECTION_STRING` 覆盖连接（默认为 `mongodb://localhost:27017/netviz`）。后端在首次启动时会植入一个演示性的“企业网络”拓扑。
### 在开发环境中运行
应用程序分为两部分 — 分别在各自的终端中运行。
**1) 后端**（REST API + 数据包流在 **:8080** 上，需要 MongoDB 正在运行）
```
cd application
npm install
npm run dev
```
**2) 前端**（Vite 开发服务器在 **:5173** 上，将 `/api` 和 `/auth` 代理到 `:8080`）
```
cd application/client
npm install
npm run dev
```
然后打开 **标签：MITM代理, React, Syscalls, TypeScript, 子网计算, 安全插件, 流量捕获, 网络拓扑, 网络模拟, 自动化攻击, 请求拦截