Skip to main content

​
Overview

The Git Graph view provides a powerful visual representation of your repository’s commit history, branches, and relationships. The graph is rendered using SVG with smooth animations and supports both rounded and angular branch transitions.

​
Graph Visualization

​
Graph Styles

The extension supports two graph rendering styles: 
// Uses smooth curves for branch transitions
graphStyle: "rounded"
// Bezier curves with 80% smoothing factor
Configure the graph style in VS Code settings: 
{
  "neo-git-graph.graphStyle": "rounded" // or "angular"
}

​
Branch Colors

The graph uses a customizable color palette to distinguish branches. By default, 12 distinct colors are provided:
Colors are specified in HEX or RGB format and cycle through the palette for repositories with many branches.
Default Color Palette: 
{
  "neo-git-graph.graphColours": [
    "#0085d9",  // Blue
    "#d9008f",  // Pink
    "#00d90a",  // Green
    "#d98500",  // Orange
    "#a300d9",  // Purple
    "#ff0000",  // Red
    "#00d9cc",  // Cyan
    "#e138e8",  // Magenta
    "#85d900",  // Lime
    "#dc5b23",  // Rust
    "#6f24d6",  // Violet
    "#ffcc00"   // Yellow
  ]
}

​
Customizing Colors

You can customize the color palette to match your preferences:
  1. Open VS Code Settings (Cmd/Ctrl + ,)
  2. Search for “neo-git-graph.graphColours”
  3. Click “Edit in settings.json”
  4. Modify the color array

​
Uncommitted Changes

​
Visual Indicator

Uncommitted changes appear as a special node at the top of the graph with:
  • Hash: *
  • Gray color: #808080
  • Message format: "Uncommitted Changes (N)" where N is the number of changed files
  • Parent: Current HEAD commit

​
Implementation Details

The extension uses git status -s --branch --untracked-files --porcelain to detect:
  • Modified files
  • Untracked files
  • Staged changes
// From dataSource.ts:403-416
if (lines.length > 2) {
  return { 
    branch: lines[0].substring(3).split("...")[0], 
    changes: lines.length - 2 
  }
}
On large repositories, showing uncommitted changes may impact load time. You can disable this feature:
{
  "neo-git-graph.showUncommittedChanges": false
}

​
Commit Loading

​
Initial Load

Control how many commits are initially displayed: 
{
  "neo-git-graph.initialLoadCommits": 300
}

​
Load More Commits

When more commits are available, a “Load More Commits” button appears. Configure the increment: 
{
  "neo-git-graph.loadMoreCommits": 100
}

​
Branch Filtering

Shows commits from all local branches and tags:
git log --branches --tags

​
Graph Rendering

​
SVG Structure

The graph is rendered as SVG paths with:
  • Shadow layer: Provides depth to branch lines
  • Line layer: Colored branch paths
  • Circles: Commit nodes (radius: 4px)
  • Current commit: Hollow circle with colored stroke

​
Grid System

The graph uses a coordinate system defined in web/graph.ts: 
config.grid = {
  x: 24,           // Horizontal spacing between branches
  y: 32,           // Vertical spacing between commits  
  offsetX: 16,     // Left margin
  offsetY: 16,     // Top margin
  expandY: height  // Expansion for commit details
}

​
Expanded Commit Details

When a commit is selected, the graph automatically adjusts:
  1. Lines below the commit shift down by expandY pixels
  2. Lines crossing the expansion stretch vertically
  3. Branch transitions maintain visual continuity
Enable auto-centering to automatically scroll to commit details:
{
  "neo-git-graph.autoCenterCommitDetailsView": true
}

​
Tab Icon

Customize the Git Graph tab icon appearance: 
{
  "neo-git-graph.tabIconColourTheme": "colour" // or "grey"
}
  • colour: Multi-color icon (default)
  • grey: Grayscale icon for monochrome themes

​
Performance Tips

  • Reduce initialLoadCommits to 100-200
  • Disable showUncommittedChanges
  • Use branch filtering to focus on relevant commits
  • Toggle remote branches only when needed
  • Remote branches add overhead to graph calculation
  • Load commits incrementally using “Load More”
  • Use branch selector to limit scope
SettingTypeDefaultDescription
graphStyle"rounded" | "angular""rounded"Branch transition style
graphColoursstring[]12 colorsColor palette for branches
showUncommittedChangesbooleantrueDisplay uncommitted changes node
initialLoadCommitsnumber300Commits to load on open
loadMoreCommitsnumber100Commits per “Load More”
showCurrentBranchByDefaultbooleanfalseFilter to current branch
autoCenterCommitDetailsViewbooleantrueAuto-scroll to details
tabIconColourTheme"colour" | "grey""colour"Tab icon color scheme

Build docs developers (and LLMs) love

Get started for freeTalk to us