File Tree Generator (Folder Structure Diagram)

Show a project’s folder structure in a README, a tutorial, a bug report or a chat message without installing anything. List the files as paths (src/app.js) or as an indented outline, and get a tree in the style of the Unix tree command, with ├── and └── branches, plain ASCII branches for places that mangle Unicode, or simple indentation. Folders are sorted first and numbers in names sort naturally, so file2 comes before file10.

How to use this tool

1. Type or paste one path per line, or an indented list where children are indented under their folder.
2. Optionally set a root folder name.
3. Choose the line style and order, and whether folder names end with /.
4. Copy the tree; tick the Markdown option to get a ready `text code block for a README.

Formula

Each path is split at / (or \) into folders and a file name and added to a tree; the tree is drawn depth-first with ├── for middle items and └── for the last

Windows paths and drive letters are accepted, and a leading ./ or / is ignored. In an outline, each line belongs to the nearest line above it with less indentation, so 2-space, 4-space and tab indents all work, as does pasted tree output. A name is a folder if it ends with / or has anything under it. Sorting compares names without regard to capitals and reads numbers as numbers. As with the tree command, the counts leave out the top line.

Example

The sample paths give my-app/ with public/ (favicon.ico), src/ (components/ holding Footer.jsx and Header.jsx, utils/ holding format.js, then index.js), package.json and README.md: 4 folders and 7 files below my-app, drawn with ├── and └── branches. Folders come first and are sorted A to Z, so public/ is drawn before src/.