高级预览Live previewExportDeveloper tool

Nginx 配置可视化

可视化 nginx server、location、proxy_pass、upstream 关系。

示例

nginx.conf

预览结果就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

打开

Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

打开

架构图生成器

用 AI 从产品或系统说明生成 Mermaid 架构图。

打开

使用方法

1粘贴包含 server、upstream、location 的聚焦 nginx 配置。
2检查 upstream、proxy_pass 目标，以及重复或过宽的 location。
3确认正则 location、前缀 location、兜底路由是否符合预期。
4导出图用于 PR、runbook 或交接文档。

常见场景

Nginx 路由 review反向代理文档AI nginx 配置校验入口迁移说明location 规则调试

常见问题

Nginx 图里应该优先看什么？

先看 server_name、upstream、过宽的前缀 location、正则 location，以及 proxy_pass 是否按预期保留或改写 URI。

它能模拟所有 nginx 匹配规则吗？

不能。它主要可视化常见 server/location/upstream/proxy 关系，精确运行时匹配仍应通过 nginx 或专门路由测试确认。

为什么适合检查 AI 生成配置？

AI 输出经常看起来合理但漏掉边界情况，可视化后更容易发现过宽 location、缺失 upstream 和意外 proxy 目标。

Nginx Config Visualizer 会把 server、upstream、location、proxy_pass 和路由关系画出来，不需要逐行读完整配置。

它适合检查 AI 生成 nginx 片段、迁移 review、反向代理文档，以及排查为什么某个路径被错误 location 接管。

部署到生产入口或边缘代理前，可以用图和源码一起解释路由行为。

Demo：部署前解释反向代理关系

API 网关或边缘代理 review 时，大家最关心哪个路径到哪个 upstream。图能直接展示关系，不必每个人都读 nginx 语法。

多个域名共用文件时，按 server_name 分组查看。
特别关注 catch-all location，它可能遮住更具体的路由。
把 proxy_pass 目标和 Docker Compose/Kubernetes 服务名对照。

upstream api_backend {
  server api:8080;
}
server {
  server_name example.com;
  location /api/ { proxy_pass http://api_backend; }
  location /assets/ { root /var/www; }
}

这个示例应生成 server 节点、upstream 节点，以及 /api/ 和 /assets/ 两条路由。

调试方法：上线前检查路由优先级

Nginx 事故常来自 location 优先级、proxy header 或 rewrite 规则。预览工具应帮助你在发布前看清路径匹配顺序。

对比 exact、prefix、regex location 的实际匹配优先级。
后端依赖 host、scheme、client IP 时重点检查 proxy_set_header。
缓存、gzip、静态资源块应和 API proxy 分开 review。

location = /health { return 200; }
location /api/ { proxy_pass http://api:8080; }
location ~* \.(js|css|png)$ { expires 30d; }