Add Todo workflow diagram

abd3lraouf · abd3lraouf · commit fef8df06e663 · 2025-05-08T06:08:18.000+03:00
diff --git a/assets/workflow.svg b/assets/workflow.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .stage {
+        fill: #f0f0f0;
+        stroke: #333;
+        stroke-width: 2;
+        rx: 20;
+        ry: 20;
+      }
+      .todo {
+        fill: #ffecb3;
+        stroke: #ffa000;
+      }
+      .progress {
+        fill: #b3e5fc;
+        stroke: #0288d1;
+      }
+      .done {
+        fill: #c8e6c9;
+        stroke: #43a047;
+      }
+      .arrow {
+        stroke: #333;
+        stroke-width: 2;
+        fill: none;
+        marker-end: url(#arrowhead);
+      }
+      .text {
+        font-family: Arial, sans-serif;
+        font-size: 16px;
+        text-anchor: middle;
+        dominant-baseline: middle;
+      }
+      .action {
+        font-family: Arial, sans-serif;
+        font-size: 12px;
+        fill: #666;
+        text-anchor: middle;
+      }
+      .title {
+        font-family: Arial, sans-serif;
+        font-size: 20px;
+        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>
+  
+  <text x="400" y="40" class="title">Todo App Workflow</text>
+  
+  <!-- Todo Stage -->
+  <rect x="100" y="120" width="150" height="80" class="stage todo" />
+  <text x="175" y="160" class="text">Todo</text>
+  <text x="175" y="180" class="action">(Play Button)</text>
+  
+  <!-- In Progress Stage -->
+  <rect x="325" y="120" width="150" height="80" class="stage progress" />
+  <text x="400" y="160" class="text">In Progress</text>
+  <text x="400" y="180" class="action">(Checkbox)</text>
+  
+  <!-- Done Stage -->
+  <rect x="550" y="120" width="150" height="80" class="stage done" />
+  <text x="625" y="160" class="text">Done</text>
+  <text x="625" y="180" class="action">(Checked Checkbox)</text>
+  
+  <!-- Forward Arrows -->
+  <path d="M250 160 L325 160" class="arrow" />
+  <text x="287" y="145" class="action">Click Play</text>
+  
+  <path d="M475 160 L550 160" class="arrow" />
+  <text x="512" y="145" class="action">Check Box</text>
+  
+  <!-- Back Arrow -->
+  <path d="M550 200 C 400 250, 300 250, 250 200" class="arrow" />
+  <text x="400" y="240" class="action">Uncheck Box</text>
+</svg>
