Paste an indented list or a list of file paths and get a folder tree drawn with ├── └── lines. Copy it as a README code block, or turn tree text back into a list.
This tool runs entirely in your browser. What you enter is never sent anywhere.Your input is never sent anywhere.
DetailsTree
Enter a list on the left and the tree appears here
Input tips
For an indented list, the depth of the leading whitespace sets the level, and spaces or tabs both work. Bullets such as -, *, and 1. are removed. A list of paths, like the output of git ls-files or find, is detected on its own. You can also paste text drawn with ├── and └── to convert it to another style or to a Markdown list. Add a comment to any line with a space, then #, then a space.
How to draw a directory tree as text
This tool draws a hierarchy as text, using the same ├── └── │ lines as the tree command. You can start from an indented list, from a list of file paths, or from tree text you already have. It suits a project layout in a README, the folders of a shared drive in a handover document, or the outline of a page or chapter.
Drawing the lines by hand means fixing the vertical bars every time you add an item. Here you edit the list, and the lines are redrawn. You can sort the items, add a top line, add folder slashes or icons, and place a # comment next to any entry.
Where a text tree is useful
Project layout in a README
List your folders and files, copy the tree inside a Markdown code block, and paste it into a README, a wiki page, or a pull request description.
Paths from git or find
Paste the output of git ls-files or find. The shared folders are merged, so a flat list of paths becomes a readable tree.
Converting an existing tree
Paste tree text you copied from a terminal or a doc and switch the output to a Markdown list or an indented list for editing.
Outlines and sitemaps
Put page names or chapter titles in an indented list and draw them as a tree to spot missing branches or duplicates.
Draw a tree in 4 steps
- Paste an indented list, a list of file paths, or tree text into the input box. The input type is detected for you.
- Pick an output style: Tree, Compact, ASCII, Markdown list, or Indented list.
- Set the options: sort order, top line, folder slashes, icons, comment alignment, and a directory and file count.
- Click Copy tree, or download the text file. Turn on the code block option first if the tree is going into Markdown.
Note: Bullets such as - and 1. are removed automatically, so a list from a note-taking app works as it is.
How the input is read
- Indented list: the level comes from the width of the leading whitespace. A line is a child of the closest line above it that is indented less. A tab counts as 4 spaces.
- File paths: one path per line. Backslashes become slashes, a leading ./ is removed, and paths that share a folder are merged. A path that ends with / is treated as a folder.
- Tree text: lines drawn with ├──, └──, and │, or with |--, `--, +--, and \--, are read by the position where each name starts. A final line such as 3 directories, 5 files is ignored.
- Folders: an item counts as a folder when it has children or ends with /. An empty folder needs a trailing / to be shown as a folder.
- Several top-level items are allowed. Each one becomes a root of its own, unless you set a top line.
- Sorting: A to Z ignores case and puts numbers in natural order. Folders first lists every folder before the files at the same level.
Output styles compared
The same list drawn in each style, and where each one fits.
| Style | Lines used | Good for |
|---|---|---|
| Tree | ├── └── │ | READMEs, documentation, blog posts |
| Compact | ├─ └─ │ | Chat messages and other narrow spaces |
| ASCII | |-- `-- | | Places where box-drawing characters turn into broken symbols |
| Markdown list | - nested bullets | Notes, wikis, and pages that render lists |
| Indented list | Plain indentation | Editing the structure or feeding another tool |
Lines only align in a fixed-width font. In a fenced Markdown block the font is fixed-width on most sites. In other documents, set the font of the pasted tree yourself.
Keeping a text tree intact in READMEs, docs, and chat
Where the lines tend to break, and how to avoid it.
Put the tree in a fenced code block
In a README, a tree pasted as normal text is shown in a proportional font and the vertical bars drift. Wrapping it in three backticks shows it in a fixed-width font.
The Markdown code block option wraps the copied text for you, so you can paste it as it is.
Start from git ls-files or find
Commands such as git ls-files and find print one path per line. Pasting that list gives you a tree of exactly the files you have, without retyping them.
Use the Sort option to order the result the way you want, and set a top line if you want the project name to show.
Match the sort order of the tree command
The tree command sorts names alphabetically by default, and --dirsfirst lists directories before files. Choose A to Z or Folders first to get the same order.
The count of directories and files at the bottom is the same kind of summary line that tree prints at the end of its listing.
Fall back to ASCII when symbols break
Some terminals, email clients, and older systems show box-drawing characters as broken symbols. The ASCII style uses only |, `, and - characters, so it looks the same everywhere that uses a fixed-width font.
Common problems with text trees
The vertical lines do not line up
The tree looks right in the tool but drifts after pasting. This happens when the destination uses a proportional font, where each character has a different width.
💡 See the solution▼
An item ends up under the wrong parent
Two lines that should be siblings have different amounts of leading whitespace, so the deeper one becomes a child of the line above. This often happens when tabs and spaces are mixed after copying from another tool.
💡 See the solution▼
Pasted tree output turns into a mess
If tree text is read as a plain indented list, the drawing characters become part of the names, and the result looks broken.
💡 See the solution▼
Folders and files look the same
An empty folder has no children, so it is shown like a file. Without slashes or icons, a reader cannot tell which entries are folders.
💡 See the solution▼
ASCII tree generator FAQ
Q.How do I generate a folder structure diagram for a README?
A. Type or paste your folders as an indented list, one name per line, with each child indented deeper than its parent. The tree appears on the right, drawn with ├── and └── lines. Turn on the Markdown code block option before you copy, then paste it into your README.
Q.Can I make a tree from a list of file paths?
A. Yes. Paste one path per line, such as the output of git ls-files or find. The tool detects paths on its own, merges shared folders, and draws the tree. Backslashes are treated as slashes, and a path that ends with / is treated as a folder.
Q.Can I convert existing tree command output back into a list?
A. Yes. Paste text drawn with ├──, └──, and │, or with |-- and `--, and the tool reads it as a tree. Then choose Markdown list or Indented list as the output style. The "3 directories, 5 files" line that tree prints at the end is ignored.
Q.How do I match the output of the tree command?
A. Choose the Tree style, set the top line to a dot, and turn on the directory and file count. For ordering, tree sorts names alphabetically by default and lists folders first with the --dirsfirst option. Set Sort to A to Z or Folders first to match. The tool does not read your real file system, so the content comes from the list you paste.
Q.Why does my tree look broken when I paste it into a document?
A. The lines only line up in a fixed-width font. In Markdown, put the tree in a fenced code block, which the code block option does for you. In a word processor or an email, select the tree and set the font to a fixed-width one such as Courier New or Consolas.
Q.How do I add a comment next to a file?
A. Write the comment after the name with a space, then #, then a space, for example page.tsx # home page. The comment is placed to the right of the tree. With Align # comments on, all comments start in the same column.
Q.Does it accept tabs, spaces, and bullets?
A. Yes. The level comes from the leading whitespace, and spaces and tabs both work. A tab counts as 4 spaces, and a notice appears if tabs and spaces are mixed. Bullets such as -, *, +, and numbers like 1. are removed from the start of each line, so a list from a note-taking app can be pasted as it is.
Q.Which style should I pick?
A. Use Tree for READMEs and documentation. Use Compact when width is limited, such as in chat. Use ASCII when box-drawing characters show up as broken symbols. Markdown list and Indented list produce plain outlines instead of drawn lines.
Q.Is my list sent to a server?
A. No. The tree is built in your browser, and the tool has no upload step. Your text is held only in the page while it is open.
Your feedback
makes this tool better.
Tell us which features you'd like, what should be fixed, or which new tool you'd like to see. An engineer reads every submission and uses it to guide development.