Visualizing Project Folder Structure

Visualizing the main paths, folders, and files of a project can be incredibly helpful for creating documentation and assisting other developers in understanding the project structure. In this post, I will show how to use the fd and tree commands on macOS and Linux to list a project’s folder structure while excluding certain files and directories that don’t need to be seen, like .git and node_modules.

Prerequisites

Make sure you have fd and tree installed on your system.

For macOS:

If Homebrew is not already installed, it can be installed with:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Then, install fd and tree using Homebrew:

brew install fd
brew install tree

For Linux:

Install fd and tree using your package manager. For example, on Ubuntu, run:

sudo apt-get install fd-find tree

Step-by-Step Guide

Step 1: Generate a List of Directories Excluding Common Patterns

Use fd to generate a list of directories, excluding common patterns such as .git and node_modules. This keeps the directory structure clean and focused.

fd --type f --type d --hidden --exclude .git --exclude node_modules > folders.txt

Step 2: Create the Directory Tree Structure

Use tree to create the directory tree structure from the list generated by fd. This command visualizes the project’s structure up to a specified depth.

tree -L 3 --fromfile folders.txt

• -L 3: Sets the maximum display depth of the directory tree. Adjust the number 3 based on your needs.
• --fromfile folders.txt: Reads directories from the folders.txt file.

Step 3: Clean Up

Remove the temporary file used to store the list of directories.

rm folders.txt

Optional: Create a Bash Script

To make this process even easier, automate these steps by creating a Bash script.

#!/bin/bash

# Generate the list of directories excluding common patterns
fd \
  --type f \
  --type d \
  --hidden \
  --exclude .git \
  --exclude node_modules \
  <-- Add more here -->
  > folders.txt

# Create the directory tree structure
tree -L 3 --fromfile folders.txt

# Clean up
rm folders.txt

Save the Script

1. Save the script to a file, e.g., list_structure.sh.
2. Make the script executable:

   chmod +x list_structure.sh
   

3. Run the script:

   ./list_structure.sh
   

Example Result

Here’s an example of what the directory structure might look like after running the script:

.
├── app
│   ├── assets
│   │   ├── images
│   │   ├── javascripts
│   │   └── stylesheets
│   ├── controllers
│   ├── helpers
│   ├── models
│   └── views
├── config
│   ├── environments
│   ├── initializers
│   └── locales
├── db
│   ├── migrate
│   └── seeds
├── lib
│   ├── assets
│   └── tasks
├── log
├── public
├── test
│   ├── controllers
│   ├── fixtures
│   ├── helpers
│   ├── integration
│   ├── mailers
│   ├── models
│   └── system
└── vendor

Conclusion

Using fd and tree with these steps or script, it is easy to visualize a project’s folder structure while excluding specific files and directories. This approach provides a cleaner and more focused view of the project’s layout, making it easier to write documentation and for other developers to quickly get up to speed with the project.

Feel free to adjust these steps based on the project’s specific needs. Happy coding!