← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid Git graph online editor

Explain branches, commits, merges, and release paths visually. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the GitGraph editor See an example

WHAT IT IS FOR

Make the important relationships clear

Make branches, commits, merges, and release paths understandable during planning, code reviews, and retrospectives.

  • Explain branching strategies
  • Document release flows
  • Review a Git history with a team
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

gitGraph
  commit id: "initial"
  branch develop
  checkout develop
  commit id: "feature"
  checkout main
  merge develop
  commit id: "release"

HOW TO START

Create your diagram in four steps

  1. 1Start from the initial commit or release point.
  2. 2Create branches where work diverges.
  3. 3Add commits and merge paths in order.
  4. 4Label the commits that matter to the release story.

WRITING TIPS

Keep the diagram useful

Keep branch names short and meaningful.

Use tags or commit labels for releases.

FAQ

Frequently asked questions

What is a Git graph diagram?+

A Git graph diagram explains how branches and commits move through a repository over time.

Can I use Git graphs for release planning?+

Yes. They are useful for showing feature, development, release, and main branch relationships.

TEMPLATES

Start from a related template

Release branching strategy

Visualize branches, merges, and release paths in Git.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a GitGraph?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio