docs: added WIP mermaid architecture diagram

README.md

@@ -7,7 +7,6 @@
 </p>
 
 <p align="center">
-
   <a href="https://twitter.com/ActivityWatchIt">
     <img title="Twitter follow" src="https://img.shields.io/twitter/follow/ActivityWatchIt.svg?style=social&label=Follow"/>
   </a>
@@ -33,7 +32,6 @@
 </p>
 
 <p align="center">
-
   <a href="https://github.com/ActivityWatch/activitywatch/actions?query=branch%3Amaster">
     <img title="Build Status GitHub" src="https://github.com/ActivityWatch/activitywatch/workflows/Build/badge.svg?branch=master" />
   </a>
@@ -181,6 +179,28 @@ We have a plan to address all of these and we're well on our way. See the table
 For a complete list of the things ActivityWatch can track, [see the page on *watchers* in the documentation](https://docs.activitywatch.net/en/latest/watchers.html).
 
 
+## Architectore
+
+```mermaid
+graph TD;
+   W[Watchers] -- Capture and send events --> S[Server];
+   S --> aw-sync --> SF[Sync folder];
+   SF --> aw-sync --> S;
+   UI[Web UI] -- Fetches data --> S;
+
+classDef lightMode fill:#FFFFFF, stroke:#333333, color:#333333;
+classDef darkMode fill:#333333, stroke:#FFFFFF, color:#FFFFFF;
+
+classDef lightModeLinks stroke:#333333;
+classDef darkModeLinks stroke:#FFFFFF;
+
+class A,B,C,D,E,G lightMode;
+class A,B,C,D,E,G darkMode;
+
+linkStyle 0 stroke:#FF4136, stroke-width:2px;
+linkStyle 1 stroke:#1ABC9C, stroke-width:2px;
+```
+
 ## About this repository
 
 This repo is a bundle of the core components and official modules of ActivityWatch (managed with `git submodule`). Its primary use is as a meta-package providing all the components in one repo; enabling easier packaging and installation. It is also where releases of the full suite are published (see [releases](https://github.com/ActivityWatch/activitywatch/releases)).