/docs/visualize provides a full-page interactive architecture diagram of the entire app, showing how pages, procedures, workflows, services, and database tables connect to each other.
Architecture overview
The diagram renders the app’s architecture as a layered graph with five node types — pages, endpoints, workflows, services, and tables. Edges connect the layers to show data flow: pages call endpoints, endpoints trigger workflows and call services, workflows call services and read/write tables, and endpoints read/write tables. Scheduled workflows and API-only endpoints (procedures not called by any page) appear as virtual nodes with dashed borders.
Architecture visualization with live page previews, layered graph, and entity sidebar
Controls
- Layout direction — switch between left-to-right and top-to-bottom
- Page view zoom — toggle page previews between desktop, tablet, and phone sizes
- Layer visibility — show or hide entire layers (pages, endpoints, workflows, services, tables)
- Show system entities — toggle framework-provided system routes and procedures
- Entity sidebar — per-node checkboxes to show/hide individual entities, with “All” and “None” shortcuts
- Click a node — opens an info panel with the node’s details (description, scopes, access pattern) and a link to its full docs page
- Double-click a node — zooms to center on that node
- Right-click context menu — zoom to node, isolate node, or view full details
Node isolation
Right-click a node and select “Isolate Node” to hide everything not connected to it, showing only that node’s dependency chain across all layers.
Node isolation showing a single page's dependency chain across all layers
Generated from
This page aggregates data from all build-time manifests —pages.json, procedures.json, db-schema.json, workflow definitions, and service metadata — to construct the architecture graph.