How do I exclude node_modules from the tree?

With the tree command, pass -I to ignore patterns, e.g. tree -I "node_modules|.git|dist". In an online generator, simply do not add those folders.

Why is my file tree misaligned on GitHub?

It is almost always because the tree is not inside a fenced code block. Wrap it in triple backticks so GitHub uses a monospace font.

Can I create a file tree without installing anything?

Yes — use a free online ASCII tree generator that runs entirely in your browser. You build the structure visually and copy the result.

How to Make a File Tree for a GitHub README

A file tree — the small ASCII diagram of your project's folders and files — makes a README instantly easier to scan. This guide shows three reliable ways to create one, and how to paste it so the branches line up correctly on GitHub.

The fastest way: an online ASCII tree generator

No command line, no install. Build your folder structure visually, switch between Unicode and plain-ASCII connectors, and copy a clean diagram in one click.

Open the ASCII Tree Generator

Method 1 — The tree command

Every major operating system ships with (or can install) a tree command that prints a directory structure as text.

On macOS or Linux, install it if needed (brew install tree or sudo apt install tree), then run it in your project folder. Use -I to ignore noisy folders:

On Windows, the command is built in. Run it in the folder you want to document:

Copy the output from your terminal and move on to the "Make it render on GitHub" section below.

macOS / Linux

tree -I 'node_modules|.git|dist'

Method 2 — An online ASCII tree generator

If you do not want to touch the command line, or you are documenting a structure that does not exist on disk yet, an online generator is the simplest option.

You add folders and files in a visual editor, rearrange them by drag-and-drop, choose Unicode (├──) or plain-ASCII (|--) connectors, and copy the result. Nothing is uploaded — it all runs in your browser.

Method 3 — A VS Code extension

Several VS Code extensions (search for "file tree to text") add a right-click "Generate file tree" action on any folder, with Markdown output.

This is handy when you live inside the editor, though you have less control over which folders to exclude than with the tree command or a dedicated generator.

Make it render on GitHub

However you generate the tree, GitHub will only keep the branches aligned if it uses a monospace font. Wrap the tree in a fenced code block — three backticks on their own line, before and after:

Without the code fences, GitHub renders the text with a proportional font and the │ and ├── characters drift out of alignment.

In your README.md

```
my-project
├── src
│   └── index.ts
└── README.md
```

Unicode vs ASCII connectors

Unicode connectors (├──, │, └──) look cleaner and render natively on GitHub and in modern editors — use them by default.

Plain-ASCII connectors (|--, |, \--) use only basic characters. Choose them for older terminals, plain-text emails, or environments that do not display Unicode reliably.

Example output

my-project
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md

Frequently asked questions

How do I exclude node_modules from the tree?: With the tree command, pass -I to ignore patterns, e.g. tree -I "node_modules|.git|dist". In an online generator, simply do not add those folders.
Why is my file tree misaligned on GitHub?: It is almost always because the tree is not inside a fenced code block. Wrap it in triple backticks so GitHub uses a monospace font.
Can I create a file tree without installing anything?: Yes — use a free online ASCII tree generator that runs entirely in your browser. You build the structure visually and copy the result.