Git Interview - Diagrams

NOTE: For best experience, please use Chrome Browser!

EXAMPLE DIAGRAM #

Git Architecture #

%% Git Lifecycle Diagram with Forward and Reverse Flows
flowchart TB
    subgraph Git Lifecycle
        WD((WorkingDirectory))
        IDX((Index/StagingArea))
        LOD((LocalObjectDatabase))
        REM((RemoteObjectDatabase))
    end

    %% Forward flow
    WD -->|git add| IDX
    IDX -->|git commit| LOD
    LOD -->|git push| REM

    %% Reverse flow
    IDX -->|git restore --staged| WD
    LOD -->|git restore / git reset| IDX
    REM -->|git fetch| LOD

    classDef nodeStyle fill:#f9f9f9,stroke:#333,stroke-width:1px;
    class WD,IDX,LOD,REM nodeStyle;

Git File States #

flowchart LR


    subgraph WD[Working Directory]
        UNTRACKED(Untracked<br/>NewFile)
        MODIFIED(Modified<br/>ChangedNotStaged)
        UNMODIFIED(Unmodified<br/>NoChangesSinceLastCommit)
    end

    subgraph IDX[Index / Staging Area]
        STAGED(Staged<br/>ReadyToCommit)
    end

    subgraph CLONE[Local Object Database]
        COMMITTED(CommittedToClone)
    end

    subgraph REMOTE[Remote Object Database]
        PUSHED(PushedToRemote)
    end



    %% Flows
    UNTRACKED -->|git add| STAGED
    MODIFIED -->|git add| STAGED
    STAGED -->|git commit| COMMITTED
    COMMITTED -->|git push| PUSHED
    UNMODIFIED -->|edit| MODIFIED

Mainline Development #

gitGraph
   commit id: "Init Repo"
   checkout main
   commit id: "Initial Commit"
   commit id: "Add Feature A"
   commit id: "Add Feature B"
   commit id: "Fix Bug"
   commit id: "Release v1.0"

Feature Development #

gitGraph
   commit id: "Init Repo"
   checkout main
   commit id: "Initial Commit"
   branch feature-login
   checkout feature-login
   commit id: "Add login page"
   commit id: "Add login styles"
   checkout main
   merge feature-login id: "Merge feature-login"
   branch feature-user
   checkout feature-user
   commit id: "Add user page"
   commit id: "Add user styles"
   checkout main
   merge feature-user id: "Merge feature-user"

Feature Development #

gitGraph
   commit id: "Init Repo"
   checkout main
   commit id: "Initial Commit"
   branch feature-login
   checkout feature-login
   commit id: "Add login page"
   commit id: "Add login styles"
   checkout main
   merge feature-login id: "Merge feature-login"
   branch feature-user
   checkout feature-user
   commit id: "Add user page"
   commit id: "Add user styles"
   checkout main
   merge feature-user id: "Merge feature-user"

Gitflow #

gitGraph
   commit id: "Init Repo"
   checkout main
   commit id: "Initial Commit"
   branch develop
   checkout develop
   commit id: "Setup Project"
   branch feature-login
   checkout feature-login
   commit id: "Create login page"
   checkout develop
   merge feature-login id: "Merge login feature"
   branch feature-profile
   checkout feature-profile
   commit id: "Create profile page"
   checkout develop
   merge feature-profile id: "Merge profile feature"
   branch release/1.0
   checkout release/1.0
   commit id: "Finalize release 1.0"
   checkout main
   merge release/1.0 id: "Release v1.0"
   checkout develop
   merge release/1.0 id: "Back-merge release"