Add architecture diagram

abd3lraouf · abd3lraouf · commit 1e1dced88756 · 2025-05-08T06:07:34.000+03:00
diff --git a/assets/architecture.svg b/assets/architecture.svg
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .box {
+        fill: #f0f0f0;
+        stroke: #333;
+        stroke-width: 2;
+        rx: 10;
+        ry: 10;
+      }
+      .component {
+        fill: #b3e5fc;
+        stroke: #0288d1;
+      }
+      .state {
+        fill: #c8e6c9;
+        stroke: #43a047;
+      }
+      .ui {
+        fill: #ffecb3;
+        stroke: #ffa000;
+      }
+      .arrow {
+        stroke: #333;
+        stroke-width: 2;
+        fill: none;
+        marker-end: url(#arrowhead);
+      }
+      .text {
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+        text-anchor: middle;
+      }
+      .title {
+        font-family: Arial, sans-serif;
+        font-size: 18px;
+        font-weight: bold;
+        text-anchor: middle;
+      }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#333" />
+    </marker>
+  </defs>
+  
+  <rect x="50" y="50" width="700" height="400" class="box" fill="#ffffff" />
+  
+  <text x="400" y="80" class="title">Decompose Architecture</text>
+  
+  <!-- Root Component -->
+  <rect x="150" y="120" width="500" height="80" class="box component" />
+  <text x="400" y="160" class="text">Root Component</text>
+  
+  <!-- Child Components -->
+  <rect x="150" y="240" width="230" height="80" class="box component" />
+  <text x="265" y="280" class="text">Todo List Component</text>
+  
+  <rect x="420" y="240" width="230" height="80" class="box component" />
+  <text x="535" y="280" class="text">Todo Detail Component</text>
+  
+  <!-- State -->
+  <rect x="150" y="360" width="230" height="60" class="box state" />
+  <text x="265" y="390" class="text">Component State</text>
+  
+  <rect x="420" y="360" width="230" height="60" class="box ui" />
+  <text x="535" y="390" class="text">Compose UI</text>
+  
+  <!-- Arrows -->
+  <path d="M400 200 L400 240" class="arrow" />
+  <path d="M265 320 L265 360" class="arrow" />
+  <path d="M535 320 L535 360" class="arrow" />
+  
+  <!-- Legend -->
+  <rect x="620" y="400" width="20" height="15" class="box component" />
+  <text x="670" y="412" class="text" text-anchor="start">Component</text>
+  
+  <rect x="620" y="420" width="20" height="15" class="box state" />
+  <text x="670" y="432" class="text" text-anchor="start">State</text>
+  
+  <rect x="620" y="440" width="20" height="15" class="box ui" />
+  <text x="670" y="452" class="text" text-anchor="start">UI</text>
+</svg>
