What a Mermaid git graph is for
A git graph draws commits, branches, merges and cherry-picks, which helps explain a branching strategy like GitFlow or trunk-based development in docs and pull requests.
Git Graph syntax
| Syntax | Meaning |
|---|---|
commit |
Add a commit to the current branch |
commit id: "fix" tag: "v1.0" |
Commit with a custom id and a tag |
commit type: HIGHLIGHT |
Commit style: NORMAL, REVERSE or HIGHLIGHT |
branch name |
Create a branch and switch to it |
checkout name |
Switch to a branch (switch also works) |
merge name |
Merge a branch into the current one |
cherry-pick id: "fix" |
Copy a commit by id onto the current branch |
Basic example
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
commit
merge feature
commit tag: "v1.0"Open this example in the Mermaid editor
More git graph examples
Release branch with a hotfix
The fix is committed on the release branch and cherry-picked back to main by id.
gitGraph
commit id: "init"
commit id: "feat-a"
branch release
checkout release
commit id: "rc1" tag: "v2.0.0-rc1"
checkout main
commit id: "feat-b"
checkout release
commit id: "hotfix" type: HIGHLIGHT
commit id: "release" tag: "v2.0.0"
checkout main
cherry-pick id: "hotfix"Open “Release branch with a hotfix” in the editor
Common mistakes
- branch also checks the new branch out, so the next commit lands on it.
- cherry-pick needs a commit with an explicit id from another branch.
Use it in Markdown
```mermaid
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
commit
merge feature
commit tag: "v1.0"
```GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.
Other Mermaid diagrams
- Mermaid flowchart syntax
- Mermaid sequence diagram syntax
- Mermaid class diagram syntax
- Mermaid state diagram syntax
- Mermaid er diagram syntax
- Mermaid gantt chart syntax
- Mermaid pie chart syntax
- Mermaid mindmap syntax
- Mermaid timeline syntax
- Mermaid user journey syntax
- Mermaid quadrant chart syntax
- Mermaid xy chart syntax
Sources
Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.
Frequently asked questions
How do I start a Mermaid git graph?
Begin the diagram with the keyword gitGraph on its own line, then add one statement per line. In Markdown, wrap the whole diagram in a fenced code block with the language mermaid so GitHub, GitLab and most docs sites draw it.
How do I export a Mermaid git graph as an image?
Paste the diagram into the editor on this page and use SVG or PNG above the preview. SVG stays sharp at any size and can be edited further; PNG is exported at twice the screen resolution for slides and documents. Nothing is uploaded.