文章总结： Netviz是一款基于浏览器的AI生成开源网络拓扑可视化工具，支持拖拽组件、连线绘制、自定义图标、撤销重做及导出图片等功能。该项目强调为个人使用而开发，提供完整的本地开发部署指南，包括环境配置、构建命令和静态托管方案。 综合评分： 85 文章分类： 安全工具,安全建设,WEB安全

全网爆火的 AI 开源神器：可视化画网络拓扑，太丝滑了

原创

didiplus didiplus

攻城狮成长日记

2026年5月19日 07:00 广东

在小说阅读器读本章

去阅读

Netviz项目介绍

Netviz是一款基于浏览器的可视化网络架构设计工具。你可以将服务器、代理、数据库等组件添加到画布中，通过连接它们来绘制数据流，按层级组织结构，并对每一个细节进行自定义。

⚠️ 重要说明

• ●该项目完全由AI创建，但应用程序已经经过了充分测试。
• ●这个项目主要是为了作者个人使用而构建，因此作者不会合并 PR，也不会主动添加新功能（除非是自己需要的功能）。
• ●如果你想修改或扩展功能，欢迎Fork这个仓库自行开发。

✨ 功能特性

• ●从侧边栏拖拽组件到画布
• ●使用连线连接组件
• ●Inspector面板编辑选中对象
• ●支持自定义组件和图标
• ●复制组件
• ●撤销/重做
• ●深色/浅色主题
• ●导出为图片
• ●使用IndexedDB本地保存，无需服务器

📦 环境要求

• ●Node.js 20 或更高版本（或 Bun 1.1+）
• ●npm、pnpm或bun

🚀 本地开发

安装依赖：

bun install
# 或
npm install

启动开发服务器：

bun run dev
# 或
npm run dev

然后在浏览器打开：

http://localhost:8888

🏗️ 构建项目

生成生产环境构建文件（输出到 dist/ 目录）：

bun run build
# 或
npm run build

本地预览构建结果：

bun run preview
# 或
npm run preview

🌐 部署方式

部署到任意静态托管平台

执行：

bun run build

dist/ 目录是一个纯静态网站。

只需要将其上传到任意静态托管平台即可完成部署。

项目预览

· · · 画布 · · ·

· · · 图层 · · ·

· · · 画布设置 · · ·

· · · 导出文件 · · ·

免责声明：

本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。

任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。

本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。

本文转载自：攻城狮成长日记 didiplus didiplus《全网爆火的 AI 开源神器：可视化画网络拓扑，太丝滑了》