Skip to content
MermaidViewer
Log inOpen editor

Software diagram

Mermaid Git Graph

Visualise Git branches, commits, merges and release tags.

Try git graph in the editor Generate with AI

Basic git graph example

Basic git graph example diagram
mermaid
gitGraph
    commit id: "init"
    branch develop
    checkout develop
    commit id: "feature A"
    branch feature/login
    checkout feature/login
    commit id: "login form"
    commit id: "validation"
    checkout develop
    merge feature/login
    checkout main
    merge develop tag: "v1.0.0"
    branch hotfix
    checkout hotfix
    commit id: "fix crash"
    checkout main
    merge hotfix tag: "v1.0.1"
Open in the live editor

Mermaid git graphs draw commit history as a branching diagram. You write Git-like commands — commit, branch, checkout, merge — and get a clear picture of how work flows between branches.

They're the best way to explain a branching strategy such as GitFlow or trunk-based development in contributor guides, or to illustrate what a rebase or cherry-pick does.

When to use a git graph

  • Documenting branching strategies in CONTRIBUTING.md
  • Teaching Git concepts
  • Explaining release and hotfix processes
  • Post-mortems of merge mistakes

Git Graph syntax reference

SyntaxWhat it does
gitGraphStart a git graph (default branch is main).
commit / commit id: "x"Add a commit, optionally with a custom id.
commit type: HIGHLIGHT | REVERSESpecial commit styles.
commit tag: "v1.0"Tag a commit.
branch nameCreate a branch and switch to it.
checkout name / switch nameSwitch to an existing branch.
merge nameMerge a branch into the current branch.
cherry-pick id: "x"Cherry-pick a commit by id.

Git Graph examples

Trunk-based development

Short-lived branches merged quickly back into main.

Trunk-based development diagram
mermaid
gitGraph
    commit
    branch feat-a
    commit
    checkout main
    merge feat-a
    branch feat-b
    commit
    commit
    checkout main
    merge feat-b tag: "release"
Open in the live editor

Tips and best practices

  • Give important commits ids so they can be referenced by cherry-pick and read easily.
  • Use tags for releases to show where versions were cut.
  • Configure orientation with an init directive (gitGraph LR: or TB:) for long histories.

Generate a git graph with AI

Not sure where to start? Describe what you need and the AI git graph generator writes the Mermaid code for you. Try prompts like:

  • “GitFlow with release and hotfix branches”
  • “Feature branch with rebase onto main”
  • “Monorepo release train”

Git Graph templates

GitFlow Branching Strategy

Git graph showing GitFlow with main, develop, feature, release and hotfix branches and version tags.

Git Graph FAQ

Can Mermaid git graphs show cherry-picks?

Yes. Give the source commit an id and use cherry-pick id: "that-id" on the target branch.

How do I rename the main branch?

Set mainBranchName in the gitGraph configuration through an init directive, for example %%{init: {'gitGraph': {'mainBranchName': 'trunk'}}}%%.