Netviz

Netviz: A Visual Blueprint for Modern Network Architecture

Netviz is a browser-based application designed to make network architecture feel tangible. It lets you design complex data flows by dragging and dropping components onto a canvas, connecting them with edges to map how information travels through your system. You can organize components into layers to reduce clutter, customize every detail with your own icons and blocks, and inspect or edit properties with a dedicated inspector panel. The result is a visual language for architecture that helps teams reason about data flow, dependencies, and reliability without needing to write a single line of code.

[Netviz at a glance]
A clean, responsive canvas where you can place servers, proxies, and databases, then wire them together to reveal how data moves from source to sink. The interface emphasizes clarity and modularity, letting you focus on design rather than syntax. The project emphasizes local-first operation, so you can save work and export visuals without requiring a back-end service.

Here’s a closer look at what makes Netviz stand out, along with practical guidance for getting started, building, and extending the tool.

A Visual Design Philosophy

Netviz aims to translate network architecture into an intuitive visual language. The core design principles are:

• Clarity over verbosity: Each block represents a meaningful component, and connections (edges) show data flow directions and relationships. The goal is to reduce cognitive load while preserving depth.
• Modularity and layers: Blocks can be grouped into layers to reflect architectural concerns (infrastructure, application services, data stores, etc.). Layers can be toggled or reorganized to reveal different perspectives.
• Extensibility by design: Custom blocks with bespoke icons enable teams to tailor the canvas to their own domains, whether they’re microservices, edge components, or hybrid cloud resources.
• Local-first experience: All editing and storage happen in the user’s environment, with options to export for sharing. No server dependency is required for core workflows.

A Note on the Included Visual

To give you an immediate sense of Netviz’s aesthetics, a screenshot is included from the project. This image demonstrates the clean canvas with draggable blocks, a compact inspector panel, and a sidebar of component blocks that you can drop onto the workspace.

Netviz Screenshot

Key Features That Shape Your Design Workflow

Netviz bundles a set of capabilities that together create a fluid, visually guided design experience.

• Drag and drop blocks from a sidebar
• Quickly add servers, proxies, databases, and more.
• Resize, align, and position blocks to reflect your architecture.
• Connect blocks with edges
• Create directed data flows with simple edge drawing.
• See source and destination relationships at a glance.
• Inspector panel to edit selected items
• Change labels, icons, and properties without leaving the canvas.
• Tweak edge behavior, such as routing constraints or latency hints.
• Custom blocks with your own icons
• Use brand-aligned icons to keep diagrams readable and navigable.
• Extend the library with domain-specific components.
• Duplicate blocks
• Speed up diagramming by duplicating existing patterns (including their properties).
• Undo and redo
• A safety net to experiment and refine architecture without fear.
• Dark and light theme
• Light mode for bright environments; dark mode for focus and contrast.
• Export to image
• Produce polished visuals for documents, slides, or collaboration.
• Local save with IndexedDB, no server needed
• Your work stays in your browser, ensuring privacy and portability.

What You’ll Need to Run Netviz Locally

Before you begin, you’ll want a development environment that can run modern JavaScript tooling.

• Requirements
• Node.js 20 or newer (or Bun 1.1 or newer)
• npm, pnpm, or bun as your package manager

A Typical Local Development Flow

Netviz is designed to be approachable for both designers and engineers. Here is how you typically get started on your machine.

• Install dependencies
• bun install
• or npm install
• Start the development server
• bun run dev
• or npm run dev
• Open your browser to the dev URL
• http://localhost:8888

In the interest of reproducibility, these steps are commonly used as the baseline workflow. If you prefer a different runtime, the project supports alternatives with parity in the dev experience.

Building for Production and Local Preview

When you’re ready to ship a production-ready artifact or to preview how the app behaves in a production-like environment, you’ll generate a dist folder and optionally a local preview.

• Create a production build in dist/
• bun run build
• or npm run build
• Preview the build locally
• bun run preview
• or npm run preview

This produces a static site suitable for hosting on any standard static host. The dist directory contains the static assets that render the app, including the visual canvas and the component library used to assemble flows.

How to Deploy Netviz

Netviz is designed to be simple to deploy in a variety of environments, including self-contained static hosting or container-based platforms. There are two straightforward deployment options.

Option 1: Any static host

• Build the project
• bun run build
• Upload the dist/ folder to your static hosting provider (GitHub Pages, Netlify, Vercel, AWS S3 static hosting, etc.)
• That’s it — the site will be served as a plain static site with all client-side interactivity intact.

Option 2: Coolify (containerized deployment)

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

This approach packages Netviz in a containerized workflow, enabling a more complete simulation of production-grade hosting with minimal setup.

License and How to Use

Netviz is released under the MIT license. This permissive license invites exploration, modification, and redistribution. If you fork or adapt the project, you’re encouraged to retain the license and provide attribution as appropriate.

• License: MIT
• See LICENSE for details

Understanding the Architecture of Netviz

While Netviz focuses on the front-end experience, it is structured to support a scalable design process:

• Canvas and Grid
• The main workspace where blocks are placed, moved, and connected.
• A visually consistent grid helps with alignment and readability.
• Sidebar Library
• A collection of block templates representing common network components (servers, proxies, databases, caches, etc.).
• The library also hosts options for custom blocks and user-defined icons.
• Edges and Connections
• Directed edges illustrate data flow paths, dependencies, and possible bottlenecks.
• Edge properties can influence how data might travel in a real deployment (e.g., latency hints, routing constraints).
• Inspector Panel
• A context-sensitive panel that updates based on the selected block or edge.
• Provides precise control over properties, labels, and visual cues.
• Layer Management
• The architecture can be organized into multiple layers to separate concerns (infrastructure vs. application logic, for example).
• Layer toggling and reordering keep complex diagrams legible.

