{"id":50957662,"url":"https://github.com/fishandsheep/ngui","last_synced_at":"2026-06-18T09:30:40.513Z","repository":{"id":362315028,"uuid":"1258380483","full_name":"fishandsheep/ngui","owner":"fishandsheep","description":"Local-first web tool to visualize nginx -T output as an interactive routing topology","archived":false,"fork":false,"pushed_at":"2026-06-11T09:50:25.000Z","size":1819,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-06-11T11:21:51.005Z","etag":null,"topics":["nginx","nginx-config","react","react-flow","topology","typescript","visualization","vite"],"latest_commit_sha":null,"homepage":"https://fishandsheep.github.io/ngui/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fishandsheep.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-03T14:22:31.000Z","updated_at":"2026-06-11T09:50:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/fishandsheep/ngui","commit_stats":null,"previous_names":["fishandsheep/ngui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fishandsheep/ngui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishandsheep%2Fngui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishandsheep%2Fngui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishandsheep%2Fngui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishandsheep%2Fngui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fishandsheep","download_url":"https://codeload.github.com/fishandsheep/ngui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishandsheep%2Fngui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34485162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nginx","nginx-config","react","react-flow","topology","typescript","visualization","vite"],"created_at":"2026-06-18T09:30:35.318Z","updated_at":"2026-06-18T09:30:38.578Z","avatar_url":"https://github.com/fishandsheep.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nginx UI Topology\n\n\u003e 上传 `nginx -T` 输出，查看解析后的配置，在浏览器中探索带动画的路由拓扑。\n\n[English](README-en.md)\n\n![React](https://img.shields.io/badge/React-18-61dafb?logo=react\u0026logoColor=111)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript\u0026logoColor=fff)\n![Vite](https://img.shields.io/badge/Vite-5-646cff?logo=vite\u0026logoColor=fff)\n![Local First](https://img.shields.io/badge/Privacy-local--first-22c55e)\n![License](https://img.shields.io/badge/License-Apache--2.0-blue)\n\nNginx UI Topology 是一个本地优先的 Web 工具，用于可视化 Nginx 路由行为。粘贴或上传 `nginx -T` 的输出，然后在交互式拓扑画布中查看服务器、location、upstream、后端目标、变量和请求流向。\n\n## 截图\n\n### 深色模式\n\n![Nginx UI 深色模式拓扑](src/image/black.png)\n\n### 浅色模式\n\n![Nginx UI 浅色模式拓扑](src/image/white.png)\n\n## 功能\n\n- 直接在浏览器中上传或编辑 `nginx -T` 输出。\n- 带语法高亮的 Nginx 配置编辑器，实时更新拓扑。\n- 交互式 React Flow 画布，支持缩放、平移、小地图、适配视图和布局旋转。\n- 可视化节点：入口、服务器、路由、upstream、动态变量和后端目标。\n- 带动画的数据流边线，选中时高亮，无关节点自动淡化。\n- 拖动节点重新排列拓扑，带有平滑的 lerp 跟随效果。\n- 配置分析，检测常见问题和错误配置。\n- 详情面板，展示选中节点和边线的源指令及行号信息。\n- 导出拓扑为 PNG 或 JSON。\n- 双语界面：英文和中文。\n- 本地优先处理：配置内容不会上传到服务器。\n\n## 配置分析\n\n内置分析器在解析 AST 后实时检查并报告问题。问题显示在左侧面板中，按严重程度排序（`错误` \u003e `警告` \u003e `提示`），附带源文件行号，点击即可跳转到编辑器对应位置。\n\n### 检测规则\n\n| 严重程度 | 检测项 | 说明 |\n|----------|--------|------|\n| 警告 | 空 upstream | `upstream` 块中没有 `server` 指令。 |\n| 警告 | 缺少 `listen` | `server` 块中没有 `listen` 指令。 |\n| 警告 | 重复 `listen` | 同一 `server` 块中有多个 `listen` 指令使用相同的地址和端口。 |\n| 警告 | 未定义的 upstream | `proxy_pass`（或 `fastcgi_pass`、`grpc_pass` 等）引用了一个从未定义的 upstream 名称。 |\n| 警告 | 重复的 upstream 名称 | 多个 `upstream` 块使用了相同的名称。 |\n| 提示 | 缺少 `server_name` | HTTP `server` 块中没有 `server_name` 指令。 |\n| 提示 | 使用了 `if` 指令 | `server` 或 `location` 块中包含 `if` 指令，这是已知的意外行为来源。 |\n| 提示 | 无终止路由 | `location` 块中没有 `proxy_pass`、`return`、`try_files` 等决定响应的指令。 |\n\n## 快速开始\n\n```bash\nnpm install\nnpm run dev\n```\n\n打开 Vite 打印的本地开发地址，通常是：\n\n```text\nhttp://localhost:5173/\n```\n\n## 使用方法\n\n1. 在安装了 Nginx 的机器上运行 `nginx -T`。\n2. 上传生成的输出，或粘贴到左侧配置编辑器中。\n3. 在问题面板中查看配置问题，点击问题可跳转到源码对应行。\n4. 使用搜索查找服务器名称、upstream、后端或指令。\n5. 点击节点或边线查看详情。\n6. 拖动节点重新排列拓扑布局。\n7. 使用 **旋转布局** 在从左到右和从上到下的拓扑布局之间切换。\n8. 需要时将结果导出为 PNG 或 JSON。\n\n## 支持的 Nginx 概念\n\n解析器从 Nginx 风格的块和指令构建轻量级 AST，然后从常见路由原语推导出拓扑模型：\n\n- `http`、`server`、`location`、`upstream`、`stream` 和 `map`\n- `listen`、`server_name` 和 upstream `server`\n- `proxy_pass`、`fastcgi_pass`、`grpc_pass`、`uwsgi_pass`、`scgi_pass` 和 `memcached_pass`\n- `rewrite`、`return` 和 `try_files`\n- 动态目标，例如 `proxy_pass http://$backend`\n\n对于 Lua、njs、深度动态变量和完整的 Nginx location 优先级模拟等复杂运行时行为，系统会在可能的情况下进行可视化表示，但不作为精确的 Nginx 运行时模拟器。\n\n## 脚本命令\n\n```bash\nnpm run dev      # 启动 Vite 开发服务器\nnpm run build    # 类型检查并构建生产版本\nnpm test         # 运行 Vitest 测试\nnpm run preview  # 预览生产构建\n```\n\n## 技术栈\n\n- React + TypeScript\n- Vite\n- React Flow\n- Lucide React 图标\n- html-to-image\n- Vitest\n\n## 隐私\n\n所有解析和渲染均在浏览器中完成。应用不需要后端服务，也不会上传 Nginx 配置内容。\n\n## 许可证\n\nApache-2.0。详见 [LICENSE](LICENSE)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffishandsheep%2Fngui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffishandsheep%2Fngui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffishandsheep%2Fngui/lists"}