Architecture Overview

ArrowCrab reads flat-packed GraphData, resolves compound scopes, computes a layered orthogonal layout, and renders an interactive scene.

Runtime pipeline

JSON text
  └─ worker: parse → validate/model → layout → routing → snapshot
       └─ main thread: model + snapshot → tile indexes → WebGL2/Canvas 2D scene

1. src/lib/graph/ validates records and resolves scopes.
2. src/lib/layout/ assigns layers, orders nodes, places scopes, and sizes compounds.
3. src/lib/routing/ allocates tracks and emits orthogonal routes.
4. src/lib/scene/ serializes geometry and builds exact tile indexes.
5. src/lib/rendering/ draws the scene and builds hit regions.
6. src/lib/interaction/ updates the viewport and selection.
7. src/lib/worker/ runs the pipeline and transfers route arrays.

WebGL2 draws structural geometry when available. Canvas 2D draws labels, ports, hit regions, and the fallback scene.

See Data Format for the input contract, Layout Algorithm for layout and routing, Rendering for scene construction, and Interaction for non-trivial input behavior.