# shadowarcanist/netviz architecture

> Architecture diagram of the GitHub repository shadowarcanist/netviz, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/shadowarcanist/netviz
- Repository: https://github.com/shadowarcanist/netviz

## Overview

Netviz is a browser-based visual editor for network architecture diagrams and animated request flows. Users assemble blocks and templates on a canvas, connect components, edit diagram and animation properties, then preview or present the flow; projects can be saved locally, shared, and exported as images. The graph highlights the documented editing, animation, and persistence stages. Some feature paths come from the README and tree; wiring not evident in the sampled source is omitted.

Main entry points: [`src/store/flow-store.ts`](https://github.com/shadowarcanist/netviz/blob/v2/src/store/flow-store.ts) (Diagram state), [`src/App.tsx`](https://github.com/shadowarcanist/netviz/blob/v2/src/App.tsx) (Application shell), [`src/components/inspector.tsx`](https://github.com/shadowarcanist/netviz/blob/v2/src/components/inspector.tsx) (Selection inspector), [`src/components/sidebar.tsx`](https://github.com/shadowarcanist/netviz/blob/v2/src/components/sidebar.tsx) (Block sidebar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Diagram editor"]
  node_app["Application shell<br/>[App.tsx]"]
  node_toolbar["Toolbar<br/>[toolbar.tsx]"]
  node_sidebar["Block sidebar<br/>[sidebar.tsx]"]
  node_canvas["Diagram canvas<br/>[canvas.tsx]"]
  node_inspector["Selection inspector<br/>[inspector.tsx]"]
end

subgraph group_animation["Animation and presentation"]
  node_scenario["Animation scenarios"]
  node_options["Animation controls"]
  node_playback["Playback controls"]
  node_runtime["Animation runtime<br/>[runtime.ts]"]
  node_motion["Edge motion layer"]
  node_camera["Camera presentation<br/>[video-camera.ts]"]
end

subgraph group_projects["Project data"]
  node_store["Diagram state<br/>[flow-store.ts]"]
  node_storage["Snapshot and sharing<br/>[storage.ts]"]
  node_indexeddb[("Browser project store")]
  node_imageexport["Image export<br/>[canvas-options.tsx]"]
end

subgraph group_catalog["Blocks and templates"]
  node_blocks["Block catalog<br/>[registry.ts]"]
  node_templates["Production templates<br/>[registry.ts]"]
  node_customblocks["Custom blocks"]
end

node_user(("Diagram author"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_toolbar
node_app -->|"renders"| node_sidebar
node_app -->|"renders"| node_canvas
node_app -->|"renders"| node_inspector
node_sidebar -->|"offers blocks"| node_blocks
node_sidebar -->|"offers templates"| node_templates
node_canvas -->|"reads and updates"| node_store
node_inspector -->|"edits selection"| node_store
node_inspector -->|"shows controls"| node_options
node_inspector -->|"shows controls"| node_playback
node_options -->|"updates animation"| node_store
node_playback -->|"controls playback"| node_store
node_store -->|"manages scenarios"| node_scenario
node_motion -->|"subscribes to frames"| node_runtime
node_store -->|"persists state"| node_indexeddb
node_storage -.->|"reads and writes"| node_indexeddb
node_toolbar -.->|"shares projects"| node_storage
node_canvas -.->|"exports image"| node_imageexport
node_app -->|"coordinates presentation"| node_camera
node_customblocks -->|"edits custom blocks"| node_store

click node_app "https://github.com/shadowarcanist/netviz/blob/v2/src/App.tsx"
click node_toolbar "https://github.com/shadowarcanist/netviz/blob/v2/src/components/toolbar.tsx"
click node_sidebar "https://github.com/shadowarcanist/netviz/blob/v2/src/components/sidebar.tsx"
click node_canvas "https://github.com/shadowarcanist/netviz/blob/v2/src/components/canvas.tsx"
click node_inspector "https://github.com/shadowarcanist/netviz/blob/v2/src/components/inspector.tsx"
click node_store "https://github.com/shadowarcanist/netviz/blob/v2/src/store/flow-store.ts"
click node_blocks "https://github.com/shadowarcanist/netviz/blob/v2/src/blocks/registry.ts"
click node_templates "https://github.com/shadowarcanist/netviz/blob/v2/src/templates/registry.ts"
click node_customblocks "https://github.com/shadowarcanist/netviz/blob/v2/src/components/custom-block-dialog.tsx"
click node_scenario "https://github.com/shadowarcanist/netviz/blob/v2/src/animation/scenario-document.ts"
click node_options "https://github.com/shadowarcanist/netviz/blob/v2/src/components/animation-options.tsx"
click node_playback "https://github.com/shadowarcanist/netviz/blob/v2/src/components/playback-controls.tsx"
click node_runtime "https://github.com/shadowarcanist/netviz/blob/v2/src/animation/runtime.ts"
click node_motion "https://github.com/shadowarcanist/netviz/blob/v2/src/components/edges/edge-motion-layer.tsx"
click node_camera "https://github.com/shadowarcanist/netviz/blob/v2/src/animation/video-camera.ts"
click node_storage "https://github.com/shadowarcanist/netviz/blob/v2/src/lib/storage.ts"
click node_imageexport "https://github.com/shadowarcanist/netviz/blob/v2/src/components/canvas-options.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_toolbar,node_sidebar,node_canvas,node_inspector toneBlue
class node_scenario,node_options,node_playback,node_runtime,node_motion,node_camera toneAmber
class node_store,node_storage,node_indexeddb,node_imageexport toneMint
class node_blocks,node_templates,node_customblocks toneRose
class node_user toneIndigo
```

## Components

### Diagram editor

- [Application shell](https://github.com/shadowarcanist/netviz/blob/v2/src/App.tsx): `src/App.tsx`
- [Toolbar](https://github.com/shadowarcanist/netviz/blob/v2/src/components/toolbar.tsx): `src/components/toolbar.tsx`
- [Block sidebar](https://github.com/shadowarcanist/netviz/blob/v2/src/components/sidebar.tsx): `src/components/sidebar.tsx`
- [Diagram canvas](https://github.com/shadowarcanist/netviz/blob/v2/src/components/canvas.tsx): `src/components/canvas.tsx`
- [Selection inspector](https://github.com/shadowarcanist/netviz/blob/v2/src/components/inspector.tsx): `src/components/inspector.tsx`

### Animation and presentation

- [Animation scenarios](https://github.com/shadowarcanist/netviz/blob/v2/src/animation/scenario-document.ts): `src/animation/scenario-document.ts`
- [Animation controls](https://github.com/shadowarcanist/netviz/blob/v2/src/components/animation-options.tsx): `src/components/animation-options.tsx`
- [Playback controls](https://github.com/shadowarcanist/netviz/blob/v2/src/components/playback-controls.tsx): `src/components/playback-controls.tsx`
- [Animation runtime](https://github.com/shadowarcanist/netviz/blob/v2/src/animation/runtime.ts): `src/animation/runtime.ts`
- [Edge motion layer](https://github.com/shadowarcanist/netviz/blob/v2/src/components/edges/edge-motion-layer.tsx): `src/components/edges/edge-motion-layer.tsx`
- [Camera presentation](https://github.com/shadowarcanist/netviz/blob/v2/src/animation/video-camera.ts): `src/animation/video-camera.ts`

### Project data

- [Diagram state](https://github.com/shadowarcanist/netviz/blob/v2/src/store/flow-store.ts): `src/store/flow-store.ts`
- [Snapshot and sharing](https://github.com/shadowarcanist/netviz/blob/v2/src/lib/storage.ts): `src/lib/storage.ts`
- **Browser project store**
- [Image export](https://github.com/shadowarcanist/netviz/blob/v2/src/components/canvas-options.tsx): `src/components/canvas-options.tsx`

### Blocks and templates

- [Block catalog](https://github.com/shadowarcanist/netviz/blob/v2/src/blocks/registry.ts): `src/blocks/registry.ts`
- [Production templates](https://github.com/shadowarcanist/netviz/blob/v2/src/templates/registry.ts): `src/templates/registry.ts`
- [Custom blocks](https://github.com/shadowarcanist/netviz/blob/v2/src/components/custom-block-dialog.tsx): `src/components/custom-block-dialog.tsx`

### Other components

- **Diagram author**

## Connections

- Diagram author → Application shell: uses
- Application shell → Toolbar: renders
- Application shell → Block sidebar: renders
- Application shell → Diagram canvas: renders
- Application shell → Selection inspector: renders
- Block sidebar → Block catalog: offers blocks
- Block sidebar → Production templates: offers templates
- Diagram canvas → Diagram state: reads and updates
- Selection inspector → Diagram state: edits selection
- Selection inspector → Animation controls: shows controls
- Selection inspector → Playback controls: shows controls
- Animation controls → Diagram state: updates animation
- Playback controls → Diagram state: controls playback
- Diagram state → Animation scenarios: manages scenarios
- Edge motion layer → Animation runtime: subscribes to frames
- Diagram state → Browser project store: persists state
- Snapshot and sharing → Browser project store: reads and writes
- Toolbar → Snapshot and sharing: shares projects
- Diagram canvas → Image export: exports image
- Application shell → Camera presentation: coordinates presentation
- Custom blocks → Diagram state: edits custom blocks