Components Dependency Graph

A script for creating a graph of relationships between components in React.js / React Native applications.

Usage

File mode

npx components-dependency-graph -f /path/to/component.tsx

Directory mode

npx components-dependency-graph -d /path/to/directory

Options

--config <path> – Allow to use config in different location (details about config below).

--generate_diagram <path> – Generates diagram in SVG format based on GraphViz.

Configuration

Just create in base location file called cdg.config.json:

{
  "excludeDirectoriesWithNameContains": [
    // ...
  ],
  "excludeFilesContains": [
    /// ...
  ],
  "rootPath": "",
  "generateGraphWithFilesPaths": true,
  "pathAliases": {
    "@assets": "./src/assets/"
  }
}

Available parameters

| Property | Type | Description | | ---------------------------------- | ---------------------- | ---------------------------------------------------------------------- | | excludeDirectoriesWithNameContains | Array | If catalog path contains one of string from this list will be ignored. | | excludeFilesContains | Array | If filename contains one of string from this list will be ignored. | | rootPath | string | Specify the path of the main project root. | | generateGraphWithFilesPaths | boolean | Specify if graph nodes should have path added to name. | | pathAliases | Record<string, string> | Dictionary to replaces paths based on Babel configuration |

VSCode Extension

components-dependency-graph-vscode

License

MIT