Directory Tree Diagram Generator (Indented List to ├── └──)
Write your folder structure with spaces, tabs or "- " bullets and get a "├──" / "└──" / "│" tree like the Linux tree command prints. A trailing "/" marks a folder, and a "#" or "//" comment is aligned in one column. Need a table instead? Try the ASCII Table Generator.
🔒 Runs in your browser · Your data is never sent to a server
How to use
- Choose "Indented list to tree" under "Direction", then type your folder structure with indentation.
- Adjust "Line style", "Show the root" and "Depth to show (0 = all)" as needed.
- Use "Copy" or "Download" on the tree shown on the right and paste it into your README.
Notes
- Indents of 2 or 4 spaces, tabs, and hyphen or asterisk bullets are accepted. With "Auto-detect", the smallest leading-space width is treated as one level.
- Lines that skip a level, indents that do not divide evenly, and empty names are errors. Blank lines are ignored.
- Everything after a # or // that follows whitespace is a comment. A marker with no space before it, as in C#, stays part of the name.
- Setting "Depth to show" hides deeper levels and prints three dots under items that have children. The input root counts as level 1.
- Full-width characters count as two columns when aligning. View the result in a monospaced font.
Glossary
Tree diagram
A text drawing of a folder structure using "├──", "└──" and "│" branches, in the same format the Linux tree command prints.
ASCII style
A tree drawn only with "|--", "`--" and "|". It stays readable in environments where box-drawing characters break.
FAQ
How are folders told apart from files?
A name ending in "/" is shown as written, which is the usual folder marker. A tree diagram has no other distinction, so write folders as "src/".
I get a "jumps down more than one level" error.
A line is indented two or more levels deeper than the line above it. For example, the line after "src/" may have been pushed in by 4 spaces (two levels). Indent one level at a time and the error goes away.
How do I add comments?
Put whitespace after the name and write "# note" or "// note". All comments are aligned to one column, and you can pick the marker in "Comment marker". A "#" with no space before it, as in "C#", stays part of the name.
How do I show only the top levels?
Enter a number in "Depth to show". The input root counts as level 1; deeper levels are hidden and "..." appears under items that have children. 0 shows everything.
Can I turn a tree diagram back into an indented list?
Yes. Set "Direction" to "Tree to indented list" and paste a tree in the "├──" or "|--" format. Output from the tree command works too, but delete its summary line (such as "3 directories, 5 files") first.
Share this page