TryMermaid

package.json dependency graph generator

Paste a package.json and get a Mermaid diagram of its dependencies, grouped by type and labelled with version ranges. Free, and the file never leaves your browser.

flowchart LR
    root["[email protected]"]
    subgraph dependencies["dependencies"]
        d0["@sveltejs/kit ^2.63.0"]
        d1["mermaid ^11.17.2"]
    end
    subgraph devDependencies["devDependencies"]
        d2["vite ^8.0.0"]
    end
    root --> d0
    root --> d1
    root -.-> d2
Loading the tool…

How to do it

  1. Step 1

    Paste your package.json

    Paste the contents of a package.json, or upload the file.

  2. Step 2

    Choose the groups

    Choose which dependency groups to include and whether to show versions.

  3. Step 3

    Pick a direction

    Pick left to right or top to bottom.

  4. Step 4

    Use it

    Copy the Mermaid, or open it in the editor.

Why draw dependencies

A dependency graph in the README tells a new contributor what a package is built on before they open a single file, and makes it obvious when a pull request adds a heavy runtime dependency.

Focus the picture

Turn off devDependencies to see only what ships to users. Turn off versions for a cleaner picture when the ranges do not matter.

What this does not do

  • Direct dependencies only; transitive dependencies from a lockfile are not drawn.
  • Each group shows at most 80 packages.

Frequently asked questions

What does the graph show?

The direct dependencies declared in the package.json: dependencies, devDependencies, peerDependencies and optionalDependencies, each in its own group. Runtime dependencies are solid arrows, peer dependencies thick arrows, and dev and optional dependencies dotted.

Does it include dependencies of dependencies?

No. A package.json only lists direct dependencies, and drawing the full tree from a lockfile produces thousands of nodes that no one can read. For transitive dependencies, use npm ls or pnpm why to find the path you care about.

Does it work for a monorepo?

Yes: paste each workspace's package.json in turn. Each becomes its own graph, which you can combine in the editor.

More Mermaid tools

All tools