[docs: autonomous-visual-synthesis] Transform text to structural visuals

docs/ai-agent-semantic-routing.md

@@ -66,6 +66,19 @@ function routeQuery(query: string) {
 }
 ```
 
+```mermaid
+flowchart TD
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+
+    Start[Incoming Query] --> Condition{"query.includes('fix bug')?"}
+    Condition -- Yes --> CodeAgent[codeAgent]
+    Condition -- No --> GeneralAgent[generalAgent]
+
+    class CodeAgent component
+    class GeneralAgent component
+```
+
 ### ⚠️ Problem
 
 Hardcoded keyword matching ignores semantic intent. It results in brittle routing logic that fails to scale with the complexity of user prompts, leading to high error rates and agent hallucinations when context is misaligned.

docs/vibe-coding-telemetry-patterns.md

@@ -24,6 +24,19 @@ When multi-agent systems interact asynchronously, standard debugging becomes obs
 2. **Context Snapshots:** Capture immutable snapshots of the agent's context window at the time of execution.
 3. **Hallucination Detection:** Implement automated bounds-checking and record semantic deviations.
 
+```mermaid
+stateDiagram-v2
+    direction LR
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+
+    IntentLogging: Intent-Based Logging
+    ContextSnapshot: Context Snapshots
+    HallucinationCheck: Hallucination Detection
+
+    IntentLogging --> ContextSnapshot
+    ContextSnapshot --> HallucinationCheck
+```
+
 > [!IMPORTANT]
 > To maintain deterministic observability, telemetry streams must strictly serialize LLM context windows to prevent parsing exceptions downstream.
 

frontend/javascript/async-logic.md

@@ -19,6 +19,14 @@ last_updated: 2026-03-22
 ## ⚡ 21. Callback Hell vs Promises
 > [!NOTE]
 > **Context:** Managing asynchronous execution flow.
+
+| Feature | Callback Hell | Promises |
+| :--- | :--- | :--- |
+| **Structure** | Deeply nested (Pyramid of Doom) | Flattened chains (`.then()`) |
+| **Error Handling** | Repetitive `if (err)` in every scope | Centralized `.catch()` block |
+| **Readability** | Low (Hard to track flow) | High (Reads sequentially) |
+| **Scalability** | Extremely difficult | Easily composable (`Promise.all`) |
+
 ### ❌ Bad Practice
 ```javascript
 getData(url, (err, res) => {