Companion diagrams for lab-github-basics-to-advanced.md. All diagrams use Mermaid and render automatically on GitHub, VS Code (with the Mermaid extension), and most Markdown viewers.
flowchart LR
subgraph LOCAL["💻 Your Computer (Git)"]
WD["Working Directory<br/>(your files)"]
SA["Staging Area<br/>(index)"]
LR["Local Repository<br/>(.git)"]
end
subgraph CLOUD["☁️ GitHub (Remote)"]
RR["Remote Repository<br/>(origin)"]
end
WD -- "git add" --> SA
SA -- "git commit" --> LR
LR -- "git push" --> RR
RR -- "git pull / fetch" --> LR
style LOCAL fill:#e8f4ff,stroke:#0969da
style CLOUD fill:#f0fff4,stroke:#2da44e
Git runs locally; GitHub stores and shares your repository in the cloud.
flowchart TD
A([Start]) --> M1["1 Open GitHub Account"]
M1 --> M2["2 Install & Configure Git"]
M2 --> M3["3 git add + git commit ⭐"]
M3 --> M4["4 git push to GitHub"]
M4 --> M5["5 Branch, Merge & Tree"]
M5 --> M6["6 Pull Requests & Forks"]
M6 --> M7["7 Rebase, Stash, Tags, Undo"]
M7 --> M8["8 GitHub Issues"]
M8 --> M9["9 GitHub Actions (CI/CD)"]
M9 --> F([🎯 Final Project])
style M3 fill:#fff3cd,stroke:#d4a017,stroke-width:3px
style F fill:#d1f7c4,stroke:#2da44e,stroke-width:2px
sequenceDiagram
participant You as 👤 You
participant WD as Working Dir
participant Stage as Staging Area
participant Repo as Local Repo
participant GH as ☁️ GitHub
You->>WD: edit README.md
Note over WD: file is "modified" (red)
You->>Stage: git add README.md
Note over Stage: file is "staged" (green)
You->>Repo: git commit -m "msg"
Note over Repo: snapshot saved 📸
You->>GH: git push
Note over GH: visible online 🌐
stateDiagram-v2
[*] --> Untracked: new file
Untracked --> Staged: git add
Staged --> Committed: git commit
Committed --> Modified: edit file
Modified --> Staged: git add
Staged --> Modified: edit again (must re-add!)
Committed --> Pushed: git push
Pushed --> [*]
flowchart TD
A([Go to github.com]) --> B[Click 'Sign up']
B --> C[Enter email, password, username]
C --> D[Solve verification puzzle]
D --> E[Click 'Create account']
E --> F{Check email}
F -->|Enter launch code| G[Choose Free plan]
G --> H[Enable 2FA ✅]
H --> I([Account ready])
style I fill:#d1f7c4,stroke:#2da44e
style F fill:#fff3cd,stroke:#d4a017
gitGraph
commit id: "init"
commit id: "add README"
branch feature-login
checkout feature-login
commit id: "add login.py"
commit id: "style login"
checkout main
commit id: "fix typo"
merge feature-login id: "merge login"
commit id: "release"
flowchart LR
A["git switch -c feature"] --> B["edit + git add + git commit"]
B --> C["git push -u origin feature"]
C --> D["Open Pull Request"]
D --> E["Review & Merge"]
E --> F["git branch -d feature"]
style D fill:#e8f4ff,stroke:#0969da
style E fill:#f0fff4,stroke:#2da44e
sequenceDiagram
participant Dev as 👤 Developer
participant Local as 💻 Local Branch
participant Fork as ☁️ Your Repo/Fork
participant Main as 🌐 Main Repo
participant Rev as 👀 Reviewer
Dev->>Local: create branch + commit
Local->>Fork: git push
Fork->>Main: Open Pull Request
Main->>Rev: request review
Rev-->>Main: 💬 comments / approve
Dev->>Fork: push fixes (PR updates)
Rev->>Main: ✅ Approve
Main->>Main: Merge PR 🎉
flowchart LR
UP["🌐 upstream<br/>(original repo)"] -->|Fork| FK["☁️ origin<br/>(your fork)"]
FK -->|git clone| LOCAL["💻 local copy"]
LOCAL -->|add, commit| LOCAL
LOCAL -->|git push| FK
FK -->|Pull Request| UP
UP -.->|git pull upstream main| LOCAL
style UP fill:#f0fff4,stroke:#2da44e
style FK fill:#e8f4ff,stroke:#0969da
flowchart TD
subgraph MERGE["🔀 git merge — preserves history"]
direction LR
M1["main: A - B - C"]
M2["feature: D - E"]
M3["result: A-B-C---M<br/> \D-E/<br/>(extra merge commit)"]
end
subgraph REBASE["📐 git rebase — linear history"]
direction LR
R1["main: A - B - C"]
R2["feature: D - E"]
R3["result: A-B-C-D'-E'<br/>(replayed, no merge commit)"]
end
style MERGE fill:#e8f4ff,stroke:#0969da
style REBASE fill:#fff3cd,stroke:#d4a017
⚠️ Golden rule: never rebase commits already pushed and shared with others.
flowchart LR
A["👤 git push /<br/>open PR"] --> B{{"⚡ Event triggers<br/>workflow"}}
B --> C["🖥️ Runner spins up<br/>(ubuntu-latest)"]
C --> D["📥 Checkout code"]
D --> E["🔧 Setup environment"]
E --> F["🧪 Run tests"]
F --> G{Pass?}
G -->|✅ Yes| H["Green check —<br/>safe to merge"]
G -->|❌ No| I["Red X —<br/>read logs, fix"]
I --> A
style G fill:#fff3cd,stroke:#d4a017
style H fill:#d1f7c4,stroke:#2da44e
style I fill:#ffd6d6,stroke:#cf222e
flowchart TD
WF["📄 Workflow<br/>(.github/workflows/ci.yml)"] --> EV["⚡ on: push / pull_request"]
WF --> JOB["💼 job: build"]
JOB --> RUN["🖥️ runs-on: ubuntu-latest"]
JOB --> S1["Step 1: checkout"]
JOB --> S2["Step 2: setup-python"]
JOB --> S3["Step 3: run tests"]
flowchart LR
I["🐛 Issue #12<br/>'Login broken'"] --> B["git switch -c fix-login"]
B --> C["fix + commit<br/>'Fix login, closes #12'"]
C --> P["Open Pull Request"]
P --> M["Merge to main"]
M --> X["🔒 Issue #12<br/>auto-closed ✅"]
style I fill:#ffd6d6,stroke:#cf222e
style X fill:#d1f7c4,stroke:#2da44e
flowchart TD
Q{What do you<br/>want to undo?} --> A["Staged a file<br/>by mistake"]
Q --> B["Bad edit,<br/>not committed"]
Q --> C["Last commit<br/>message wrong"]
Q --> D["Undo last commit<br/>keep changes"]
Q --> E["Reverse a commit<br/>already pushed"]
A --> A1["git restore --staged file"]
B --> B1["git restore file"]
C --> C1["git commit --amend"]
D --> D1["git reset --soft HEAD~1"]
E --> E1["git revert hash ✅ safe"]
style E1 fill:#d1f7c4,stroke:#2da44e
| Where | What to do |
|---|---|
| GitHub | Push this file — diagrams render automatically in the web view |
| VS Code | Install the Markdown Preview Mermaid Support extension, then Ctrl/Cmd+Shift+V |
| Live editor | Paste any block into https://mermaid.live to edit/export as PNG/SVG |
| Slides | Export from mermaid.live as SVG/PNG and drop into your deck |
💡 Tip for instructors: project these flows during the live demo, then have students replicate the commands underneath each diagram.