update readme with design diagram

Author: zendive

README.md

@@ -8,10 +8,10 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
   <summary> <strong>Screenshots</strong> </summary>
 
 - Comparing two objects
-  ![screenshot](./src/img/screenshot-01.png)
+  ![screenshot](./doc/screenshot-01.png)
 
 - Tracking changes in localStorage (unchanged are hidden)
-  ![screenshot](./src/img/screenshot-02.png)
+  ![screenshot](./doc/screenshot-02.png)
 
 </details>
 
@@ -115,12 +115,7 @@ Historically, left side represents the old state and right side the new state.
 
 ### How it works
 
-- `manifest.json` injects content scripts to each visited site (except for chrome web store site and google-protected alike):
-  - `jsdiff-console.ts` as [MAIN](https://developer.chrome.com/docs/extensions/reference/scripting/#type-ExecutionWorld) world (has access to the target site memory)
-    - sends messages to `jsdiff-proxy.ts`.
-  - `jsdiff-proxy.ts` as `ISOLATED` world (has access to the chrome runtime)
-    - stores data from `jsdiff-console.ts` in `chrome.storage.local` and sends runtime messages to `panel.vue`.
-- `jsdiff-devtools.ts` registers `panel.vue` as a JSDiff devtools panel that reads current state of `chorme.storage.local` and listens to incomming `chrome.runtime` mesages from `jsdiff-proxy.ts`.
+![screenshot](./doc/design.png)
 
 ### How to build
 

doc/design.plantuml

@@ -0,0 +1,63 @@
+@startuml Design
+skinparam style strictuml
+
+box "User's Window Context"
+actor "User's\nDevTools" as User
+participant Console [
+  =Console
+  ----
+  content script
+  MAIN world
+]
+end box
+box "Chrome Runtime Context"
+participant Proxy [
+  =Proxy
+  ----
+  content script
+  ISOLATED world
+]
+database Storage
+participant Panel [
+  =JSDiff Panel
+  ----
+  DevTools View
+]
+end box
+
+[-> User: Open Devtools
+=== Invoke API ==
+
+User -> Console: console.diff(...)
+
+activate Console
+Console -> Proxy: jsdiff-console-to-proxy-inprogress
+activate Proxy
+  Proxy -> Panel: jsdiff-proxy-to-panel-inprogress
+deactivate Proxy
+Console o->o Console: clone arguments
+Console -> Proxy: jsdiff-console-to-proxy-compare
+deactivate Console
+
+activate Proxy
+Proxy o<->o Proxy: arrange payload
+Proxy -> Storage: write payload
+Proxy --> Panel: jsdiff-proxy-to-panel-error
+Proxy -> Panel: jsdiff-proxy-to-panel-compare
+deactivate Proxy
+
+activate Panel
+Storage -> Panel: read payload
+Panel -> Panel: Compare objects
+Panel ->o]: Display result
+deactivate Panel
+
+=== Search in DevTools Panel ==
+[-> User: ctrl+F\ncmd+F
+User -> Panel: jsdiff-devtools-to-panel-search
+activate Panel
+Panel -> Panel: search in DOM
+Panel ->o]: Display result
+deactivate Panel
+
+@enduml