Mermaid Git Graph Maker
Write Git graphs in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.
Updated · Code editor with live preview
Git graph example
Rendering preview…
gitGraph
commit id: "Initial commit"
branch develop
checkout develop
commit id: "Add login"
branch feature/billing
commit id: "Add checkout"
checkout develop
merge feature/billing
checkout main
merge develop tag: "v1.0"What is a Git graph?
A Git graph is a diagram of commits, branches and merges drawn as a set of connected dots along parallel lines. Each dot is a commit, each line is a branch, and merges join the lines back together. In Mermaid you describe the history as a list of commands that starts with the gitGraph keyword.
When to use a Git graph
- Documenting a branching strategy such as Git Flow or trunk-based development
- Onboarding docs that explain how releases are cut
- Proposing a change to how a team branches
- Teaching Git concepts
How to make a Git graph in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with gitGraph on the first line.
- Step 2
Add commits
Add commits with commit, optionally naming them with id: "Add login" so the graph reads as a story.
- Step 3
Branch and merge
Create branches with branch develop, move between them with checkout, and join them with merge.
- Step 4
Export or share
Check the live preview, then export the graph as PNG or SVG or copy a share link.
Git graph syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Start | gitGraph | Begins a Git graph |
| Commit | commit | One commit on the current branch |
| Named commit | commit id: "Add login" | Commit with a label |
| Branch | branch develop | Creates and switches to a branch |
| Checkout | checkout main | Switches to an existing branch |
| Merge | merge develop | Merges a branch into the current one |
| Tag | commit tag: "v1.0" | Labels a commit or merge |
| Cherry-pick | cherry-pick id: "abc" | Copies one commit across |
Git graph FAQ
Does a Mermaid Git graph read my real repository?
No. A Mermaid gitGraph is drawn from the commands you write, not from a repository. That is what makes it useful for explaining a branching strategy you are proposing rather than one that already exists.
How do I merge one branch into another?
Use checkout to move to the branch you want to be on, then merge followed by the branch name. The merge is drawn into whichever branch you checked out, exactly as it works in Git.
How do I add a release tag?
Add tag: "v1.0" to any commit or merge line. Mermaid draws the tag as a label on that commit.