How to Draw Git Graphs in Mermaid

2026-03-05 · MermZen Tutorial

Git graphs visualize version control system branch management, commit history, and merge operations. They are ideal for software development team collaboration, project management, and version control teaching. Mermaid uses gitGraph keyword for Git graphs.

Declaring a Chart

Use gitGraph keyword:

gitGraph
    title Git Graph Title

Basic Commits and Branches

Create simple commits and branches:

gitGraph
    title Basic Git Graph
    commit "Initial commit"
    commit "Feature A"
    branch feature-branch1
    commit "Complete feature 1"
    commit "Fix bug 1"
    checkout main
    branch feature-branch2
    commit "Complete feature 2"

Branch Merging

Demonstrate branch merging operations:

gitGraph
    title Branch Merge Example
    commit
    branch feature-1
    commit
    commit
    checkout main
    branch feature-2
    commit
    commit
    checkout main
    merge feature-1
    commit
    merge feature-2

Tags and Versions

Add tags and version management:

gitGraph
    title Version Management Example
    commit "v1.0.0 release"
    branch feature/auth
    commit "Add authentication"
    commit "Fix security vulnerability"
    checkout main
    merge feature/auth tag: "v1.1.0"
    commit "Test fixes"
    branch hotfix/security
    commit "Critical security fix"
    checkout main
    merge hotfix/security tag: "v1.1.1"

Full Example: Product Development Flow

gitGraph
    title Product Development Git Flow
    commit "Project initialization"
    commit "Basic architecture"
    branch feature/login
    commit "Implement login functionality"
    commit "Login UI optimization"
    checkout main
    branch feature/dashboard
    commit "Dashboard framework"
    commit "Data visualization components"
    commit "User statistics"
    checkout main
    branch feature/settings
    commit "User settings page"
    commit "Security settings"
    checkout main
    merge feature/login tag: "v1.0.0-beta"
    commit "Testing fixes"
    merge feature/dashboard
    merge feature/settings tag: "v1.0.0"
    branch hotfix/performance
    commit "Optimize loading speed"
    commit "Reduce memory leaks"
    checkout main
    merge hotfix/performance tag: "v1.0.1"

Quick Reference

Next Step

After mastering Git graphs, you can continue learning other Mermaid diagram types or check our Mermaid Cheat Sheet for complete syntax reference.

To try the above code in MermZen, click Open Editor and paste the code there.