WebStorm提供四种查看Git分支合并图谱的方法:一、启用Log视图的图形模式并配置Show Branches等选项;二、在Terminal中执行git log --graph命令;三、通过Branches面板结合Show in Log定位分支;四、安装GitToolBox插件启用彩色分支图与合并高亮。

如果您希望直观了解项目中各分支的演化关系与合并历史,WebStorm 提供了内置的图形化日志视图来呈现分支拓扑结构。以下是查看 Git 分支合并图谱的具体步骤:
一、使用 Git Log 图形化视图
WebStorm 的 Git 工具窗口中的 Log 标签页默认以时间线形式展示提交记录,启用图形模式后可清晰显示分支分叉、合并及交汇关系。该视图能识别并绘制出 merge commit 所连接的多个父提交,从而还原真实分支图谱。
1、点击右下角 Git 分支指示器(如显示 main),打开 Git Branches 面板。
2、在主菜单中选择 VCS → Git → Show History,或直接按快捷键 Alt+9 打开 Version Control 工具窗口,切换到 Log 标签页。
3、在 Log 视图左上角点击 Show Options Menu(齿轮图标),勾选 Show Branches 和 Show Tags。
4、再次点击齿轮图标,选择 Use Compact View 以减少垂直空间占用,并确保 Show All Branches 已启用。
5、右键任意提交节点,选择 Compare with Current Branch 或 Compare Branches,可高亮差异路径,辅助识别合并点。
二、通过命令行集成视图查看图谱
WebStorm 内置 Terminal 支持原生 Git 命令,可通过 git log --graph 系列指令生成 ASCII 分支图,结果直接渲染在 IDE 控制台中,保留颜色与缩进逻辑,适配复杂合并场景。
1、在 WebStorm 底部工具栏点击 Terminal 标签,或按 Alt+F12 调出终端。
2、输入以下命令并回车:
git log --graph --oneline --all --simplify-by-decoration --date=short
3、若需更详细信息(如作者、提交时间),改用:
git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --all
4、滚动终端输出,观察字符构成的树状结构:| 表示延续,/ 和 \ 表示分支分叉与合并,* 为提交节点,<font color="green>merge 提交旁会标注 Merge branch 'xxx'。
三、使用 Git Tool Window 的 Branches 面板辅助定位
Branches 面板本身不绘图,但可通过可视化方式快速识别哪些分支存在未合并提交或已合并状态,结合 Log 视图交叉验证图谱完整性。它实时同步远程分支引用,是判断图谱是否覆盖全量历史的关键入口。
1、点击编辑器右下角当前分支名称(如 main),呼出 Git Branches 面板。
2、展开 Local Branches 和 Remote Branches 节点,观察各分支末尾标记:
✓ 表示该分支已完全合并至当前分支;
⟳ 表示存在未推送提交;
⚠️ 表示本地与远程存在偏离(diverged)。
3、右键任一分支,选择 Show in Log,可立即跳转至该分支最新提交在 Log 图中的位置,实现分支与图谱节点的双向定位。
四、启用 Git 日志的“Colorful Graph”插件增强显示
WebStorm 默认日志图谱为单色,安装第三方插件可启用彩色分支线、差异化合并节点标识及交互式缩放,显著提升多分支合并图谱的可读性与调试效率。
1、进入 File → Settings → Plugins(Windows/Linux)或 WebStorm → Preferences → Plugins(macOS)。
2、在搜索框输入 GitToolBox,找到同名插件并点击 Install。
3、安装完成后重启 WebStorm,在 Settings → Other Settings → GitToolBox 中启用 Show branch graph in Log 和 Highlight merge commits。
4、重新打开 Log 视图,此时分支线将按名称分配固定颜色,合并提交显示双箭头图标,且鼠标悬停可显示参与合并的源分支名称。


















