「Netviz」浏览器里的网络架构图编辑器：拖拽服务器、代理和数据库画数据流

Netviz 是一个运行在浏览器里的网络架构图编辑器。它面向的不是通用白板，而是更具体的系统/网络拓扑设计：从侧边栏拖出服务器、负载均衡、Firewall、Proxy、Container、Database、Service Provider 等组件，放到画布上，再用连线表达数据流。

如果你经常需要给一个系统画结构草图，Netviz 的好处是它把常见网络组件和画图交互放在一起，不需要从通用图形工具里反复找图标、调样式。打开页面后就能开始搭架构，适合做方案草图、内部说明图、部署结构图，或者记录某个项目当前的服务关系。

画布里有什么

Netviz 的基础组件分成几类：核心网络/服务组件、基础形状和注释元素。README 提到它支持从侧边栏拖拽区块、用边连接区块、通过 Inspector 面板编辑选中的元素，还能创建带自定义图标的自定义区块。对于不是专业设计师的开发者来说，这些功能已经覆盖了大多数“把系统讲清楚”的场景。

• 拖拽服务器、代理、数据库等区块到画布。
• 用连接线表达组件之间的数据流或依赖关系。
• 用 Inspector 面板调整选中对象的细节。
• 支持自定义 block 和自定义图标。
• 支持复制区块、撤销/重做、暗色/亮色主题。
• 可以导出图片，方便放进文档、Issue 或方案说明。
• 使用 IndexedDB 本地保存，不依赖服务端。

部署和项目状态

Netviz 是 TypeScript 项目，MIT 许可，当前 GitHub 约 91 stars。它提供在线版本，也可以自托管：仓库里带 Dockerfile 和 nginx 配置，构建后的 dist 是普通静态站点，可以部署到任意静态托管服务。作者在 README 中说明项目主要为个人使用而建，虽然经过测试，但不会主动合并 PR 或添加自己不需要的新功能，想改功能可以 fork。

这点反而说明它的定位很明确：不是重型企业制图平台，而是一个小而直接的网络架构画布。对于独立开发者、小团队、DevOps 或后端工程师，它适合在“还没必要上完整架构工具”的阶段，把想法快速画出来。

项目地址

项目地址：https://github.com/ShadowArcanist/netviz
在线体验：https://netviz.shadowarcanist.com/