Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 572f17b

Browse files
committed
docs: Refresh Commit Graph documentation
1 parent 150c328 commit 572f17b

File tree

1 file changed

+197
-65
lines changed

1 file changed

+197
-65
lines changed

‎gitlens/GL-Commit-Graph.md

Lines changed: 197 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,264 @@
11
---
2-
3-
title: Gitlens Commit Graph
4-
description: Learn about the Commit Graph in Gitlens
2+
title: GitLens Commit Graph
3+
description: Visualize your repository history, branches, and collaborators with the GitLens Commit Graph in VS Code.
54
taxonomy:
65
category: gitlens
76

87
---
98

10-
## Commit Graph `PRO`
9+
<kbd>Last updated: August 2025</kbd>
1110

12-
The commit graph helps visualize your repository commit history and give you information about branches, commits, and collaborators all in one view. This makes it easier to see contributions and help you make faster, more informed decisions.
11+
## Commit Graph <code>PRO</code>
1312

14-
<imgsrc="/wp-content/uploads/commit-graph.png"class="help-center-img img-bordered">
13+
The GitLens Commit Graph provides an interactive view of your repository history. It shows commits, branches, and collaborators in one place, helping you understand contributions and make faster decisions.
1514

16-
To open the Commit Graph, open the command palette using the keyboard shortcut `Cmd/ctrl + Shift + P` and type "Show Commit Graph". This will open a new tab and render your current repo’s commit history, where you may scroll through your history and resize any of the columns widths.
15+
<figure>
16+
<img src="/wp-content/uploads/commit-graph.png" class="help-center-img img-bordered" alt="Commit Graph in GitLens showing branches and commits" />
17+
<figcaption style="text-align: center; color: #888">Commit Graph overview in GitLens</figcaption>
18+
</figure>
1719

18-
<imgsrc="/wp-content/uploads/show-commit-graph.gif"class="help-center-img img-bordered">
20+
---
1921

20-
At the top of the commit graph the repository name, the branch name that is currently checked out, and the last fetched time is shown. This section offers the ability to switch branches by selecting the branch name and the ability to fetch by selecting "Fetch".
22+
### Open the Commit Graph
2123

22-
<img src="/wp-content/uploads/graph-info.png" srcset="/wp-content/uploads/graph-info@2x.png" class="help-center-img img-bordered">
24+
1. Open the Command Palette:
25+
- macOS: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
26+
- Windows/Linux: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
27+
2. Type **Show Commit Graph** and select it.
2328

