Mermaid Git图 #

Git图用于可视化展示Git仓库的分支结构、提交历史和合并操作,帮助理解版本控制流程。

基本语法 #

Mermaid使用gitGraph关键字来定义Git图:

mermaid
gitGraph
  commit
  commit
  branch 新分支
  commit
  checkout main
  commit
  commit

提交与分支 #

1. 基本提交 #

mermaid
gitGraph
  commit
  commit
  commit

2. 创建分支 #

使用branch关键字创建新分支:

mermaid
gitGraph
  commit
  branch feature
  commit
  checkout main
  commit

3. 切换分支 #

使用checkout关键字切换分支:

mermaid
gitGraph
  commit
  branch feature1
  commit
  checkout main
  branch feature2
  commit
  checkout feature1
  commit

合并操作 #

1. 合并分支 #

使用merge关键字合并分支:

mermaid
gitGraph
  commit
  branch feature
  commit
  checkout main
  commit
  merge feature
  commit

2. 合并冲突 #

可以标记合并冲突:

mermaid
gitGraph
  commit
  branch feature
  commit
  checkout main
  commit
  commit
  merge feature
  commit

3. 合并策略 #

支持不同的合并策略:

mermaid
gitGraph
  commit
  branch feature
  commit
  commit
  checkout main
  commit
  branch bugfix
  commit
  checkout main
  merge feature
  checkout bugfix
  commit
  checkout main
  merge bugfix
  commit

高级功能 #

1. 分支重命名 #

mermaid
gitGraph
  commit
  branch old-name
  commit
  branch new-name from old-name
  commit
  checkout main
  merge new-name

2. 标签 #

使用tag关键字添加标签:

mermaid
gitGraph
  commit
  commit
  tag v1.0.0
  branch feature
  commit
  checkout main
  merge feature
  tag v2.0.0
  commit

3. 提交消息 #

虽然Mermaid Git图不直接支持显示提交消息,但可以通过注释来说明:

mermaid
gitGraph
  commit
  commit
  branch feature/login
  commit
  checkout main
  commit
  merge feature/login
  commit

4. 复杂分支结构 #

mermaid
gitGraph
  commit
  branch develop
  checkout develop
  commit
  branch feature1
  commit
  commit
  checkout develop
  branch feature2
  commit
  checkout feature1
  commit
  checkout develop
  merge feature1
  checkout feature2
  commit
  checkout develop
  merge feature2
  branch release
  commit
  commit
  checkout main
  merge release
  tag v1.0.0
  checkout develop
  merge release
  branch hotfix
  commit
  checkout main
  merge hotfix
  tag v1.0.1
  checkout develop
  merge hotfix

Git工作流示例 #

1. Git Flow工作流 #

mermaid
gitGraph
  commit
  branch develop
  checkout develop
  commit
  branch feature
  commit
  commit
  checkout develop
  merge feature
  branch release
  commit
  checkout main
  merge release
  tag v1.0.0
  checkout develop
  merge release
  branch hotfix
  commit
  checkout main
  merge hotfix
  tag v1.0.1
  checkout develop
  merge hotfix

2. GitHub Flow工作流 #

mermaid
gitGraph
  commit
  branch feature
  commit
  commit
  checkout main
  merge feature
  commit
  branch bugfix
  commit
  checkout main
  merge bugfix

3. GitLab Flow工作流 #

mermaid
gitGraph
  commit
  branch feature
  commit
  commit
  checkout main
  merge feature
  branch staging
  commit
  checkout main
  merge staging
  branch production
  commit

最佳实践 #

  1. 清晰的分支命名:使用有意义的分支名称,如feature/loginbugfix/issue123
  2. 合理的提交频率:每个提交应该包含一个完整的功能或修复
  3. 适当的合并策略:根据项目需求选择合适的合并策略
  4. 使用标签标记版本:使用标签标记重要的版本发布
  5. 保持分支结构简洁:避免创建过多不必要的分支

常见应用场景 #

  1. 团队协作:展示团队成员的分支工作情况
  2. 项目演示:向非技术人员展示版本控制流程
  3. 文档说明:在技术文档中说明Git工作流
  4. 问题排查:分析提交历史以排查问题
  5. 培训教育:教学Git版本控制的使用

完整示例 #

下面是一个完整的Git项目开发流程示例:

mermaid
gitGraph
  %% 初始提交
  commit id:"初始化项目" 
  commit id:"添加基础架构"
  
  %% 开发分支
  branch develop
  checkout develop
  commit id:"开发分支初始化"
  
  %% 功能1开发
  branch feature/auth
  checkout feature/auth
  commit id:"添加用户模型"
  commit id:"实现登录功能"
  commit id:"实现注册功能"
  
  %% 功能2开发
  checkout develop
  branch feature/profile
  checkout feature/profile
  commit id:"添加个人资料页面"
  commit id:"实现资料编辑功能"
  
  %% 合并功能1
  checkout develop
  merge feature/auth
  
  %% 修复bug
  branch bugfix/login
  checkout bugfix/login
  commit id:"修复登录验证问题"
  checkout develop
  merge bugfix/login
  
  %% 合并功能2
  checkout develop
  merge feature/profile
  
  %% 发布版本
  branch release/1.0.0
  checkout release/1.0.0
  commit id:"准备发布1.0.0"
  commit id:"修复最后一分钟bug"
  
  %% 合并到主分支
  checkout main
  merge release/1.0.0
  tag: v1.0.0
  
  %% 同步开发分支
  checkout develop
  merge release/1.0.0
  
  %% 紧急修复
  branch hotfix/1.0.1
  checkout hotfix/1.0.1
  commit id:"修复安全漏洞"
  
  %% 合并紧急修复
  checkout main
  merge hotfix/1.0.1
  tag: v1.0.1
  
  checkout develop
  merge hotfix/1.0.1

替代实现方式 #

如果需要更复杂的Git图功能,可以考虑使用专门的Git可视化工具:

  1. GitKraken:功能强大的Git客户端,提供直观的分支可视化
  2. SourceTree:免费的Git客户端,支持分支管理和可视化
  3. GitHub Desktop:GitHub官方客户端,支持Git图展示
  4. GitGraph.js:JavaScript库,用于在网页中展示Git图
  5. Visual Studio Code Git Graph扩展:VS Code扩展,提供Git图功能

虽然这些工具提供了更丰富的功能,但Mermaid Git图的优势在于可以直接嵌入到Markdown文档中,便于文档编写和分享。

最后更新:2026-02-08