Add a Folder Tree to a README
Generate a clean project-structure tree to document your repository.
Indent with spaces or tabs to nest items. Each deeper indent becomes a child.
my-project ├── src │ ├── components │ │ ├── Button.tsx │ │ └── Modal.tsx │ ├── lib │ │ └── utils.ts │ └── index.ts ├── public │ └── favicon.ico ├── package.json └── README.md
💡 Paste a folder structure (or any nested outline) and get a clean tree you can drop into a README, a comment, or documentation. Use the ASCII style for environments that don’t render box-drawing characters. Everything runs in your browser.
README tips
Paste your folder layout as an indented list and drop the generated tree inside a fenced code block in your README.
Unicode connectors (├── └──) render nicely on GitHub; switch to ASCII for plain-text environments.
Keep it focused — show the important folders and files, not every node, so readers grasp the structure fast.
Runs entirely in your browser.
使い方
なぜ私たちのツール？
Also check out…
Document a Project Structure
Create a directory tree for technical docs and wik
Make a Tree for a Code Comment
Generate a structure diagram to embed in source-co
Show a File Tree in a Talk
Create a clean directory diagram for slides and tu
Turn an Outline into a Tree
Visualise any nested outline — not just files — as