DEV Community

Anup Karanjkar
Anup Karanjkar

Posted on Originally published at wowhow.cloud

Dependency Viewer: The Complete Guide

#dependencyviewer

Dependency Viewer: The Complete Guide

A dependency viewer is a visual tool that maps the relationships between modules, libraries, and services in a codebase, allowing developers to understand, troubleshoot, and optimize complex dependency graphs quickly. This guide explains what a dependency viewer does, why it matters, how to set one up for popular ecosystems, and which features to look for when choosing a tool.

What Is a Dependency Viewer?

At its core, a dependency viewer parses your project files (package.json, pom.xml, go.mod, etc.), builds a directed graph of imports and runtime links, and renders that graph in an interactive UI. The result is a clickable map that shows which component depends on which, highlights circular references, and often provides metrics like bundle size or load time impact.

Why Developers Need a Dependency Viewer

Large applications accumulate hidden couplings that slow builds, increase bundle size, and cause runtime failures. A dependency viewer gives you:

    - **Immediate visibility:** Spot unwanted transitive dependencies with a single click.

    - **Impact analysis:** See how a change to a library propagates through the graph.

    - **Refactoring aid:** Identify modules that can be split or merged.

    - **Compliance checks:** Verify that no banned licenses or vulnerable versions are present.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Generating a Graph

Run the CLI from the root of your repository:

depgraph generate --entry src/index.ts --output graph.json
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Running Locally 

pypi-depviewer --requirements requirements.txt --host 0.0.0.0 --port 5000
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:5000 to explore the graph.

Exporting for Documentation 

pypi-depviewer export --format svg --output deps.svg
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Convert the DOT file to SVG with Graphviz:

dot -Tsvg dep.dot -o dep.svg
Enter fullscreen mode Exit fullscreen mode

Gradle Alternative 

./gradlew dependencies --configuration compileClasspath > deps.txt
Enter fullscreen mode Exit fullscreen mode

Feed deps.txt into the open‑source Gradle DepGraph tool:

gradle-depgraph parse deps.txt --output graph.json
Enter fullscreen mode Exit fullscreen mode

Then launch the web viewer:

gradle-depgraph serve --file graph.json
Enter fullscreen mode Exit fullscreen mode

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 }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Performance Considerations

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.
Enter fullscreen mode Exit fullscreen mode

Integrations with Existing Toolchains

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
Enter fullscreen mode Exit fullscreen mode

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:

    1. **Language support:** Does it handle your primary language and any polyglot components?

    2. **CI compatibility:** Can it run headless and return exit codes?

    3. **Scalability:** Tested on repos of similar size?

    4. **Extensibility:** Ability to plug in custom metrics or export formats.

    5. **Cost:** Open source vs commercial licensing. For a commercial solution, see our [product recommendations](/browse) page.
Enter fullscreen mode Exit fullscreen mode

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.

Step 2: Extract Shared Code

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();
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Update Imports 

// frontend/src/components/DateDisplay.tsx
-import { formatDate } from '../../worker/utils';
+import { formatDate } from '@myorg/shared-utils';
Enter fullscreen mode Exit fullscreen mode

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.

    1. Generated the graph and filtered to `size > 50KB`.

    2. Found that `lodash` was imported whole in several files, even though only a single function was used.

    3. Replaced `import _ from 'lodash'` with `import throttle from 'lodash/throttle'` and enabled tree‑shaking.

    4. Re‑ran the build; bundle size fell to 1.8 MB—a 44 % reduction.
Enter fullscreen mode Exit fullscreen mode

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.

Originally published at wowhow.cloud

Top comments (0)