How shadowarcanist/netviz works
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: flow-store.ts Diagram state · App.tsx Application shell · inspector.tsx Selection inspector · sidebar.tsx Block sidebar
Components 19
Diagram editor
- Application shell
src/App.tsx - Toolbar
src/components/toolbar.tsx - Block sidebar
src/components/sidebar.tsx - Diagram canvas
src/components/canvas.tsx - Selection inspector
src/components/inspector.tsx
Animation and presentation
- Animation scenarios
src/animation/scenario-document.ts - Animation controls
src/components/animation-options.tsx - Playback controls
src/components/playback-controls.tsx - Animation runtime
src/animation/runtime.ts - Edge motion layer
src/components/edges/edge-motion-layer.tsx - Camera presentation
src/animation/video-camera.ts
Project data
- Diagram state
src/store/flow-store.ts - Snapshot and sharing
src/lib/storage.ts - Browser project store
- Image export
src/components/canvas-options.tsx
Blocks and templates
- Block catalog
src/blocks/registry.ts - Production templates
src/templates/registry.ts - Custom blocks
src/components/custom-block-dialog.tsx
Other components
- Diagram author
Connections 21
- 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