flowchart LR
Work["Working Directory
where you edit files"]:::workNode Stage["Staging Area
files marked for the next commit"]:::stageNode Local["Local Repository
committed history on your laptop"]:::localNode Remote["Remote (GitHub)
cloud backup"]:::remoteNode Work -->|git add| Stage Stage -->|git commit -m| Local Local -->|git push| Remote Remote -->|git pull| Local classDef workNode fill:#fff176,stroke:#333,stroke-width:2px,color:#000,font-size:16px classDef stageNode fill:#ffb74d,stroke:#333,stroke-width:2px,color:#000,font-size:16px classDef localNode fill:#42a5f5,stroke:#333,stroke-width:2px,color:#fff,font-size:16px classDef remoteNode fill:#43a047,stroke:#333,stroke-width:2px,color:#fff,font-size:16px linkStyle default stroke:#777,stroke-width:2px,font-size:14px
where you edit files"]:::workNode Stage["Staging Area
files marked for the next commit"]:::stageNode Local["Local Repository
committed history on your laptop"]:::localNode Remote["Remote (GitHub)
cloud backup"]:::remoteNode Work -->|git add| Stage Stage -->|git commit -m| Local Local -->|git push| Remote Remote -->|git pull| Local classDef workNode fill:#fff176,stroke:#333,stroke-width:2px,color:#000,font-size:16px classDef stageNode fill:#ffb74d,stroke:#333,stroke-width:2px,color:#000,font-size:16px classDef localNode fill:#42a5f5,stroke:#333,stroke-width:2px,color:#fff,font-size:16px classDef remoteNode fill:#43a047,stroke:#333,stroke-width:2px,color:#fff,font-size:16px linkStyle default stroke:#777,stroke-width:2px,font-size:14px