{"id":21196843,"url":"https://github.com/yo-mah-ya/ts-call-graph","last_synced_at":"2025-03-14T22:08:40.944Z","repository":{"id":205912686,"uuid":"715273821","full_name":"Yo-mah-Ya/ts-call-graph","owner":"Yo-mah-Ya","description":"Automatically draw graphs from TypeScript/JavaScript.","archived":false,"fork":false,"pushed_at":"2023-11-17T16:34:56.000Z","size":1304,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-22T23:16:26.687Z","etag":null,"topics":["call-graph","call-graphs","callgraph","javascript","js","ts","ts-call-graph","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yo-mah-Ya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-06T20:12:34.000Z","updated_at":"2024-12-20T06:51:42.000Z","dependencies_parsed_at":"2023-11-17T05:57:56.120Z","dependency_job_id":null,"html_url":"https://github.com/Yo-mah-Ya/ts-call-graph","commit_stats":null,"previous_names":["yo-mah-ya/ts-source-visualizer","yo-mah-ya/ts-call-graph"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yo-mah-Ya%2Fts-call-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yo-mah-Ya%2Fts-call-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yo-mah-Ya%2Fts-call-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yo-mah-Ya%2Fts-call-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yo-mah-Ya","download_url":"https://codeload.github.com/Yo-mah-Ya/ts-call-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243652708,"owners_count":20325610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["call-graph","call-graphs","callgraph","javascript","js","ts","ts-call-graph","typescript"],"created_at":"2024-11-20T19:41:38.483Z","updated_at":"2025-03-14T22:08:40.908Z","avatar_url":"https://github.com/Yo-mah-Ya.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"- [ts-call-graph](#ts-call-graph)\n- [prerequisite](#prerequisite)\n- [example image](#example-image)\n- [install](#install)\n- [How to generate call graph](#how-to-generate-call-graph)\n\n# ts-call-graph\n\nAutomatically generate graphs from source code written in TypeScript/JavaScript using TypeScript language service and its AST.\n\nSample images are in `example` directory.\n\n## prerequisite\n\nYou'll need either [dot command](https://graphviz.org/download/) to generate call graph, which converts `.dot` file to particular files like `.svg`, `.png` and whatnot, or modern web browser which enables to use [hpcc-js-wasm](https://hpcc-systems.github.io/hpcc-js-wasm/).\n\nIf you specify `server` parameter `true` or nothing, then you'll use a web browser to generate call graphs in SVG format.\n\u003cbr\u003eIf specified `server` parameter with `false`, then you'll use `dot` command, which is supposed to be installed in advance.\n\u003cbr\u003e[See the server parameter details shown below.](#how-to-generate-call-graph)\n\n## example image\n\nWhen executing below command, the following image will be output.\n\n```sh\nts-call-graph test/ -d true -f png\n```\n\n![test](example/test/call-hierarchy/one.png)\n\nAnd other example output images of well-known libraries are under example folders.\n\n- [nest](./example/nest/README.md)\n- [react-dom](./example/react-dom/README.md)\n- [ts-node](./example/ts-node/README.md)\n\n## color meaning\n\n- background color\n\n  - standard library which is under `node_modules/@types/node` and `node_modules/typescript/lib`\n\n    **`#adedad`**\n\n  - other packages under `node_modules`\n\n    **`#e6ecfa`**\n\n- stroke\n\n  - When a node doesn't have children, even if it has originally holds. For example, when interactive mode, it might remove its children, for sure can be added again.\n\n    **`#3b82f6`**\n\n## install\n\n[npm](https://www.npmjs.com/package/ts-call-graph)\n\n```sh\nnpm install ts-call-graph --save-dev\nyarn add --dev ts-call-graph\n```\n\n## How to generate call graph\n\n- example\n\n```sh\nts-call-graph ./path/to/entry-file.ts -f svg\n```\n\n- available options\n\n```sh\nOptions:\n      --version      Show version number                               [boolean]\n  -r, --rootDir      root directory where we'll recursively walk through source\n                     files. Default directory is current working directory.\n                                                              [string] [default:\n                                                          \"current working directory\"]\n  -o, --outDir       output directory                         [string] [default:\n                                                   \"current working directory/output\"]\n      --tsconfig     path to tsconfig.json which is TypeScript transpile config\n                                                                        [string]\n  -f, --format       out put format\n      [string] [choices: \"jpg\", \"jpeg\", \"jpe\", \"jp2\", \"pdf\", \"png\", \"ps\", \"ps2\",\n                           \"psd\", \"sgi\", \"svg\", \"svgz\", \"webp\"] [default: \"svg\"]\n  -d, --declaration  is include declaration           [boolean] [default: false]\n  -v, --verbose      Use verbose output               [boolean] [default: false]\n  -l, --line         The line number where call graph starts            [number]\n      --server       Whether you use server to render call graphs or dot\n                     command.                          [boolean] [default: true]\n      --help         Show help                                         [boolean]\n```\n\n- ./path/to/entry-file.ts\n  First command line arg, as in entry file or directory where we'll walk through to generate call graph.\n  If this is a directory, We'll all files in the directory, and if a file, just output the only call graphs about the file.\n- rootDir\n  When we output graphviz, this directory will be the base directory. Default value is current working directory.\n  **`\u003crootDir\u003e`/path/to/entry-file.ts**\n\n  **example**)\n  `rootDir` parameter will remove the output files' directory names.\n\n```sh\n~ $ pwd\n/Users/xxxx\n~ $ ls\ntest     package.json\n~ $ ls test/call-hierarchy\none.ts          three.ts        two.ts\n~ $ npm run ts-call-graph ./test/call-hierarchy/\n~ $ ls output/test/call-hierarchy/\none.ts#callThreeTwice:4.dot     three.ts#log:8.svg              two.ts#tada:7.dot               two.ts#tada:8.svg\none.ts#callThreeTwice:4.svg     three.ts#print:4.dot            two.ts#tada:7.svg\nthree.ts#log:8.dot              three.ts#print:4.svg            two.ts#tada:8.do\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyo-mah-ya%2Fts-call-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyo-mah-ya%2Fts-call-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyo-mah-ya%2Fts-call-graph/lists"}