From 83c223d5b02ede6781650d6fd19805fc84e3faed Mon Sep 17 00:00:00 2001
From: Atman An <twinsant@gmail.com>
Date: Mon, 28 Oct 2024 09:13:14 +0800
Subject: [PATCH 1/2] Update README.md add architecture diagram.

---
 computer-use-demo/README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/computer-use-demo/README.md b/computer-use-demo/README.md
index 2b896da8..8d607bfa 100644
--- a/computer-use-demo/README.md
+++ b/computer-use-demo/README.md
@@ -27,6 +27,11 @@ Please use [this form](https://forms.gle/BT1hpBrqDPDUrCqo7) to provide feedback
 > [!IMPORTANT]
 > The components are weakly separated: the agent loop runs in the container being controlled by Claude, can only be used by one session at a time, and must be restarted or reset between sessions if necessary.
 
+## Architecture
+
+<img width="992" alt="image" src="https://github.com/user-attachments/assets/1021cbe6-027b-47c6-8439-f7caefb0a0f8">
+
+
 ## Quickstart: running the Docker container
 
 ### Anthropic API

From 835314d0430326778f10191dc811c38adb4f2581 Mon Sep 17 00:00:00 2001
From: twinsant <twinsant@gmail.com>
Date: Sat, 2 Nov 2024 16:31:39 +0800
Subject: [PATCH 2/2] Add: architecture diagram using mermaid.

---
 computer-use-demo/README.md | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/computer-use-demo/README.md b/computer-use-demo/README.md
index 8d607bfa..dbf5a901 100644
--- a/computer-use-demo/README.md
+++ b/computer-use-demo/README.md
@@ -29,7 +29,40 @@ Please use [this form](https://forms.gle/BT1hpBrqDPDUrCqo7) to provide feedback
 
 ## Architecture
 
-<img width="992" alt="image" src="https://github.com/user-attachments/assets/1021cbe6-027b-47c6-8439-f7caefb0a0f8">
+```mermaid
+architecture-beta
+    group docker(server)[Docker Ubuntu 22_04]
+    group anthropic[Anthropic]
+
+    service http_server(server)[http_server 8080] in docker
+    service noVNC(server)[noVNC 6080] in docker
+    service x11vnc(server)[x11vnc 5900] in docker
+    service Xvfb[Xvfb] in docker
+    service mutter[mutter] in docker
+    service tint2[tint2] in docker
+    service xdotool(server)[xdotool] in docker
+    service streamlit(server)[streamlit 8501] in docker
+    service claude(cloud)[Claude] in anthropic
+    junction one
+    junction two
+    junction three
+    junction four
+
+    http_server:R -- L:three
+    three:R --> L:noVNC
+    three:T -- B:four
+    four:R --> L:streamlit
+    noVNC:R --> L:x11vnc
+    streamlit:R --> L:xdotool
+    streamlit:T --> B:claude
+    x11vnc:R -- L:one
+    one:R -- L:mutter
+    one:T -- B:two
+    two:R -- L:tint2
+    tint2:T -- B:Xvfb
+    mutter:T -- B:tint2
+    xdotool:R -- L:two
+```
 
 
 ## Quickstart: running the Docker container