From 43cbad1a4fefdf9e432de66dd3951650bca534a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Sat, 13 Jul 2024 16:50:00 +0200
Subject: [PATCH] docs: added mermaid-diagram for visualization of architecture
 (#1086)

* docs: added WIP mermaid architecture diagram

* docs: improvements to WIP mermaid diagram
---
 README.md | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 92ec3ff1..618ba8cc 100644
--- 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)).