Directory Tree Generator (ASCII / Markdown)
Free directory tree generator. Type an indented list or drop a folder and get an ASCII folder structure for READMEs and docs. No signup required.
5 folders, 7 files
└── my-app/
├── src/
│ ├── components/
│ │ ├── Button.tsx # shared button
│ │ └── Header.tsx
│ ├── lib/
│ │ └── api.ts
│ └── index.ts
├── public/
│ └── favicon.ico
├── package.json
└── README.md # start hereWhat Is a Tree Generator?
A tree generator is a tool that turns an indented list of folder and file names into the text diagram the tree command prints: vertical bars for open branches, ├── for entries with siblings below them and └── for the last entry in a folder. Those diagrams are the standard way to show a project layout in a README, a tutorial or a design document, because they fit in a code block and need no image. Drawing them by hand means counting connector characters; editing one later means redrawing every line below the change.
This directory tree generator renders the diagram from a list you type, from a folder you pick, or from a tree you paste, in four styles. It runs in your browser.
How to Generate an ASCII Folder Structure
- Type the structure with two spaces (or a tab) per level. End folder names with
/; add# commentsafter a name where useful. - Or click Drop a folder and pick a project directory to fill the list from real files.
- Choose a style: box drawing for READMEs, ASCII for terminals, markdown list for docs, or tree command for a full listing with a root name and totals.
- Toggle folders first, trailing slashes, file counts and comment alignment; set a depth limit for large trees.
- Copy the output into a fenced code block, or download tree.txt.
Output Styles of the Folder Structure Generator
The same three-line input rendered in each style:
| Style | Output | Best for |
|---|---|---|
| Box drawing | ├── src/ │ └── index.ts └── README.md | GitHub READMEs, docs sites |
| ASCII | |-- src/ | `-- index.ts `-- README.md | Terminals, plain-text email, code comments |
| Markdown list | - src/ - index.ts - README.md | Wikis and docs that wrap long names |
| tree command | my-app ├── src/ │ └── index.ts └── README.md 1 directory, 2 files | Reproducing tree -a output |
Tips for Readable File Trees
Show only what the reader needs: a depth limit of two or three keeps a README tree to a screen, and the ellipsis line tells readers there is more below. Put the one-line purpose of a folder in a comment rather than in surrounding prose, and keep comments short so the aligned column stays narrow. When the tree comes from a real folder, the file tree generator already skips dependencies and build output; remove test fixtures and generated files from the list too if they distract from the structure you are explaining.
Why Use a Tree Generator Instead of Typing Connectors
A tree generator keeps the diagram correct when the structure changes: rename one folder or add one file in the list and every connector below it is redrawn. That matters for documentation that is updated often, such as a monorepo README or an onboarding guide. Pair the output with the README generator for a full project page, or with the repo to markdown tool when the reader needs the file contents as well as the layout.
Frequently Asked Questions
What is a tree generator?
A tree generator draws a folder structure as text using box-drawing or ASCII connectors, the way the Unix tree command does, from a simple indented list. You type folder and file names with two spaces per level, and it produces the ├── and └── diagram that READMEs, tutorials and architecture docs use to show where files live.
How do I mark folders and add comments?
End a name with / to mark it as a folder; anything with children is treated as a folder automatically. Add a comment after a space and #, for example config.ts # loaded at startup, and the ascii tree generator aligns all comments into one column when Align comments is on.
Can it read a real folder from my computer?
Yes. Click Drop a folder and pick a directory; the browser lists its files without uploading them, and the tool builds the tree, skipping node_modules, .git, dist, build and similar folders. It stops at 2,000 entries, so use the depth limit for very large projects.
Which output style should I use in a README?
Box drawing renders correctly on GitHub, GitLab and most docs sites and is the most readable. Use ASCII if the file may be viewed in a terminal or editor without Unicode fonts, and the markdown list style when you want clickable, wrappable output instead of a fixed-width block. Put box or ASCII trees inside a fenced code block so spacing is preserved.
Can I paste an existing tree and clean it up?
Yes. Paste a tree drawn with ├──, |-- or a markdown list and the file tree generator parses the connectors back into a structure. Click Normalize to indented list to turn it into the editable form, then re-render it in any style.
Does the tool upload my folder?
No. The folder picker only reads file names and paths inside your browser; nothing is sent anywhere.