Add Sequence Diagram to ARCHITECTURE.md

Closes #48

Author: swissmanu

ARCHITECTURE.md

@@ -14,7 +14,7 @@ RxJS-specific debugging reuses debugging sessions started by *Visual Studio Code
 
 ### RxJS Debugging Extension
 
-The [*RxJS Debugging Extension*](./packages/extension) integrates with *Visual Studio Codes* using its extension API and provides the relevant user interfaces and functionalities. It allows developers to use RxJS debugging features like operator log points.
+The [*RxJS Debugging Extension*](./packages/extension) integrates with *Visual Studio Code* using its extension API and provides relevant user interfaces and functionalities. It allows developers to use RxJS debugging features like operator log points.
 
 Furthermore, it ensures that, once a *js-debug* debugging session is started, essential hooks are registered in the *JavaScript VM* using [CDP Bindings](#cdp-bindings).
 
@@ -46,3 +46,11 @@ Once the *RxJS Debugging Extensions* detects a new *js-debug* debugging session,
 | `sendRxJsDebuggerTelemetry` | `string` | Sends a JSON-encoded [TelemetryEvent](./packages/telemetry/src/index.ts) to the *RxJS Debugging Extension*. |
 
 Both the *RxJS Debugging Extension* as well as the *Debugging Runtime* use a well defined communication protocol implemented by their respective telemetry bridges.
+
+## Example System Interaction
+
+Based on [testbench-nodejs](./packages/testbench-nodejs), the following sequence diagram shows typical interactions between the presented system components.
+
+*The JavaScript VM component is omitted for clarity.* 
+
+![Example System Interaction Sequence Diagram](./docs/system-interactions-sequence-diagram.svg)

docs/system-interactions-sequence-diagram.mermaid

@@ -0,0 +1,40 @@
+sequenceDiagram
+  participant User
+	participant vscode
+	participant jsdebug as js-debug
+	participant Extension as RxJS Debugging Extension
+  participant Program as RxJS Program
+	participant Runtime as Debugging Runtime
+
+
+  User->>+vscode: Open observable.ts
+  vscode-->>User: Show observable.ts
+  vscode-->>+Extension: Opened observable.ts
+  Extension->>Extension: Recommend Operator Log Points
+  Extension->>-vscode: Update Operator Log Point Decorations
+  vscode-->>User: Show Operator Log Point Decorations
+  User->>+Extension: Enable Operator Log Point
+  Extension->>Extension: Enable Operator Log Point
+  Extension->>-vscode: Update Operator Log Point Decorations
+  vscode-->>User: Show Operator Log Point Decorations
+
+  User->>vscode: Start Debug
+  vscode->>+jsdebug: Start Debug Session
+  jsdebug->>+Extension: Will Start Debug Session
+  Extension-->>jsdebug: Customize Debug Session with Debugging Runtime
+  jsdebug->>+Program: Launch and inject Debugging Runtime
+  Runtime->>Program: Patch RxJS
+  Runtime->>Extension: Call Binding "rxJsDebuggerRuntimeReady"
+  Extension->>Runtime: updateOperatorLogPoints()
+  loop
+	  Program->>Runtime: Telemetry Data
+  	Runtime->>Extension: Telemetry Data
+	  Extension->>vscode: Update Live Log Decoration for observable.ts
+	  vscode-->>User: Show Live Log Decoration
+	end
+
+	Program-->>-jsdebug: Process exited
+	jsdebug-->>vscode: Debug Session terminated
+	jsdebug->>-Extension: Debug Session terminated
+	Extension->>-vscode: Clear Live Log Decoration
+	vscode-->>-User: Hide Live Log Decoration