又一个能让普通人瞬间化身架构师的神器来了——

浏览器里直接拖拖拽拽，服务器、代理、数据库之间的数据流向，全给你画得清清楚楚，一行代码不用碰。

说白了就是：不会画架构图？没关系，现在连这道门槛也给你拆了。

🔗 https://t.co/aiaTo2QUsj https://t.co/zE7qMv2TPB

ShadowArcanist/netviz

Source: https://github.com/ShadowArcanist/netviz

Netviz

Netviz is a browser-based app for designing network architectures visually.

Add components like servers, proxies, and databases to a canvas, connect them to map data flow, organize them into layers, and customize every detail.

This project was entirely created using AI, but the application has been thoroughly tested.

This project was built primarily for my personal use, so I will not be merging pull requests or adding new features unless I need them myself. If you want to make changes or add features, feel free to fork this repository.

Features

• Drag and drop blocks from a sidebar
• Connect blocks with edges
• Inspector panel to edit selected items
• Custom blocks with your own icons
• Duplicate blocks
• Undo and redo
• Dark and light theme
• Export to image
• Local save with IndexedDB, no server needed

Requirements

• Node.js 20 or newer (or Bun 1.1 or newer)
• npm, pnpm, or bun

Local development

Install dependencies:

bun install
# or
npm install

Start the dev server:

bun run dev
# or
npm run dev

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

Build

Create a production build in dist/:

bun run build
# or
npm run build

Preview the build locally:

bun run preview
# or
npm run preview

Deploy

Option 1: Any static host

1. Run bun run build
2. The dist/ folder is a plain static site. Upload it to any static host, that’s it.

Option 2: Coolify

1. Add a new resource in Coolify → “Docker Compose Empty.”
2. Paste the contents of the coolify.yaml from the repo into the input field.
3. Click “Deploy!”

License

MIT. See LICENSE.