[docs: autonomous-visual-synthesis] Added Mermaid diagrams to represent workflow steps and folder structures

architectures/event-sourcing/folder-structure.md

@@ -29,3 +29,36 @@ src/
 └── 📁 infrastructure/      # Event Store bindings, Repositories, Message Bus
     └── EventStoreRepository.ts
 ```
+
+```mermaid
+classDiagram
+    class commands {
+        +CreateOrderCommand
+    }
+    class events {
+        +OrderCreatedEvent
+    }
+    class aggregates {
+        +OrderAggregate
+    }
+    class projections {
+        +OrderReadModelProjector
+    }
+    class infrastructure {
+        +EventStoreRepository
+    }
+
+    commands ..> aggregates : Intentions
+    aggregates ..> events : Emits
+    events ..> projections : Updates Read Model
+    aggregates ..> infrastructure : Stored in Event Store
+
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+
+    class commands:::default
+    class events:::default
+    class aggregates:::component
+    class projections:::component
+    class infrastructure:::default
+```

architectures/micro-frontends/folder-structure.md

@@ -44,7 +44,32 @@ workspace/
 │   └── event-bus/ (Agnostic communication contract types)
 ```
 
+```mermaid
+classDiagram
+    class workspace {
+        +apps
+        +packages
+    }
+    class apps {
+        +app_shell
+        +mfe_catalog
+        +mfe_checkout
+    }
+    class packages {
+        +design_system
+        +event_bus
+    }
 
+    workspace *-- apps
+    workspace *-- packages
+
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+
+    class workspace:::default
+    class apps:::component
+    class packages:::component
+```
 
 ### Structural Comparison: Monorepo vs Polyrepo for MFEs
 

architectures/space-based-architecture/folder-structure.md

@@ -46,3 +46,41 @@ src/
 - **processing-units:** The core. Contains business logic. Interacts only with the `data-grid` layer.
 - **data-grid:** Defines how data is structured and cached in memory.
 - **data-pumps:** Contains asynchronous workers that take data from the grid and flush it to the permanent database.
+
+```mermaid
+classDiagram
+    class api_gateway {
+        +routes
+        +middleware
+    }
+    class middleware {
+        +load_balancer
+        +data_router
+    }
+    class processing_units {
+        +auth_unit
+        +catalog_unit
+    }
+    class data_grid {
+        +schemas
+        +config
+    }
+    class data_pumps {
+        +writers
+        +recovery
+    }
+
+    api_gateway ..> middleware : Routes traffic
+    middleware ..> processing_units : Distributes load
+    processing_units ..> data_grid : Reads/Writes
+    data_grid ..> data_pumps : Data stream
+
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+
+    class api_gateway:::default
+    class middleware:::default
+    class processing_units:::component
+    class data_grid:::component
+    class data_pumps:::default
+```

docs/windsurf-vibe-coding-hints.md

@@ -54,6 +54,17 @@ To make Windsurf AI agents generate perfect code, follow these simple rules for
 1. **Be Specific:** Tell the AI agent exactly which file to change. For example, say "Update the button component in `src/button.tsx`" instead of "Change the button".
 2. **Use Clear English:** Write your prompts in simple, direct language. Avoid using complex phrasing.
 3. **Limit the Context Window:** Close unnecessary files to keep the context window small and avoid reaching memory limits.
+
+```mermaid
+graph LR
+    Step1["Be Specific"] --> Step2["Use Clear English"]
+    Step2 --> Step3["Limit Context Window"]
+
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    class Step1,Step2,Step3 component;
+```
+
 ## ✅ 5. Actionable Checklist for Windsurf Vibe Coding Success
 
 Follow these steps every time you start a new vibe coding session with Windsurf: