TS-Dependency-Graph

Prints a dependency graph in dot format for your typescript or react project. Supported files are .ts and .tsx. Supports tsconfig path mappings since v1.4.3.

Usage

Install CLI

npm i ts_dependency_graph -g

 ts_dependency_graph --help
Options:
  --help                          Show help                            [boolean]
  --version                       Show version number                  [boolean]
  --color_edges                   use a random color to color the edges, group
                                  by node.             [boolean] [default: true]
  --start                         the starting file, for the analysis. can also
                                  be a folder or a glob for multiple starting
                                  files.                     [string] [required]
  --graph_folder, --graphfolders  groups files in their folder in the graph
                                                      [boolean] [default: false]
  --aggregate_by_folder, --agg    create graph on folder level
                                                      [boolean] [default: false]
  --max_depth                                           [number] [default: 1000]
  --filter                        removes files containing the provided
                                  strings. Can be negated with - in front, to
                                  remove files not containing the filter. e.g.
                                  'NOT module1' - everything not containing
                                  module1.ts will be filtered.
                                                           [array] [default: []]
  --filter_edges                  Experimental. removes edges containing the
                                  provided strings, the format is
                                  start_file=>target_file. The edges containing
                                  start_file AND target_file are removed. Start
                                  and target can be negated with 'NOT ' in front
                                  . (Currently) This is not just a postprocess
                                  on the graph. The edges won't be followed.
                                  Note: put in quotes.     [array] [default: []]
  --verbose, -v                   prints information about ignored files
                                                      [boolean] [default: false]
  --verbose_filter                prints information about filtered files and
                                  edges               [boolean] [default: false]
  --hotspots, -h                  identify hotspots, by analyzing number of
                                  incoming and outgoing edges
                                                      [boolean] [default: false]
  --base_path                     calculates path relatives to the base path
    [string] [default: "/home/pascal/LinuxData/Development/ts-dependency-graph"]
  --show_path_to                  will display the shortest paths between start
                                  and show_path_to                      [string]

ts_dependency_graph --start src/index.ts

Use output with https://stamm-wilbrandt.de/GraphvizFiddle/#, https://dreampuf.github.io/GraphvizOnline/, http://www.webgraphviz.com/, or by piping result to dot tool

ts_dependency_graph --start src/index.ts --graph_folder | dot -T svg > dependencygraph.svg

Real World Example

Usage on quickwit-ui

ts_dependency_graph --start src/index.tsx --graph_folder | dot -T svg > dependencygraph.svg

Use from Github Repo

npx ts-node src/index.ts --help