Skip to main content

Architecture Visualization

Appgrammar includes an interactive architecture viewer built with React Flow that renders the module graph of an appgrammar. The viewer supports 3 zoom levels that let you navigate from a high-level ecosystem view down to individual steps within a module.

The Architecture Tab​

On any appgrammar detail page in the registry, the Architecture tab displays the module graph. This is the same graph generated during Step 1 of the creation pipeline (or extracted during decompilation). It shows:

  • Every module in the appgrammar (authentication, database, API, UI, etc.)
  • Dependencies between modules (which modules depend on which)
  • Step counts per module
  • Lineage edges connecting forked or bred appgrammars

The 3 Zoom Levels​

The viewer uses a breadcrumb-based navigation system. Double-click a node to zoom in; use the breadcrumb bar to zoom out.

Level 1: Ecosystem​

The top-level view shows appgrammars as nodes in a graph. Each node represents a complete appgrammar, and edges show relationships: forks, breeds, and custom connections. This level is useful when viewing an appgrammar alongside its lineage -- parent appgrammars, child forks, and breed partners.

Nodes display the appgrammar name, star count, module/step counts, success rate, and a module composition bar. In edit mode, nodes can be dragged to rearrange the layout (positions save automatically), new nodes can be added via the + button, nodes can be removed via the delete button, and edges can be created by dragging between connection handles.

Level 2: Architecture (Module Graph)​

Double-click an ecosystem node to zoom into its module graph. This level shows the internal structure of a single appgrammar:

  • Module nodes display the module name, step count, and technology tags
  • Dependency edges show which modules depend on which, with typed edges (data flow, imports, API calls)
  • Layout is computed using the ELK algorithm for optimal automatic positioning

This is the most commonly used view. It answers "what does this appgrammar build and how are the pieces connected?"

Level 3: Module (Step Swimlanes)​

Double-click a module node to zoom into its steps. This level shows the individual build steps within a module, arranged in swimlanes:

  • Steps are ordered sequentially within their parallel group
  • Each step shows its type (cf for create file, cmd for run command, etc.) and file path
  • Dependencies between steps are visible as connecting edges

This view answers "what exactly happens when this module is built?"

Controls​

The viewer provides several controls:

  • Breadcrumb bar -- shows your current position in the zoom hierarchy (Ecosystem > Appgrammar Name > Module Name) with clickable segments for navigation
  • Fit View -- recenters and rescales the graph to fit all nodes in the viewport
  • Edit Mode -- toggle via the Edit button in the page header (ecosystem level only). Enables dragging nodes to rearrange the layout, adding/removing nodes, and creating/deleting edges. See Architecture Editor for full details.
  • Level badge -- shows the current zoom level (L1, L2, L3) in the toolbar
  • MiniMap -- a small overview in the corner showing your current viewport position
  • Zoom/Pan -- standard scroll-to-zoom and drag-to-pan controls

Embedded View​

The architecture viewer can also appear as a compact, embedded component on other pages (e.g., the dashboard). The embedded version is 400px tall, hides the minimap and controls, and includes an "Open full view" link to the dedicated architecture page.

What the Graph Reveals​

The module graph is the structural description stored alongside every appgrammar. It encodes:

  • Module names and IDs -- the logical building blocks
  • Dependency edges -- which modules must be built before others
  • Step list -- the ordered list of steps within each module
  • Technology metadata -- frameworks, libraries, and patterns used by each module

This same data powers the discovery features: the similar endpoint matches on structural overlap, and topological_search matches appgrammars by graph shape regardless of naming conventions.