docs: added mermaid-diagram for visualization of architecture (#1086)

ErikBjare · web-flow · commit 43cbad1a4fef · 2024-07-13T16:50:00.000+02:00
* docs: added WIP mermaid architecture diagram

* docs: improvements to WIP mermaid diagram
diff --git a/README.md b/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,36 @@ 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).
 
 
+## Architecture
+
+```mermaid
+graph TD;
+   aw-qt -- Manages --> S;
+   aw-qt -- Manages --> aw-notify -- Queries --> S;
+   aw-qt -- Manages --> W1[aw-watcher-window] -- Watches --> S1[Active window] -- Heartbeats --> S[aw-server];
+   aw-qt -- Manages --> W2[aw-watcher-afk] -- Watches --> S2[AFK status] -- Heartbeats --> S[aw-server];
+   Browser -- Manages --> aw-watcher-web -- Watches --> S3[Active tab] -- Heartbeats --> S;
+   SF -- Dropbox/Syncthing/etc --> SF;
+   S <-- aw-sync --> SF[Sync folder];
+   S -- Serves --> UI[aw-webui];
+
+   %% User -- Interacts --> UI;
+   %% User -- Observes --> aw-notify;
+   %% User -- Interacts --> aw-qt;
+
+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)).
