Leverage Mermaid for Real-Time Git Graph Rendering

Khuyen Tran

The Git graph helps developers visualize and understand the flow of Git operations, making it easier to discuss and share Git branching strategies.

Mermaid enables real-time rendering of the Git graph through commands like merge, checkout, branch, and commit.

Example:

gitGraph
    commit
    commit
    branch feat-1
    commit
    commit
    checkout main
    branch feat-2
    commit
    commit
    merge feat-1

In this example, we start by creating two commits on the main branch. We then create a new branch feat-1 and make two commits on it. Next, we switch back to the main branch and create a new branch feat-2, making two commits on it. Finally, we merge the feat-1 branch into main.

The resulting graph shows the flow of these operations, with each branch and commit represented by a node. The merge command creates a new node that combines the changes from both branches.