Core Features to Expect
Graph Generation
The viewer must read your lock files (e.g., package-lock.json, yarn.lock, Gemfile.lock) and produce a directed acyclic graph (DAG) where nodes are packages and edges are import statements.
Interactive UI
Zoom, pan, filter by scope, and click a node to open its source or npm page. Color‑coding for severity or size is a big plus.
Export Options
SVG, GraphML, or JSON exports let you embed the graph in documentation or feed it to other analysis tools.
Integration Hooks
CI/CD pipelines can run the viewer in headless mode to fail builds on circular dependencies or license violations. Look for --ci flags or API endpoints.
Setting Up a Dependency Viewer for JavaScript/TypeScript
Most modern JavaScript teams rely on Dependency Viewer plugins that integrate with Webpack, Rollup, or Vite. Below is a step‑by‑step for a Node.js project using the open‑source depgraph-cli package.
Installation
npm install -g depgraph-cli
Generating a Graph
Run the CLI from the root of your repository:
depgraph generate --entry src/index.ts --output graph.json
This command reads tsconfig.json, resolves imports, and writes a JSON representation of the graph.
Viewing the Graph
Start the local UI server:
depgraph serve --file graph.json
The UI is now available at http://localhost:8080. Nodes are colored by bundle size, and hovering shows the exact file path.
CI Integration
Add a script to package.json that fails on cycles:
"scripts": {
"check:deps": "depgraph generate --entry src/index.ts --output graph.json && depgraph validate --file graph.json --fail-on-cycle"
}
Then include npm run check:deps in your CI pipeline.
Dependency Viewer for Python
Python projects use requirements.txt or poetry.lock. The PyPI Dependency Viewer is a lightweight Flask app that reads these files and draws a graph using D3.js.
Installation
pip install pypi-depviewer
Running Locally
pypi-depviewer --requirements requirements.txt --host 0.0.0.0 --port 5000
Open http://localhost:5000 to explore the graph.
Exporting for Documentation
pypi-depviewer export --format svg --output deps.svg
Embed deps.svg in your README to give reviewers instant insight.
Dependency Viewer in Java (Maven & Gradle)
Java ecosystems already ship a dependency:tree goal for Maven and dependencies task for Gradle, but visualizing those trees requires an extra step.
Using Maven Dependency Plugin
mvn dependency:tree -DoutputType=dot -DoutputFile=dep.dot
Convert the DOT file to SVG with Graphviz:
dot -Tsvg dep.dot -o dep.svg
Gradle Alternative
./gradlew dependencies --configuration compileClasspath > deps.txt
Feed deps.txt into the open‑source Gradle DepGraph tool:
gradle-depgraph parse deps.txt --output graph.json
Then launch the web viewer:
gradle-depgraph serve --file graph.json
Advanced Techniques
Filtering by Scope
Large monorepos often contain test‑only dependencies. Most viewers support query parameters like ?scope=production to hide dev‑only nodes.
Custom Metrics
Extend the viewer to display runtime latency next to each service node. For example, with the open‑source depgraph-extend plugin you can inject a JSON file containing performance data:
{
"nodes": {
"auth-service": { "latencyMs": 42 },
"payment-gateway": { "latencyMs": 128 }
}
}
The UI will then size nodes proportionally to latency, highlighting bottlenecks.
Detecting License Violations
Combine the viewer with license-checker (Node) or pip-licenses (Python) and feed the results into the graph's metadata layer. Nodes that contain prohibited licenses can be colored red automatically.
Generating a graph for a repository with >10,000 modules can be CPU‑intensive. Follow these guidelines:
- Cache the lock‑file parsing step. Most viewers expose a
--cache-dir flag.
- Use incremental updates. Only re‑process files that changed since the last run.
- Limit depth. For quick CI checks, set
--max-depth=5 to ignore deep transitive edges.
GitHub Actions
name: Dependency Graph
on: [push, pull_request]
jobs:
depgraph:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install depgraph-cli
run: npm install -g depgraph-cli
- name: Generate graph
run: depgraph generate --entry src/index.ts --output graph.json
- name: Upload artifact
uses: actions/upload-artifact@v3
with:
name: dep-graph
path: graph.json
VS Code Extension
The VS Code Dependency Viewer adds a side panel that renders the graph in real time as you edit imports. Install it via the marketplace and enable the “Auto‑Refresh” setting for instant feedback.
Choosing the Right Dependency Viewer
Not all viewers are created equal. Use the following checklist when evaluating options:
- Language support: Does it handle your primary language and any polyglot components?
- CI compatibility: Can it run headless and return exit codes?
- Scalability: Tested on repos of similar size?
- Extensibility: Ability to plug in custom metrics or export formats.
- Cost: Open source vs commercial licensing. For a commercial solution, see our product recommendations page.
Practical Example: Refactoring a Monorepo
Imagine a monorepo containing three services: api, worker, and frontend. The initial dependency graph shows that frontend directly imports a utility library from worker, creating an unnecessary runtime bundle.
Step 1: Visual Inspection
Open the graph in the UI, locate the edge frontend → worker/utils, and note the red highlight indicating a cross‑service import.
Create a new package shared-utils under /libs and move the utilities there.
// libs/shared-utils/index.ts
export function formatDate(date: Date): string {
return date.toISOString();
}
Step 3: Update Imports
// frontend/src/components/DateDisplay.tsx
-import { formatDate } from '../../worker/utils';
+import { formatDate } from '@myorg/shared-utils';
Step 4: Re‑run the Viewer
After committing the changes, run depgraph generate again. The edge disappears, and the bundle size metric for frontend drops by 12 KB.
Real‑World Case Study: Reducing Bundle Bloat in a SaaS Product
A SaaS company with a React front‑end and a Node.js API layer was shipping 3.2 MB of JavaScript to browsers. The engineering team added a dependency viewer to pinpoint the culprits.
- Generated the graph and filtered to
size > 50KB.
- Found that
lodash was imported whole in several files, even though only a single function was used.
- Replaced
import _ from 'lodash' with import throttle from 'lodash/throttle' and enabled tree‑shaking.
- Re‑ran the build; bundle size fell to 1.8 MB—a 44 % reduction.
The team now runs the viewer on every pull request to guard against regression.
Conclusion
A dependency viewer is not a luxury; it is a diagnostic instrument that saves time, reduces risk, and improves performance. By integrating a viewer into your local workflow, CI pipeline, and documentation process, you gain a single source of truth for module relationships. Choose a tool that supports your language stack, scales to your repository size, and offers the export & integration hooks you need. Start visualizing today, and let the graph guide your next refactor.
People Also Ask
What is the difference between a dependency viewer and a dependency graph?
A dependency viewer is the UI component that renders a dependency graph. The graph itself is the data structure (nodes and edges) that represents relationships; the viewer adds interactivity, filtering, and export features.
Can a dependency viewer detect circular dependencies automatically?
Yes. Most modern viewers include cycle‑detection algorithms. When a cycle is found, the UI highlights the involved nodes in red and CI integrations can fail the build with a non‑zero exit code.
Is it safe to use a dependency viewer in a CI/CD pipeline?
Absolutely, provided the tool offers a headless mode. Run the generation step, pipe the output to a validation command (e.g., depgraph validate --fail-on-cycle), and let the exit status determine build success.
Do dependency viewers work with polyglot repositories?
Many commercial tools support mixed languages by reading multiple lock files and merging the resulting sub‑graphs. Open‑source options may require separate runs per language and a manual merge step.
Comments · 0
Beta: comments are stored locally on your device and not visible to other readers.
No comments yet. Be the first to share your thoughts.