Mermaid GitGraph

Mermaid GitGraphs (gitGraph) are specialized timeline diagrams that visualize Git repositories, branching strategies, commit history, and merge actions directly using text instructions.

Core Git Operations (Commands)

A GitGraph block initializes with the gitGraph: declaration. Inside the block, you instruct the graph sequentially using standard Git syntax:

gitGraph
    commit
    branch <branch-name>
    checkout <branch-name>
    commit
    checkout main
    merge <branch-name>

• commit : Adds a commit block to the current active branch.
• branch name : Creates a new branch off the current branch and switches to it.
• checkout name : Switches the active context to an existing branch.
• merge name : Merges an existing branch into the current active branch.
• cherry-pick id: "id" : Copies a specific commit from another branch onto the current branch.

Basic GitGraph

gitGraph
    commit id: "Init"

    branch feature-auth
    checkout feature-auth

    commit id: "Add JWT"
    commit id: "Fix Login"

    checkout main
    commit id: "Hotfix"

    merge feature-auth
    commit tag: "v1.0.0"

Try this code ❯

Customizing Commits with Arguments

You can pass structural arguments to the commit keyword using key-value pairs inside parenthesis:

• id: "string" : Overrides the default auto-generated hash with a custom commit name.
• tag: "v1.0" : Attaches a clear visual tag marker to the commit node.
• type: TYPE : Changes the visual style of the node. Options include:
  • NORMAL : Standard circular node (Default).
  • REVERSE : Alternated visual node to indicate a revert.
  • HIGHLIGHT : Highlighted square node to emphasize an important change.

Mermaid gitGraph is used to create Git branch and commit diagrams. Here are some simple examples.

1. Basic Git Graph

gitGraph
    commit
    commit
    commit

Try this code ❯

2. Create a Branch

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    commit

Try this code ❯

3. Merge a Branch

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    commit
    merge feature

Try this code ❯

4. Feature Development

gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add login"
    commit id: "Add validation"
    checkout main
    commit id: "Update README"
    merge feature id: "Merge feature"

Try this code ❯

5. Branch with Tags

gitGraph
    commit tag: "v1.0"
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop tag: "v2.0"

Try this code ❯

You can also use cherry-pick, revert, commit IDs, tags, and different commit types such as NORMAL, REVERSE, and HIGHLIGHT.