Add a folder tree to your README
A directory tree shows how files and folders are organized. Create one from indented source or a local folder, then paste the output into a Markdown code block.
Open the workbenchTurn indented source into a tree
Edit the source below. The same parser and formatter used by the workbench create the result.
Use two spaces for each level. The output updates as you type.
.
└── project/
├── src/
│ └── App.vue
├── public/
│ └── icon.svg
└── README.mdCreate README-ready output
Add the structure
Write or paste indented source. You can also choose a local folder.
Choose the output
Use Unicode for modern documentation or plain ASCII for older systems. Markdown and JSON formats are also available.
Copy it into the README
Put three backticks before and after the tree. The code block preserves spacing and keeps the branches aligned.
Choose ASCII or Unicode
Both formats are plain text. The difference is the set of branch characters.
Plain ASCII
project/
|-- src/
| `-- App.vue
`-- README.mdUse this format when a system does not support box-drawing characters.
Unicode
project/
├── src/
│ └── App.vue
└── README.mdUse this format for clearer branches in modern editors and Markdown.
Use the tree command when you do not need to edit
A terminal command is useful when you need a direct view of an existing folder. Use Lupinum Tree when you want to edit the structure, compare formats, or plan folders that do not exist yet.
macOS and Linux
treeWindows
tree /F /AYour folder stays on your device
Folder import reads names and hierarchy in your browser. It does not read file contents. It does not upload the tree. Saved trees remain in this browser.
Common questions
An ASCII tree is a plain-text view of a hierarchy. Branch characters show how files and folders are nested. You can use the result in README files, documentation, code comments, issues, and chats.
Plain ASCII uses characters such as |, +, and -. Unicode uses box-drawing characters such as │, ├, and └. Use ASCII for older systems. Use Unicode for clearer output in modern editors and Markdown.
No. Folder import reads file and folder names in your browser. It does not read file contents or send the tree to a server. Saved trees stay in this browser.
Yes. Edit the indented source in the workbench. Lupinum Tree updates the output as you type. You can also change the output format and path settings.