Git Graph 插件可在 VSCode 中可视化浏览 Git 提交历史与分支关系:需先安装插件并重启,再通过命令面板打开视图;支持自定义显示范围、交互式操作提交节点(如检出、建分支、比对)、导出 SVG/PNG 图像。

如果您在使用 VSCode 进行代码开发时,希望以可视化方式浏览 Git 提交历史、分支关系与合并结构,则 Git Graph 插件可提供直观的图形界面。以下是启用并高效使用该插件的具体操作路径:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装 Git Graph 插件
Git Graph 插件需通过 VSCode 扩展市场手动安装,确保本地已配置 Git 命令行工具且项目已初始化为 Git 仓库。安装后插件不会自动激活,需打开 Git 仓库或触发相关视图才生效。
1、启动 VSCode,点击左侧活动栏最下方的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入 Git Graph,找到作者为 mhutchie 的官方插件。
3、点击“安装”按钮,安装完成后点击“重新加载”使插件生效。
二、打开 Git Graph 视图
插件安装完毕后,需主动调用其主界面才能查看图形化提交历史。该视图独立于编辑器区域,以侧边栏或新标签页形式呈现,支持实时响应仓库变更。
1、按下 Cmd+Shift+P(macOS)调出命令面板。
2、输入 Git Graph: View Git Graph 并回车。
3、Git Graph 视图将在右侧侧边栏展开,显示当前仓库所有分支、提交节点及连接线。
三、自定义视图显示范围
默认情况下,Git Graph 加载全部提交记录,大型仓库可能造成渲染延迟。可通过配置限制显示深度或指定分支,提升响应速度与可读性。
1、点击视图右上角的齿轮图标,打开设置菜单。
2、选择 Configure Git Graph,进入 JSON 配置编辑器。
3、在 gitGraph.layout 字段中设为 "compact";在 gitGraph.branches 中填入目标分支名数组,例如 ["main", "develop"]。
四、交互式操作提交节点
Git Graph 支持对图中任意提交执行常见 Git 操作,无需切换终端或命令行,所有动作均在图形界面上直接触发,降低误操作风险。
1、将鼠标悬停在某个提交圆点上,点击右侧出现的 Checkout Commit 图标,切换工作区至该提交状态。
2、右键点击某提交,选择 Create New Branch From Commit,输入分支名称即可创建新分支。
3、选中两个提交节点后,点击工具栏中的 Compare Commits 按钮,生成差异文件列表。
五、导出与共享图形视图
Git Graph 允许将当前视图快照保存为 SVG 或 PNG 文件,便于在文档、评审会议或团队沟通中复用可视化结果,不依赖 VSCode 环境即可展示。
1、点击视图右上角的三个点菜单,选择 Export Graph As SVG 或 Export Graph As PNG。
2、在弹出的保存对话框中,指定路径并确认,文件将包含完整分支拓扑与提交信息。
3、导出的图像中,当前 HEAD 提交以 粗边框绿色圆点 标识,合并提交显示为 双箭头连线。










