No Login Data Private Local Save

Dependency Graph Builder - Online Visualize NPM/Import Dependencies

24
0
0
0
Dependency Input
Dependency Graph
drag nodes to rearrange

Frequently Asked Questions

A dependency graph is a directed graph representing dependencies between components, packages, or modules. It helps visualize how pieces of software rely on each other, making it easier to analyze architecture, spot circular dependencies, or understand project structure.

Simply paste the contents of your package.json file into the input area and select "Package.json" mode. The tool will parse dependencies and devDependencies and display them as an interactive graph where the root is your project name.

Yes, choose the "Imports" mode and paste your JavaScript/TypeScript code containing import ... from 'module' statements. All imported modules will be linked from a virtual "Project" root node.

In "Custom" mode you can define dependencies line by line using formats like A,B, A -> B, or A depends on B. Each line creates an edge from the first token to the second.

Use the "Export SVG" button to download the current graph as a scalable vector file. You can then open it in any SVG editor or embed it in documentation.

Nodes can be dragged to rearrange the layout manually. This helps you organize complex graphs for better readability or highlight specific dependency paths.
🔧 Related Tools