Mermaid Editor

Git Branching Strategy Visualizer

Build interactive Git workflow diagrams for GitFlow, GitHub Flow, or trunk-based development. Click commit, branch, merge, cherry-pick, and tag — get clean Mermaid gitGraph code and a live preview.

GitFlow / GitHub Flow / Trunk-basedCommit / branch / merge / cherry-pickUndo and redoLive Mermaid gitGraphPNG / SVG export

Current branch: mainBranches: main

Adds a commit to the current branch. Leave the ID blank for auto-numbered commits (c1, c2, ...).

Operation history (0 / 0)

Click any row to scrub the diagram to that point.

No operations yet. Use the toolbar above or load a template.
Add a commit or load a template to see the gitGraph code here.

Preview will appear once the gitGraph has at least one commit.

Notes

  • Add a commit or load a template to start the diagram.

Example

Git branching visualizer example

A Mermaid gitGraph example showing a branch for examples merged back into main.

Git branching visualizer example preview showing an examples branch merged into main
Git branching visualizer example preview showing an examples branch merged into main

Mermaid code

gitGraph LR
      commit id: "docs"
      branch examples
      checkout examples
      commit id: "flowchart"
      commit id: "png"
      checkout main
      merge examples
      commit id: "publish"

How to draw a Git branching diagram

1

Pick a template (GitFlow, GitHub Flow, or trunk-based) to prefill a representative history, or start from scratch with the Quick commit button.

2

Use the Add operation form to commit, create branches, switch branches, merge, or cherry-pick. The branch and commit dropdowns auto-populate from your history.

3

Use Undo and Redo to step through the history, or click any row in the operation list to scrub the preview to that point.

4

Copy the generated Mermaid gitGraph code into your docs, or open the live preview and export the diagram as PNG or SVG.

Domande frequenti

Which Git branching strategies does this support?

All three popular models ship as templates: GitFlow (main / develop / feature/* / release/* / hotfix/*), GitHub Flow (main plus short-lived feature branches), and trunk-based development (mostly main with optional release branches). You can also build any custom strategy by composing commits, branches, merges, and cherry-picks manually.

Does this connect to a real Git repository?

No. This is a teaching and design tool. The diagram represents an idealized Git history that you sketch step by step, not a live repo. Use it for onboarding docs, blog posts, RFCs, and architecture reviews.

Can I name my commits?

Yes. By default commits get auto-incremented IDs (c1, c2, c3...). You can override the ID per commit if you want meaningful labels like login-form or patch-cve in the rendered diagram.

How do tags work?

Both commits and merges can carry a tag (for example v1.0 or deploy-2). Mermaid renders the tag as a small label attached to the commit dot, which is the standard way to mark releases on a gitGraph.

Can I import git log output?

Not in this version. Direct git log import is on the roadmap. For now, build the diagram step by step using the Add operation form, or start from a template and tweak from there.

Strumenti correlati

Grafi Git

Read the full Mermaid gitGraph syntax reference and examples.

Cheat Sheet

Quick reference for every Mermaid diagram type in one page.

Convertitore da Mermaid a PNG

Export your gitGraph as a transparent or solid PNG image.

Convertitore da Mermaid a SVG

Export your gitGraph as scalable SVG for docs and slides.