Large codebases become risky when dependency structure is invisible; developers need to know which files create cycles or carry broad downstream impact before they change them.
DepGraph
A dependency-graph tool for exploring code structure, highlighting cycles, and surfacing high-impact files.
Built a VS Code-oriented dependency analysis surface that parses project structure, models reach and cycles, and turns graph findings into editor diagnostics and navigable project context.
I favored fewer, explainable diagnostics over maximum graph output, because trust depends on warnings that connect to a concrete review or refactor decision.
The result is proof that I can connect parsing, graph modeling, UI feedback, and developer workflow design into a tool that makes codebase risk easier to act on.
- Reduces detached debugging by putting dependency-risk signals directly in the editor.
- Designed for small-to-mid-sized TypeScript workspaces with dozens of files and reviewable graph nodes.
- Improves workflow reliability by making high-reach files and cycles visible before a change lands.
Architecture Sketch
The project combines a graph engine, UI layer, query tools, and editor diagnostics so structural signals can move from analysis into daily development.
- Workspace files
- Dependency graph
- Reach and cycle analysis
- VS Code diagnostics
Recently Improved
What changed in the proof surface.
- Added public-facing source context so the excerpt explains the engineering signal, not just the syntax.
- Clarified the next improvement around graph snapshots and drift comparison.
Proof Points
What this project demonstrates.
- Flags circular dependencies and high-impact files.
- Supports graph querying for deeper codebase inspection.
- Turns dependency analysis into editor-visible feedback.
The result is proof that I can connect parsing, graph modeling, UI feedback, and developer workflow design into a tool that makes codebase risk easier to act on.
DepGraph / TypeScripthstephan23/dep_graph
export class DepGraphDiagnostics {private collection: vscode.DiagnosticCollection;update(graph: GraphData): void {this.collection.clear();const root = getWorkspaceRoot();if (!root) { return; }const diagnosticMap =new Map<string, vscode.Diagnostic[]>();const addDiag = (fileId: string,diag: vscode.Diagnostic,) => {const absPath = path.join(root, fileId);const uri = vscode.Uri.file(absPath).toString();if (!diagnosticMap.has(uri)) {diagnosticMap.set(uri, []);}diagnosticMap.get(uri)!.push(diag);};for (const node of graph.nodes) {if (node.data.reach_pct > 50) {const pct = node.data.reach_pct.toFixed(1);const message = `High-impact file: ${pct}% reach`;const diag = new vscode.Diagnostic(new vscode.Range(0, 0, 0, 0),message,vscode.DiagnosticSeverity.Hint,);diag.source = "DepGraph";diag.code = "high-impact";addDiag(node.data.id, diag);}}}}
Line 15Signal lands where developers work.
The graph result becomes a file-level diagnostic instead of a detached report.