24-
<div class='callout callout--basic'>
25-
<p>Note: The Commit Graph is available to all users working on public or local repositories, and requires no account. Additionally, users with a paid GitLens subscription or trial can use the Commit Graph with private repos. </br></br>
29+
The Commit Graph opens in a new tab, where you can scroll through history and resize column widths.
30+
31+
<figure>
32+
<img src="/wp-content/uploads/show-commit-graph.gif" class="help-center-img img-bordered" alt="GIF showing how to open the Commit Graph from the Command Palette" />
33+
<figcaption style="text-align: center; color: #888">Opening the Commit Graph from the Command Palette</figcaption>
34+
</figure>
35+
36+
---
37+
38+
### Repository Information
39+
40+
At the top of the Commit Graph, you’ll see:
41+
42+
- **Repository name**
43+
- **Checked-out branch** (click to switch branches)
44+
- **Last fetched time** (click **Fetch** to update)
45+
46+
<figure>
47+
<img src="/wp-content/uploads/graph-info.png" srcset="/wp-content/uploads/graph-info@2x.png" class="help-center-img img-bordered" alt="Repository details in the Commit Graph toolbar" />
48+
<figcaption style="text-align: center; color: #888">Repository details in the Commit Graph toolbar</figcaption>
49+
</figure>
50+
51+
---
52+
53+
### Availability
54+
55+
- The Commit Graph is available to all users for **public** and **local** repositories.
56+
- A **paid GitLens subscription or trial** is required for use with **private repositories**.
57+
58+
---
59+
60+
### Feedback
61+
62+
We’d love your input! Share ideas and feedback in the [GitLens Commit Graph discussion on GitHub](https://github.com/gitkraken/vscode-gitlens/discussions/2158).
2663

27-
We’d love to hear your feedback in the <a href='https://github.com/gitkraken/vscode-gitlens/discussions/2158' target='_blank'>Commit Graph discussion on GitHub</a>.</p>
28-
</div>
2964

3065
### Configuration and Layout
3166

32-
The commit graph can be configured to be shown as desired offering different settings for what to show and how or where to show it.
67+
You can configure the Commit Graph to control what information is shown and how it is displayed.
68+
69+
#### Columns
70+
- Drag and drop column headers to rearrange columns.
71+
- Right-click a column header to toggle columns on or off.
72+
- The **Changes** column shows added lines in green and deleted lines in red.
73+
74+
<figure>
75+
<img src="/wp-content/uploads/gl-column-settings.png" class="help-center-img img-bordered" alt="Commit Graph column settings menu showing toggle options" />
76+
<figcaption style="text-align: center; color: #888">Commit Graph column settings</figcaption>
77+
</figure>
3378

34-
All columns can be rearranged by dragging and dropping the column headers. The columns can be toggled on/off from the column's context menu via right-click. This enables you to arrange the columns in a way that best suits your workflow and priorities. The Changes column represents added (green) and deleted (red) lines made to each file within the commit.
79+
#### Layout Options
80+
- **Panel Layout**: Displays the Commit Graph in the bottom panel (near the Terminal) with a details view alongside it.
81+
- **Editor Layout**: Opens the Commit Graph in an editor tab.
82+
- You can open the Commit Graph in both layouts simultaneously.
3583

36-
<img src="/wp-content/uploads/gl-column-settings.png" class="help-center-img img-bordered">
84+
To switch layouts:
85+
1. Select the settings gear in the top-right corner of the Commit Graph editor.
86+
2. Choose **Prefer Commit Graph in Panel Layout** or **Prefer Commit Graph in Editor Area**.
3787

38-
A Commit Graph Panel Layout is offered to show the Commit Graph in the bottom Panel (near the Terminal) with a dedicated Commit Graph Details view alongside the Commit Graph. To switch between the Editor Layout and Panel Layout, select the Commit Graph settings gear located at the top right of the editor. From there, select the "Prefer Commit Graph in Panel Layout" or "Prefer Commit Graph in Editor Area". The Commit Graph can also be opened in both the Penel Layout and Editor Area simultaneously.
88+
<figure>
89+
<img src="/wp-content/uploads/gl-prefer-commit-graph-location.png" class="help-center-img img-bordered" alt="Commit Graph layout preference menu" />
90+
<figcaption style="text-align: center; color: #888">Switching between Editor and Panel Layout</figcaption>
91+
</figure>
3992

40-
<img src="/wp-content/uploads/gl-prefer-commit-graph-location.png" class="help-center-img img-bordered">
93+
#### Compact Graph Layout
94+
- Right-click the **Graph** column header and select **Compact Graph Column Layout** to reduce visual complexity.
95+
- When the **Author** column is resized to minimum width, it shows avatars instead of text.
96+
- Columns that become too narrow automatically switch to icons to preserve information.
4197

42-
A compact layout for the Graph column is offered in the Commit Graph to reduce the visual complexity and size of the Graph column. To enable the compact layout, right click on the Graph column header, and select the Compact Graph Column Layout option. Additionally the Author column displays avatars instead of text when sized to its minimum width, which pairs nicely with the compact Graph column as you can retain avatars. Also, when the any of the Commit Graph columns are resized small enough so that their text would be truncated, they switch to displaying icons to ensure that crucial information remains visible, even in constrained display settings.
98+
<figure>
99+
<img src="/wp-content/uploads/gl-commit-graph-compact-graph.gif" class="help-center-img img-bordered" alt="Compact Commit Graph layout with icons and avatars" />
100+
<figcaption style="text-align: center; color: #888">Compact Graph and Author column with avatars</figcaption>
101+
</figure>
43102

44-
<img src="/wp-content/uploads/gl-commit-graph-compact-graph.gif" class="help-center-img img-bordered">
103+
#### Scroll Markers
104+
Scroll markers highlight key points in the Commit Graph, including:
105+
- Checked-out branches
106+
- Selected rows
107+
- Search results
45108

46-
The scroll markers indicate points of interest on the commit graph such as checked-out branches, selected rows, and search results. This provides the ability to jump to important points like the HEAD or refs. This can be toggled on or off in the [Commit Graph settings](/gitlens/gitlens-features/#settings).
109+
Use scroll markers to quickly jump to important points such as `HEAD` or refs. You can toggle this feature in the [Commit Graph settings](/gitlens/gitlens-features/#settings).
47110

48-
<img src="/wp-content/uploads/gl-scroll-markers.png" class="help-center-img img-bordered">
111+
<figure>
112+
<img src="/wp-content/uploads/gl-scroll-markers.png" class="help-center-img img-bordered" alt="Commit Graph scroll markers indicating branch and search results" />
113+
<figcaption style="text-align: center; color: #888">Scroll markers in the Commit Graph</figcaption>
114+
</figure>
115+
116+
---
49117

50118
### Settings
51119

52-
The Commit Graph settings can be adjusted by opening the Command Palette (`command/ctrl + shift + P`) and searching "GitLens: Open Settings".
120+
Adjust Commit Graph settings from the Command Palette:
121+
- macOS: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
122+
- Windows/Linux: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
53123

54-
<img src="/wp-content/uploads/commit-graph-settings.png" class="help-center-img img-bordered">
124+
Search for **GitLens: Open Settings**.
125+
126+
<figure>
127+
<img src="/wp-content/uploads/commit-graph-settings.png" class="help-center-img img-bordered" alt="Commit Graph settings in VS Code" />
128+
<figcaption style="text-align: center; color: #888">Opening Commit Graph settings</figcaption>
129+
</figure>
130+
131+
---
55132

56133
### Rich Commit Search
57134

58-
The Commit Graph will highlight all matching results across your entire repository when searching for a commit, message, author, a changed file or files, or even a specific code change. Use shortcut keys or the up/down arrows on the search bar to navigate the search results; `F3` (also `Cmd+G` on macOS) goes to the next result from your selection while `Shift+F3` ( also `Shift+Cmd+G` on macOS) goes to the previous.
135+
The Commit Graph supports rich search across your entire repository. You can search by commit, message, author, file, or even specific code changes.
136+
137+
#### How to Search
138+
1. Type search criteria in the search bar.
139+
2. Use the arrow icons or keyboard shortcuts to navigate results:
140+
- Next result: <kbd>F3</kbd> (Windows/Linux) or <kbd>Cmd</kbd> + <kbd>G</kbd> (macOS)
141+
- Previous result: <kbd>Shift</kbd> + <kbd>F3</kbd> (Windows/Linux) or <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>G</kbd> (macOS)
59142

60-
<img src="/wp-content/uploads/Rich-Commit-Search.png" class="img-responsive center img-bordered">
143+
<figure>
144+
<img src="/wp-content/uploads/Rich-Commit-Search.png" class="help-center-img img-bordered" alt="Commit Graph search bar highlighting results" />
145+
<figcaption style="text-align: center; color: #888">Searching commits in the Commit Graph</figcaption>
146+
</figure>
61147

62-
Once you type search filtering criteria, use the arrow icons to move through each result. Additionally, you can quickly jump to the first or last result, by holding `Shift` while clicking on the up/down arrows respectively.
148+
You can also:
149+
- Jump to the **first or last result** by holding <kbd>Shift</kbd> while clicking the arrow icons.
63150

64-
<img src="/wp-content/uploads/Commit-Search-Moving-Arrow-Keys.gif" class="img-responsive center img-bordered">
151+
<figure>
152+
<img src="/wp-content/uploads/Commit-Search-Moving-Arrow-Keys.gif" class="help-center-img img-bordered" alt="Navigating commit search results with arrow keys" />
153+
<figcaption style="text-align: center; color: #888">Navigating commit search results</figcaption>
154+
</figure>
65155

66-
The following options can be used to search:
156+
#### Search Filters
157+
Use these filters in the search bar:
67158
- `Commit:`
68159
- `Message:`
69160
- `Author:`
70161
- `File:`
71162
- `Change:`
72163
- `@me`
73164

74-
Additionally, the options on the right side of the search bar can be used to match all, match case, or use regular expression.
165+
Additional options:
166+
- Match all
167+
- Match case
168+
- Use regular expressions
75169

76-
<img src="/wp-content/uploads/search-options.png" class="help-center-img img-bordered">
170+
<figure>
171+
<img src="/wp-content/uploads/search-options.png" class="help-center-img img-bordered" alt="Commit Graph search options for case sensitivity and regex" />
172+
<figcaption style="text-align: center; color: #888">Commit Graph search options</figcaption>
173+
</figure>
77174

78175
### Full Context Menu Support
79176

80-
You can right-click a branch, commit, tag, author, or column headers (author, commit date / time, or SHA) to interact with them.
177+
You can right-click a branch, commit, tag, author, or column header (Author, Commit Date/Time, or SHA) to access context menu actions.
81178

82-
<img src="/wp-content/uploads/gl-context-menu.gif" class="help-center-img img-bordered">
179+
<figure>
180+
<img src="/wp-content/uploads/gl-context-menu.gif" class="help-center-img img-bordered" alt="Context menu in Commit Graph with options for branches, commits, and authors" />
181+
<figcaption style="text-align: center; color: #888">Commit Graph context menu options</figcaption>
182+
</figure>
83183

84-
Helpful context menu actions:
184+
Helpful context menu actions include:
85185

86-
- _Compare with Common Base_: to review the changes if the selected branch were to be merged by comparing the common ancestor (merge base) with the current branch to the selected branch
87-
- _Open All Changes with Common Base_: to review the changes if the selected branch were to be merged in the multi-diff editor
186+
- **Compare with Common Base**: Review changes that would occur if the selected branch were merged by comparing its common ancestor (merge base) with the current branch.
187+
- **Open All Changes with Common Base**: Review all merge changes in the multi-diff editor.
88188

89-
### Pull Request Information
189+
---
90190

91-
For GitHub and GitLab, the commit Graph will display a Pull Request icon for any branch that currently has a pull request. You will need to connect the [rich integration](/gitlens/settings/#remote-provider-integration-settings) in order to see this.
191+
### Pull Request Information
92192

93-
<imgsrc="/wp-content/uploads/pull-request-icon.png"class="help-center-img img-bordered">
193+
For GitHub and GitLab, the Commit Graph displays a Pull Request icon for any branch with an open pullrequest. To enable this, connect a [rich integration](/gitlens/settings/#remote-provider-integration-settings).
94194

95-
### Hiding Remotes, Branches or Tags
195+
<figure>
196+
<img src="/wp-content/uploads/pull-request-icon.png" class="help-center-img img-bordered" alt="Commit Graph branch showing pull request icon" />
197+
<figcaption style="text-align: center; color: #888">Pull request icon in Commit Graph</figcaption>
198+
</figure>
96199

97-
The Commit Graph shows refs to your remotes, branches and tags. Hover over any of these refs to access the "Hide" option to help focus your Commit Graph. To show them again, hover over the "Hide" option at the top of the commit graph and select the desired refs.
200+
---
98201

99-
<imgsrc="/wp-content/uploads/gl-hide-refs.gif"class="help-center-img img-bordered">
202+
### Hiding Remotes, Branches, or Tags
100203

101-
Filter options can be accessed from the filter dropdown. This provides the ability to switch between _Show Current Branch Only_ - to show the current branch and its upstream remote - or _Show All Local Branches_ - this is selected by default. Additionally, remote-only branches, stashes and tags can be hidden/shown and merge commit rows can be dimmed.
204+
The Commit Graph shows refs to your remotes, branches, and tags.
205+
- Hover over any ref to use the **Hide** option.
206+
- To show them again, hover over the **Hide** option at the top of the Commit Graph and select the desired refs.
102207

103-
<img src="/wp-content/uploads/filter-options-2.png" class="help-center-img img-bordered">
208+
<figure>
209+
<img src="/wp-content/uploads/gl-hide-refs.gif" class="help-center-img img-bordered" alt="Hiding refs from the Commit Graph view" />
210+
<figcaption style="text-align: center; color: #888">Hiding refs in the Commit Graph</figcaption>
211+
</figure>
104212

105-
### Minimap (Experimental)
213+
#### Filter Options
214+
Access filters from the dropdown menu to choose:
215+
- **Show Current Branch Only**: Displays the current branch and its upstream remote.
216+
- **Show All Local Branches** *(default)*.
106217

107-
The Minimap provides an additional dimension to the Commit Graph. You can quickly see the activity of the repository, see the HEAD/upstream, branches (local and remote), and easily jump to them. Select the Toggle Minimap icon in the right corner of the Commit Graph top bar to toggle the Minimap on and off.
218+
Additional options let you hide or show:
219+
- Remote-only branches
220+
- Stashes
221+
- Tags
108222

109-
<imgsrc="/wp-content/uploads/gl-minimap-2.png"class="help-center-img img-bordered">
223+
You can also dim merge commit rows for clarity.
110224

111-
The Minimap can be toggled between showing commits or lines changed by selecting the graph icon dropdown in the top right of the Activity Minimap. Additionally, markers can be toggled on or off from here.
225+
<figure>
226+
<img src="/wp-content/uploads/filter-options-2.png" class="help-center-img img-bordered" alt="Commit Graph filter options for branches, tags, and stashes" />
227+
<figcaption style="text-align: center; color: #888">Commit Graph filter options</figcaption>
228+
</figure>
112229

113-
<imgsrc="/wp-content/uploads/gl-minimap-settings.png"class="help-center-img img-bordered">
230+
---
114231

115-
Minimap Overview:
232+
### Minimap (Experimental)
116233

117-
- Reads left to right - left is the most recent and the right is older
118-
- Highlighted region: Commit Graph area that is in view
119-
- Green Lines: HEAD
120-
- Yellow lines: Search results
121-
- Upper row markers:
122-
- Blue blocks: remote branches
123-
- Brown blocks: Tags
124-
- Lower row markers:
125-
- Pink blocks: stashes
126-
- Blue blocks: local branches
234+
The Minimap provides a high-level overview of repository activity. It shows commits, branches, HEAD/upstream, and more, letting you quickly jump to points of interest.
235+
236+
- Select the **Toggle Minimap** icon in the Commit Graph toolbar to enable or disable it.
237+
- Use the graph icon dropdown to switch between **Commits** or **Lines Changed** views.
238+
- Toggle markers on or off from the same menu.
239+
240+
<figure>
241+
<img src="/wp-content/uploads/gl-minimap-2.png" class="help-center-img img-bordered" alt="Commit Graph Minimap enabled in the toolbar" />
242+
<figcaption style="text-align: center; color: #888">Commit Graph Minimap</figcaption>
243+
</figure>
244+
245+
<figure>
246+
<img src="/wp-content/uploads/gl-minimap-settings.png" class="help-center-img img-bordered" alt="Commit Graph Minimap settings with commits or lines changed options" />
247+
<figcaption style="text-align: center; color: #888">Minimap settings and options</figcaption>
248+
</figure>
249+
250+
#### Minimap Overview
251+
- **Reads left to right**: Left = most recent, right = older.
252+
- **Highlighted region**: Area currently in view.
253+
- **Green lines**: HEAD.
254+
- **Yellow lines**: Search results.
255+
- **Upper row markers**:
256+
- Blue blocks = remote branches
257+
- Brown blocks = tags
258+
- **Lower row markers**:
259+
- Pink blocks = stashes
260+
- Blue blocks = local branches
127261

128262
<div class='callout callout--basic'>
129-
<p>Note: We would love to hear your feedback regarding the Minimap. Please share it on the <a href='https://github.com/gitkraken/vscode-gitlens/discussions/2477#discussion-4807133' target='_blank'>GitHub Discussion board</a>.</p>
130-
</div>
131-
132-
***
263+
<p>Note: We’d love your feedback on the Minimap. Please share it on the <a href='https://github.com/gitkraken/vscode-gitlens/discussions/2477#discussion-4807133' target='_blank'>GitHub Discussion board</a>.</p>
264+
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /