Improves implementation documentation.

README.md

@@ -2,11 +2,13 @@
 
 [![](https://img.shields.io/twitter/follow/hediet_dev.svg?style=social)](https://twitter.com/intent/follow?screen_name=hediet_dev)
 
-See the [extension](extension) directory for the extension readme.
+See [here](./extension/README.md) for the readme of the extension.
 You can get the extension in the [marketplace](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer).
 
 ![](./docs/doubly-linked-list-reverse-demo.gif)
 
+This readme extends the [readme](./extension/README.md) of the extension with implementation details.
+
 ## Build Instructions
 
 -   Clone the repository
@@ -15,19 +17,43 @@ You can get the extension in the [marketplace](https://marketplace.visualstudio.
 
 ## Dev Instructions
 
-This project uses yarn workspaces.
+This project uses yarn workspaces and consists of the sub-projects _data-extraction_, _extension_ and _webview_.
+To setup a dev environment, follow these steps:
 
 -   Clone the repository
 -   Run `yarn` in the repository root
--   Run `yarn build` initially (or `yarn dev` for every project)
--   Run `yarn dev` for the project you are working on.
+-   Run `yarn build` initially (or `yarn dev` for every sub-project)
+-   Run `yarn dev` for the sub-project (i.e. in its folder) you are working on.
 
-For the UI, `yarn dev` will start a webserver that you can access on port 8080.
-You can use VS Code do launch and debug the extension.
-Chose `Run Extension (Dev UI)` as debug configuration so that the extension loads the UI from the webpack server.
+For the _webview_ project, `yarn dev` will serve the react application on port 8080.
+Certain query parameters need to be so that the UI can connect to the debug visualizer extension.
+
+You can use VS Code to launch and debug the extension.
+Chose the preconfigured `Run Extension (Dev UI)` as debug configuration
+so that the extension loads the UI from the webpack server.
+Otherwise, the extension will start a webserver on its own, hosting the `dist` folder of the _webview_ project.
 
 ## Publish Instructions
 
 -   Follow the Build Instructions
 -   `cd extension`
 -   `yarn pub`
+
+## Architecture
+
+![](./docs/exported/main/Main.png)
+
+### webview
+
+Provides the UI and is hosted inside a webview in VS Code.
+
+### extension
+
+Creates the webview in VS Code, hosts a webserver and a websocket server.
+The webserver serves the _webview_ project that is loaded by the webview.
+After the webview is loaded, it connects to the websocket server.
+The websocket server is used to evaluate expressions and is secured by a random token.
+
+### data-extraction
+
+Provides types and a JS runtime for data extraction.

docs/main.plantuml

@@ -1,12 +1,14 @@
 @startuml Main
 
 [data-extraction] 
-[debug-visualizer-webview]
-[debug-visualizer]
+[webview]
+[extension]
 
-[debug-visualizer-webview] ..> [debug-visualizer]: "Uses RPC contracts, connects using websockets"
-[debug-visualizer] ..> [debug-visualizer-webview]: "Opens Webview in VS Code"
+[webview] ..> [extension]: "Uses RPC contracts, connects using websockets"
+[extension] ..> [webview]: "Loads into a Webview in VS Code"
 
-[debug-visualizer] ..> [data-extraction]: "Injects Runtime into JavaScript applications"
+[extension] ..> [data-extraction]: "Injects Runtime into JavaScript applications"
+
+[webview] ..> [data-extraction]: "Uses common types"
 
 @enduml

webview/package.json

@@ -25,7 +25,8 @@
 		"vis-network": "^7.3.6",
 		"vis-data": "^6.4.1",
 		"react-plotly.js": "^2.4.0",
-		"plotly.js": "^1.52.2"
+		"plotly.js": "^1.52.2",
+		"@hediet/debug-visualizer-data-extraction": "*"
 	},
 	"devDependencies": {
 		"@types/plotly.js": "1.44.28",