chore: Add architecture diagram. (#2783)

* chore: Add architecture diagram.

Signed-off-by: ifuryst <ifuryst@gmail.com>

* Fix syntax error.

Signed-off-by: ifuryst <ifuryst@gmail.com>

---------

Signed-off-by: ifuryst <ifuryst@gmail.com>

docs/modules/usage/architecture.mdx

@@ -4,8 +4,15 @@ sidebar_position: 4
 
 # 🏛️ System Architecture Overview
 
+<div style={{ textAlign: 'center' }}>
+  <img src="https://github.com/OpenDevin/OpenDevin/assets/16201837/97d747e3-29d8-4ccb-8d34-6ad1adb17f38" alt="OpenDevin System Architecture Diagram Jul 4 2024" />
+  <p><em>OpenDevin System Architecture Diagram (July 4, 2024)</em></p>
+</div>
+
 This is a high-level overview of the system architecture. The system is divided into two main components: the frontend and the backend. The frontend is responsible for handling user interactions and displaying the results. The backend is responsible for handling the business logic and executing the agents.
 
+# Frontend Architecture {#frontend-architecture-en}
+
 ![system_architecture.svg](/img/system_architecture.svg)
 
 This Overview is simplified to show the main components and their interactions. For a more detailed view of the backend architecture, see the Backend Architecture section below.

opendevin/README.md

@@ -2,6 +2,13 @@
 
 This directory contains the core components of OpenDevin.
 
+This diagram provides an overview of the roles of each component and how they communicate and collaborate.
+
+<div style="text-align: center;">
+  <img src="https://github.com/OpenDevin/OpenDevin/assets/16201837/97d747e3-29d8-4ccb-8d34-6ad1adb17f38" alt="OpenDevin System Architecture Diagram Jul 4 2024" />
+  <p><em>OpenDevin System Architecture Diagram (July 4, 2024)</em></p>
+</div>
+
 ## Classes
 The key classes in OpenDevin are: