[Feature] Recursive Dependency Diagram on Package Pages

[daiangm]

Hello NPM team and community,

I would like to suggest a new feature for the package pages on the NPM website.

The idea is to add a recursive diagram that displays all the dependencies of a package, allowing developers to see up to the last level of dependencies. Additionally, the diagram should show the connections between dependencies, providing a clear and detailed view of all the packages that will be installed in the project.

Benefits
Clarity and Transparency: Allows developers to see exactly which packages will be installed, including all transitive dependencies.

Better Dependency Management: Helps developers better understand the relationships between packages and identify potential compatibility issues or redundancies.

Ease of Maintenance: Facilitates the maintenance and updating of dependencies by providing a more comprehensive view of a project's package ecosystem.

Implementation Example

An interactive diagram that can be expanded and collapsed at different levels, showing the complete hierarchy of dependencies. The diagram could be similar to a tree graph, where each node represents a package, and the edges represent dependency relationships.

Thank you for considering my suggestion. I am available to discuss further details or contribute in any way to the implementation of this feature.

flowchart TB
    Nuxt("nuxt \n nuxt")
    Chokidar("chokidar \n paulmillr")

    IsNumber("is-number \n jonschlinkert")
    ToRegexRange("to-regex-range \n jonschlinkert")
    FillRange("fill-range \n jonschlinkert")
    Braces("braces \n jonschlinkert")

    Braces --> FillRange
    FillRange --> ToRegexRange
    ToRegexRange --> IsNumber

    AnyMatch("anymatch  \n  micromatch")
    NormalizePath("normalize-path  \n  jonschlinkert")
    PicoMatch("picomatch  \n  micromatch")

    AnyMatch --> NormalizePath
    AnyMatch --> PicoMatch

    GlobParent("glob-parent \n  gulpjs")
    IsGlob("is-glob \n  micromatch")
    GlobParent --> IsGlob

    IsBinaryPath("is-binary-path \n sindresorhus")
    BinaryExtensions("binary-extensions \n sindresorhus")
    IsBinaryPath --> BinaryExtensions

    Readdirp("readdirp \n paulmillr")
    Readdirp --> PicoMatch

    Nuxt --> Chokidar
    Chokidar --> Braces
    Chokidar --> AnyMatch
    Chokidar --> GlobParent
    Chokidar --> IsGlob
    Chokidar --> IsBinaryPath
    Chokidar --> Readdirp

Loading

Thanks,

Daian Gouveia Morato

[charlie-paterson]

That sounds like a great idea