---
id: "{{ID}}"
title: "{{TITLE}}"
type: "GRAPHIC_ORGANIZER"
created_by: "Curriculum OS Builder"
phase: "{{PHASE}}"
deliverable: "P3-T18"
version: "{{VERSION}}"
date: "{{DATE}}"
template_contract: "artifact-template-v1"
template_required_sections:
  - "Visual Paradigm Overview"
  - "Organizer 1: Architectural Data Flow (Mermaid Flowchart)"
  - "Organizer 2: Comparative Analysis (Venn Diagram / Matrix)"
  - "Organizer 3: State Machine & Lifecycle (State Diagram)"
  - "Student Fill-in Worksheet Format (Offline Handout)"
---
<!-- INJECT_BODY -->

# VISUAL GRAPHIC ORGANIZERS: [LESSON / UNIT TITLE]
_Unit: U[X] | Module: M[X.X] | Format: Mermaid Markdown Diagrams + Fill-in Printable Worksheets_

## Visual Paradigm Overview
- **Cognitive Purpose:** Unload mental processing burden through spatial diagramming and dual-coding theory (Paivio).
- **Output Formats:** Interactive Mermaid.js rendered diagrams + Printable student fill-in worksheets.

---

## Organizer 1: Architectural Data Flow (Mermaid Flowchart)

```mermaid
graph TD
    classDef input fill:#1e3a8a,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef state fill:#78350f,stroke:#f59e0b,stroke-width:2px,color:#fff;
    classDef engine fill:#14532d,stroke:#22c55e,stroke-width:2px,color:#fff;
    classDef view fill:#4c1d95,stroke:#a855f7,stroke-width:2px,color:#fff;

    A[User Gesture / Tap]:::input -->|Triggers Action Closure| B[Mutate @State Variable]:::state
    B -->|Emits State Invalidation| C[SwiftUI Dependency Graph]:::engine
    C -->|Executes Diffing Algorithm| D[Compute Minimal View Hierarchy]:::engine
    D -->|Calls body getter| E[Render Updated UI Component]:::view

    subgraph "Hardware & Runtime"
        C
        D
    end
```

---

## Organizer 2: Comparative Analysis (Venn Diagram / Matrix)

```mermaid
graph LR
    subgraph "Imperative (UIKit / Legacy)"
        I1["Manual View Hierarchy Updates"]
        I2["State stored in View objects"]
        I3["Frequent Sync Bugs & Memory Leaks"]
    end

    subgraph "Shared Core Fundamentals"
        S1["Event Loop Driven"]
        S2["Underlying CoreAnimation Rendering"]
    end

    subgraph "Declarative (SwiftUI / Modern)"
        D1["State-Driven Automatic Diffing"]
        D2["Immutable Struct View Descriptors"]
        D3["Single Source of Truth Invariant"]
    end
```

---

## Organizer 3: State Machine & Lifecycle (State Diagram)

```mermaid
stateDiagram-v2
    [*] --> Idle: View Instantiated
    Idle --> Mutating: User Input Received
    Mutating --> ComputingDiff: State Wrapper Notifies Graph
    ComputingDiff --> Repainting: Node Delta Detected
    Repainting --> Idle: Frame Rendered on Display (60 FPS)
```

---

## Student Fill-in Worksheet Format (Offline Handout)
```text
┌──────────────────────────────────────────────────────────────────────────┐
│                   STUDENT DATA FLOW FILL-IN EXERCISE                     │
├──────────────────────────────────────────────────────────────────────────┤
│ [ Box 1: _____________ ] ──▶ [ Box 2: _____________ ]                    │
│           │                               │                              │
│           ▼                               ▼                              │
│ [ Box 3: _____________ ] ──▶ [ Box 4: Renders New Screen (60 FPS) ]      │
│                                                                          │
│ Word Bank: @State Mutation, User Tap, View Tree Diffing, Body Re-evaluated│
└──────────────────────────────────────────────────────────────────────────┘
```