# ngui

**Repository Path**: fishep/ngui

## Basic Information

- **Project Name**: ngui
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-02
- **Last Updated**: 2026-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ngui - Nginx Topology Visualizer

A web application that parses nginx configuration files and renders interactive, sci-fi styled network topology diagrams in the browser.

## Features

- **Drag & Drop Upload** - Drop `.conf` files to instantly visualize routing topology
- **Multi-file Support** - Upload multiple config files with `include` directive resolution
- **Interactive Graph** - Zoom, pan, and navigate the topology with minimap
- **Auto Layout** - Dagre-powered hierarchical layout (top-to-bottom)
- **Sci-Fi Theme** - Dark background, glowing nodes, animated data-flow edges
- **Built-in Sample** - Load a demo config to explore without uploading files

## Topology Mapping

| Nginx Directive | Topology Node | Color |
|---|---|---|
| Incoming traffic | Client | Cyan |
| Nginx instance | Nginx | Blue |
| `server { }` | Server Block | Green |
| `location { }` | Location | Amber |
| `upstream { }` | Upstream Group | Purple |
| `server` (in upstream) / `proxy_pass` target | Backend | Orange |

Routing relationships (e.g. `proxy_pass` -> upstream) are automatically resolved and connected with animated edges.

## Tech Stack

- [React](https://react.dev) + [TypeScript](https://www.typescriptlang.org) + [Vite](https://vite.dev)
- [ReactFlow](https://reactflow.dev) - interactive node-based graphs
- [Dagre](https://github.com/dagrejs/dagre) - directed graph layout
- [Tailwind CSS](https://tailwindcss.com) - utility-first styling
- [Lucide](https://lucide.dev) - icons

## Getting Started

### Prerequisites

- Node.js >= 18

### Install & Run

```bash
git clone git@github.com:fishandsheep/ngui.git
cd ngui
npm install
npm run dev
```

Open http://localhost:5173 in your browser.

### Build for Production

```bash
npm run build
```

Static files are output to `dist/`, deployable to any static file server.

## Usage

1. Open the application in your browser
2. Drag and drop nginx `.conf` files onto the upload zone, or click **Load Sample Config** to try a demo
3. The topology diagram renders automatically:
   - **Zoom** - mouse wheel
   - **Pan** - click and drag on the background
   - **Minimap** - bottom-right corner for navigation overview
   - **Controls** - bottom-left for zoom in/out/fit

## License

MIT