An interactive map of Snappet Mobile — every screen, sheet, service, engine component and data model, wired by the navigation and data-flow edges that connect them. Built directly from the source tree; no backend, fully offline.
What the shapes mean
Each node type has a colour and shape (see the legend): mini-apps are hexagons in their brand tint, screens are rectangles, sheets/modals are amber, services are violet, the HighlightEngine core is red, and data models are yellow cylinders. Edges are coloured by relationship — green for navigation pushes, amber dashed for presented sheets, violet for "uses a service", red for engine data-flow.
Three layouts
Force — organic, physics-driven. Hierarchy — breadth-first layers from the app root, great for seeing depth. Clusters — nodes grouped by mini-app with labelled bubbles.
Trace a path
Click Trace path (or open a node and use "Trace a path from here"), then click a target node. The shortest navigation/data path between them lights up — a quick way to read a user flow, e.g. App Library → Workout Reels → Reel → Share.
Keyboard shortcuts
| / | Focus search |
| F | Fit graph to screen |
| 1 2 3 | Force / Hierarchy / Clusters layout |
| P | Toggle path-trace mode |
| T | Toggle light / dark theme |
| Esc | Deselect / exit path mode |
| ? | This help |
Deep links
Selecting a node updates the URL (#node=reel) so you can share a link straight to any screen in the graph.