@cevenif: Another tool that instantly turns ordinary people into architects is here — drag and drop in the browser, and the data flow between servers, proxies, and databases is all clearly drawn for you without touching a single line of code. In short: can't draw architecture diagrams? No problem, now this barrier has been removed for you too. https://github.co…
Summary
Netviz is a browser-based visual tool that allows users to design network architecture diagrams via drag-and-drop, without writing code. Supports adding components such as servers, proxies, databases, connecting them to map data flows, and customizing details.
View Cached Full Text
Cached at: 06/27/26, 05:57 PM
Another tool that lets ordinary people instantly become architects is here—just drag and drop in your browser, and the data flows between servers, proxies, and databases are all clearly drawn without touching a single line of code. In other words: Can’t draw architecture diagrams? No problem, even that barrier is now removed.
🔗 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:
``bash
bun install
or npm install
``
Start the dev server:
``bash
bun run dev
or npm run dev
``
Open http://localhost:8888 in your browser.
Build
Create a production build in dist/:
``bash
bun run build
or npm run build
``
Preview the build locally:
``bash
bun run preview
or npm run preview
``
Deploy
Option 1: Any static host
- Run
bun run build - The
dist/folder is a plain static site. Upload it to any static host, that’s it.
Option 2: Coolify
- Add a new resource in Coolify → “Docker Compose Empty.”
- Paste the contents of the
coolify.yamlfrom the repo into the input field. - Click “Deploy!”
License
MIT. See LICENSE.
Similar Articles
@XAMTO_AI: Wow! Just found a crazy plugin — after installing it, you can directly see the tech stack of any webpage! Front-end frameworks, backends, CDNs all exposed. Click on names to jump to official sites. Even getting a quick overview is this intense in the AI era? Jump on it and research before others leave you in the dust. https://github.com/setube/stac…
Introducing StackPrism, a browser extension that automatically identifies the tech stack of web pages, including front-end frameworks, backends, and CDNs. Supports Chrome/Edge/Firefox, built on Manifest V3, collects clues through multiple channels and presents them in a categorized view.
@XAMTO_AI: Can generate architecture diagrams just by speaking? This tool is actually pretty impressive. Speak plain language to Claude, and it directly outputs architecture diagrams, flowcharts, sequence diagrams, data flow diagrams... It also supports one-click switching between dark and light themes, export in multiple formats, all in a single HTML file. Programmers who can't draw are saved, and programmers who don't want to draw are saved too...
Archify is a Claude Skill that allows users to generate architecture diagrams, flowcharts, sequence diagrams, etc. using natural language descriptions, and supports dark/light theme switching and multi-format export.
@XAMTO_AI: Developers who write code will inevitably have to draw architecture diagrams. The most annoying part is manually dragging boxes and connecting lines — revising a version can make you question your life. LikeC4 generates software architecture diagrams directly from code; when the code changes, the diagram updates too, no more spending ages in Figma. It's based on the C4 Model and Structurizr DSL design…
LikeC4 is an open-source tool based on the C4 Model and Structurizr DSL that automatically generates software architecture diagrams from code and updates them in real-time, avoiding the tedious work of manually maintaining diagrams.
@0xQiYan: Still drawing architecture diagrams manually? Dragging and tweaking for half a day? Bookmark this! Today I have to recommend this skill—I recently installed `drawio-skill`, and with just one sentence it can generate professional diagrams, no more drawing by hand. The logic is very simple: just speak naturally (e.g., "draw a trading system architecture diagram"), and it generates the diagram directly...
Introducing the drawio-skill tool, which generates professional diagrams such as architecture diagrams, flowcharts, ER diagrams, etc., based on natural language descriptions. It supports multi-round iteration and export to various formats, significantly improving diagramming efficiency.
@cevenif: Recently stumbled upon a pretty interesting open-source tool on GitHub: AetherViz Master. Give it a teaching topic, and it automatically generates a set of 3D interactive teaching web pages that you can use directly in your browser. Under the hood, it uses a hybrid rendering of Three.js and SVG, and can auto-detect subjects—…
Introduces an open-source tool called AetherViz Master, which uses AI to automatically transform teaching topics into immersive 3D interactive web pages, supporting multiple subjects such as physics, chemistry, mathematics, and more.