Practical Scenarios You Might Model with Netviz

• Microservice Data Flow
• Model how requests travel from a gateway to multiple microservices, with proxies and caches in between.
• Data Pipeline Architecture
• Represent ingestion, transformation, and storage steps, including message buses and databases.
• Hybrid Cloud Layout
• Combine on-prem resources with cloud components, showing data gravity and latency considerations.
• Secure and Audit-Centric Designs
• Map security appliances, identity providers, and logging/monitoring corners to ensure observability and compliance.

The Interactive Experience: UI Elements You’ll Encounter

• Canvas
• A clean space where you place blocks, connect them, and shape the architecture.
• Block Library
• A curated set of templates for common components and system roles.
• Edge Editor
• A way to refine how data flows between blocks, including direction and constraints.
• Inspector Panel
• A focused workspace for tweaking properties and metadata.
• Layer Controls
• Tools to create, rename, reorder, and toggle the visibility of layers.
• Theme Switcher
• A quick way to switch between dark and light modes to suit your environment.

A Word on AI and Testing

An important note about Netviz: this project was entirely created using AI. The end product has undergone thorough testing, and the user experience has been validated against practical design tasks. The AI-driven development approach can accelerate iteration and ensure consistent design patterns, while still delivering a reliable, production-ready tool. If you want to contribute, the project is open to forks and feature exploration. The maintainers emphasize that new features will be considered if they align with personal or project needs.

Local-First Data Persistence

Netviz prioritizes a local-first approach, leveraging IndexedDB for offline storage within the browser. This design choice ensures:

• No mandatory server for core editing workflows
• Quick access to your work without network latency
• Portability of diagrams that you can export or share as images

If you choose to export or share your diagrams, you can capture a high-quality image of your canvas, suitable for inclusion in documents, slides, or knowledge bases.

A Short Guide to the Developer Experience

If you’re exploring Netviz as a contributor or building a variant, here are practical notes to keep in mind.

• Start small: Run the development server locally to see the live app and verify your changes.
• Use the inspector: When you create or edit blocks, rely on the inspector to ensure the properties reflect your intent.
• Test interactions: Dragging, connecting edges, duplicating blocks, and using undo/redo are central UX flows that should feel smooth.
• Build and preview: Use the build and preview commands to validate how the app behaves in production-like conditions before push.

Code and configuration bits (high level)

• Dependency management
• bun install or npm install
• Scripts to run
• bun run dev or npm run dev
• bun run build or npm run build
• bun run preview or npm run preview
• Deployment configuration
• For static hosting, simply serve the dist/ folder
• For containerized deployments (Coolify), deploy the coolify.yaml configuration

Design Considerations for Teams

Netviz is not just a drawing tool; it’s a collaborative design language for teams. When teams use Netviz to map architecture, several practices tend to emerge:

• Visual naming conventions
• Consistent block labels and iconography to reduce ambiguity.
• Layer-based breakdowns
• Separate concerns into infrastructure, services, data stores, and security to keep diagrams readable at scale.
• Iterative validation
• Regularly review diagrams with stakeholders to ensure the model aligns with real-world deployments.
• Export protocols
• Use image export to disseminate diagrams across documentation, incident reports, and planning sessions.

A Practical Example to Imagine

Picture a simple yet representative scenario: a user request hits a gateway, which passes through a load balancer to a pool of microservices. A caching layer sits in front of a database, and monitoring is wired to capture metrics at various points. In Netviz, you’d place a gateway block at the left, connect it through a load balancer to several service blocks, insert a cache block in front of the database, and then add monitoring blocks to important edges. You’d assign an icon for each block that clearly communicates its role, group related components into a single layer, and use the inspector to annotate latency expectations and service slugs. The final diagram would offer a quick, shareable view of how data and requests traverse the system, making bottlenecks and dependencies immediately visible.

Conclusion: A Tool for Visual Thinking in Network Architecture

Netviz offers a compelling approach to designing and communicating network architectures. By combining a drag-and-drop canvas with a powerful inspector, layered organization, and a local-first persistence model, it supports rapid ideation and careful refinement. The ability to export polished imagery means diagrams can travel beyond the whiteboard and into the long-term documentation that teams need. The inclusion of custom blocks with bespoke icons ensures that Netviz remains adaptable to a broad spectrum of domains and intent.

If you’re exploring network design, system architecture, or data flow mapping, Netviz provides a visually engaging workspace that keeps you grounded in the relationships that matter. The project’s philosophy — making complex systems tangible through clean visuals and a fluid user experience — is evident in every component of the tool, from the drag-and-drop interactions to the granular control offered by the inspector panel.

Final notes for readers and potential contributors

• Netviz’s emphasis on offline capability and local storage makes it a practical choice for environments with limited connectivity or strict data governance.
• The MIT license invites experimentation and adaptation, so you’re free to tailor Netviz to your organization’s needs, share improvements, and contribute back if you wish.
• If you’re curious about how such a tool can evolve, consider forking the repository and prototyping features that align with your workflows — you’ll be joining a community oriented toward practical visualization and architectural clarity.

In short, Netviz is more than a diagramming tool. It’s a visual language for outlining, validating, and communicating network architectures in a way that is accessible, extensible, and resilient to the complexity that modern systems inevitably bring. Whether you’re an architect, an engineer, a product designer, or simply someone who loves mapping systems, Netviz offers a compelling canvas on which to sketch, test, and share your most critical data-flow designs.