Skip to content

Visual Architecture Diagrams

Snippbot’s architecture is layered, event-driven, and wrapped in a seven-layer security envelope. The diagrams below let you explore that structure interactively — hover layers to see subcomponents, click components for details, toggle between simple and detailed views.

Each diagram is a standalone interactive page. Click the card to open it in a new tab.

System Architecture

The full layered architecture — seven layers inside the Security Envelope, plus the Singularity Marketplace Portal. Hover any layer to expand subcomponents; hover each subcomponent for a detail popover.

Open architecture diagram →

Process Flow

How a request moves through the system — User → Interaction → Agent Cognitive → Tool Execution → Models → Reply, with Memory, Data, Orchestration, and Marketplace branches. Toggle between Simple and Detailed views.

Open process flow →

Singularity Marketplace

The marketplace treated as its own system — Portal, Discovery, Vetting, Registry, Identity, Transactions, Governance, and Delivery layers. Each layer expands to show subcomponents.

Open marketplace architecture →

Walkthrough Teleprompter

The recording teleprompter used to produce the Snippbot walkthrough video — narration script chapter by chapter, with reference screenshots, timers, and keyboard navigation.

Open teleprompter →

  • Click a layer header to expand and reveal its internal components.
  • Hover a component to read a short description and the key implementation details.
  • Click the × button to collapse a layer manually.
  • In the process-flow diagram, use the Simple / Detailed toggle at the top to switch density — press s or d on the keyboard as a shortcut.

These diagrams are hand-authored HTML + CSS with Mermaid 11 + ELK powering the process-flow layout. The full source lives in docs/promos/walkthrough/ in the monorepo.

Related architecture reference in this documentation: