Skip to content
| Marketplace
Sign in
Visual Studio Code>SCM Providers>Web Git GraphNew to Visual Studio Code? Get it now.
Web Git Graph

Web Git Graph

kian-zh

|
38 installs
| (0) | Free
只读 Git 历史图:确定性泳道、提交详情与版本差异。Read-only Git history graph with deterministic lanes, commit details and revision diffs.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Web Git Graph

VS Code 里的只读 Git 历史图:确定性泳道、提交详情、stash、未提交改动行, 以及用原生 diff 编辑器打开的版本差异。

A read-only Git history graph for VS Code: deterministic swimlanes, commit details, stashes, an uncommitted-changes row and native revision diffs.


中文

功能

  • 提交图 —— 子提交在前、父提交在后的 DAG 布局,泳道稳定且确定,由 @web-git-graph/web 组件配合虚拟滚动渲染。展开某一行的提交详情时,泳道会从详情面板上方跨过去, 不会被截断。
  • 提交详情 —— 提交信息、ref、文件树,并显示每个文件的增删行数。
  • 原生 diff —— 点击变更文件会打开 VS Code 的 diff 编辑器,左右分别是该提交 父版本与该提交的文件内容。
  • 搜索 —— 对提交信息、作者与哈希做高亮跳转匹配,不会破坏图的拓扑结构。
  • 分支过滤 —— 可同时勾选任意多个分支、远程分支与标签,图会从这些 tip 的 并集开始遍历。
  • 右键菜单 —— 右键提交可复制哈希、复制标题,或与已选中的提交进行比较。
  • Stash 与工作区 —— stash 作为嫁接的 tip 出现;未提交的改动显示为一行 伪提交。
  • 自动刷新 —— HEAD、ref 或索引发生变化时自动重新加载,同时始终提供 手动刷新按钮。后台刷新会保留滚动位置和已展开的提交。
  • 仓库发现 —— 列出每个工作区文件夹,以及其下嵌套的仓库。
  • 柔和的加载过程 —— 面板启动时显示呼吸式渐变,展开提交时先显示骨架占位, 不会短暂闪出「无文件改动」。

使用方式

可以从以下任一入口打开:

  • 状态栏的 Web Git Graph 项(工作区包含 Git 仓库时出现,可用 webGitGraph.showStatusBarItem 关闭);
  • 源代码管理视图标题栏中的图标按钮;
  • 命令面板中的 Web Git Graph: Open Graph 命令。

当工作区包含多个仓库时,图的上方会出现仓库选择器;只有一个仓库时它保持隐藏。

设置项

设置 默认值 作用
webGitGraph.maxDepthOfRepoSearch 2 在每个工作区文件夹下向下搜索的目录层数
webGitGraph.columns date, author, commit 图右侧显示哪些列
webGitGraph.date.format datetime datetime、date 或 relative
webGitGraph.date.type committed 显示提交日期还是创作日期
webGitGraph.fetchAvatars false 从 Gravatar 加载作者头像
webGitGraph.showStatusBarItem true 是否显示状态栏入口

只读设计

插件只在受信任的工作区文件夹内执行只读 Git 命令(rev-list、cat-file、 diff、show 等),不会修改仓库:没有 checkout、merge、rebase、reset、push 或 fetch。

运行要求

  • PATH 中可用的 git
  • 受信任的本地(非虚拟)工作区

相关链接

  • 在浏览器里试用同一个组件:在线演示
  • 只用一个链接打开某个公开仓库的图: 全屏图页面
  • 源码与文档:GIS-Info/web-git-graph

English

Features

  • Commit graph — child-before-parent DAG layout with stable, deterministic lanes, rendered by the @web-git-graph/web component with virtual scrolling. Lanes run across an expanded commit's details panel instead of stopping at it.
  • Commit details — message, refs, file tree with per-file additions and deletions.
  • Native diffs — clicking a changed file opens VS Code's diff editor with the file contents at the commit's parent and at the commit itself.
  • Search — highlight-and-jump matching on message, author and hash without collapsing the graph topology.
  • Branch filtering — tick any number of branches, remotes and tags; the graph is walked from the union of those tips.
  • Context menu — right-click a commit to copy its hash or subject, or to compare it with the selected commit.
  • Stashes and working tree — stashes appear as grafted tips; uncommitted changes appear as a pseudo commit.
  • Auto refresh — the graph reloads when HEAD, refs or the index change, and a refresh button is always available. A background refresh keeps the scroll position and the open commit.
  • Repository discovery — every workspace folder plus repositories nested below it are listed.
  • Soft loading — the panel paints a breathing gradient while it starts, and shows a placeholder where the file list will be instead of briefly claiming "No file changes".

Usage

Open the graph from any of:

  • the Web Git Graph status bar item (shown when the workspace contains a Git repository; disable with webGitGraph.showStatusBarItem),
  • the graph button in the Source Control view title bar,
  • the Web Git Graph: Open Graph command in the command palette.

When the workspace contains more than one repository, a repository picker appears above the graph; with a single repository it stays hidden.

Settings

Setting Default Purpose
webGitGraph.maxDepthOfRepoSearch 2 Directory levels searched below each workspace folder
webGitGraph.columns date, author, commit Columns shown beside the graph
webGitGraph.date.format datetime datetime, date or relative
webGitGraph.date.type committed Show the committed or authored date
webGitGraph.fetchAvatars false Load author avatars from Gravatar
webGitGraph.showStatusBarItem true Show the status bar entry point

Read-only by design

The extension executes only read-only Git commands (rev-list, cat-file, diff, show, …) inside the trusted workspace folders. It never mutates a repository: there is no checkout, merge, rebase, reset, push or fetch.

Requirements

  • git available on PATH
  • A trusted, local (non-virtual) workspace

Links

  • Try the same component in a browser: live demo
  • Open any public repository from one link: fullscreen graph
  • Source and docs: GIS-Info/web-git-graph
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft