https://github.com/tone-row/ffdeptree
Fast import graph visualizer for Typescript or Javscript projects
https://github.com/tone-row/ffdeptree
dependency-graph import-graph visualizer
Last synced: 18 days ago
JSON representation
Fast import graph visualizer for Typescript or Javscript projects
- Host: GitHub
- URL: https://github.com/tone-row/ffdeptree
- Owner: tone-row
- Created: 2021-06-18T14:56:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-21T22:31:19.000Z (over 4 years ago)
- Last Synced: 2025-09-29T18:41:57.404Z (3 months ago)
- Topics: dependency-graph, import-graph, visualizer
- Language: JavaScript
- Homepage:
- Size: 2.89 MB
- Stars: 20
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ffdeptree
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-badge]][prs]
Visualize the structure of file imports in typescript or javascript projects with one command.
## How to Use
Run this command inside your codebase:
```
npx ffdeptree --filename src/index.ts --directory src/
```
- `--filename` is the path to the file whose import graph will be visualized.
- `--directory` is where the source code lives.
## How It Works
The package uses [node-dependency-tree] to parse the files and create the graph, and [flowchart-fun](https://flowchart.fun/) to make the visualization.
In watch mode, it uses [express](https://github.com/expressjs/express) and [socket.io](https://github.com/socketio/socket.io) open the group and dynamically update the page.
This package was inspired by [madge](https://github.com/pahen/madge)
## Options
All arguments excluding the ones listed below are parsed and passed to [node-dependency-tree]. You can view the arguments for that [here](https://github.com/dependents/node-dependency-tree#usage).
| Argument | Value | Description |
| -------------- | ------------------ | ------------------------------------------------------- |
| `--watch` | 0 or 1 (default 0) | Whether to watch files and sync changes in browser |
| `--port` | (default 3040) | Which port to use in watch mode |
| `--fullscreen` | 0 or 1 (default 1) | Whether to show visualization using full browser window |
## Contributions
Contributions of any kind welcome!
## License
MIT
[version-badge]: https://img.shields.io/npm/v/ffdeptree.svg?style=flat-square
[package]: https://www.npmjs.com/package/ffdeptree
[downloads-badge]: https://img.shields.io/npm/dm/ffdeptree.svg?style=flat-square
[npmtrends]: https://www.npmtrends.com/ffdeptree
[license-badge]: https://img.shields.io/npm/l/ffdeptree.svg?style=flat-square
[license]: https://github.com/tone-row/ffdeptree/blob/main/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: https://makeapullrequest.com
[node-dependency-tree]: https://github.com/dependents/node-dependency-tree