Mermaid Git Diagrams

Git diagrams visualize Git workflows, branches, and commit history. Perfect for documenting branching strategies, release workflows, and Git operations.

Use Case

Use Git diagrams when you need to:

• Document branching strategies
• Show Git workflows
• Visualize commit history
• Explain merge strategies
• Design release processes

Code (Basic)

 1```mermaid
 2gitGraph
 3    commit
 4    branch develop
 5    checkout develop
 6    commit
 7    commit
 8    checkout main
 9    merge develop
10```

Result:

Explanation

• gitGraph - Start Git diagram (note the capital G)
• commit - Create a commit
• branch - Create a branch
• checkout - Switch to a branch
• merge - Merge branches

Examples

Example 1: Feature Branch Workflow

 1```mermaid
 2gitGraph
 3    commit id: "Initial"
 4    branch develop
 5    checkout develop
 6    commit id: "Setup"
 7    branch feature/login
 8    checkout feature/login
 9    commit id: "Add login"
10    commit id: "Add validation"
11    checkout develop
12    merge feature/login
13    commit id: "Merge login"
14    checkout main
15    merge develop
16    commit id: "Release v1.0"
17```

Result:

Example 2: Git Flow

 1```mermaid
 2gitGraph
 3    commit id: "Initial"
 4    branch develop
 5    checkout develop
 6    commit id: "Dev work"
 7    branch release/v1.0
 8    checkout release/v1.0
 9    commit id: "Prepare release"
10    checkout main
11    merge release/v1.0
12    commit id: "v1.0"
13    branch hotfix/bugfix
14    checkout hotfix/bugfix
15    commit id: "Fix bug"
16    checkout main
17    merge hotfix/bugfix
18    commit id: "v1.0.1"
19    checkout develop
20    merge hotfix/bugfix
21```

Result:

Commands

• commit or commit id: "message" - Create commit (with optional label)
• branch name - Create branch
• checkout name - Switch to branch
• merge name - Merge branch into current
• cherry-pick id: "message" - Cherry-pick commit

Notes

• Commits must have id: label
• Branch names should be descriptive
• Use checkout before committing to set branch
• Merge creates a merge commit

Gotchas/Warnings

• ⚠️ Commits: Must include id: in commit command
• ⚠️ Order: Commits must be in chronological order
• ⚠️ Branches: Create branch before checking out
• ⚠️ Merges: Must checkout target branch before merging

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js