How do I create an ASCII folder structure diagram with Tree?

Open tree.nathanfriend.com in a browser with JavaScript enabled, type or paste your folder and file names into the input area, and the tool renders them as an ASCII tree diagram you can copy. That is the whole workflow: the site is a client-side utility for turning a plain list of paths into a text-based folder structure, so it needs JavaScript to run at all — with scripting disabled the page only shows "You need to enable JavaScript to run this app."

What Tree does

Tree is an online utility for generating ASCII folder structure diagrams, written in TypeScript and React. You give it a folder structure; it gives back the kind of indented, line-drawn tree you would otherwise produce with the Unix tree command or draw by hand in a README.

Typical uses:

• Documenting a project layout in a README or wiki page
• Showing a directory structure in a bug report or code review
• Producing plain text that survives copy-paste into email, chat, or a code comment

Step-by-step

1. Open the site. Go to tree.nathanfriend.com in any modern browser. JavaScript must be enabled — the app is a React front end and renders nothing without it.
2. Enter your structure. Type or paste your folders and files into the input area. The natural format is one path per line, using / to separate levels, for example:

   src/components/Button.tsx
   src/components/Modal.tsx
   src/utils/format.ts
   README.md
   

   The tool interprets the shared prefixes as nesting, so you do not have to indent anything yourself.
3. Read the rendered diagram. The output pane shows the same content as an ASCII tree — a root, branch characters (├──, └──), and vertical guides (│) marking each level.
4. Copy the result. Select the generated text and paste it wherever you need it. Because it is plain ASCII, it stays aligned in monospace contexts such as code blocks, terminals, and Markdown fenced sections.

Getting a clean diagram

• Keep one path per line. Mixing indentation styles or adding blank lines makes the parser guess; a flat list of full paths is the most predictable input.
• Watch for trailing slashes and stray spaces. They can create phantom entries or shift a file to the wrong level.
• Paste into a code block. In Markdown, wrap the output in triple backticks so the alignment is preserved; outside a monospace block the tree characters will drift.
• Check the root. If your first line is a deep path, the diagram starts there — add a top-level folder line first if you want a single visible root.

Common snags

When to use it

Reach for Tree when you need a quick, shareable text diagram and do not want to install anything. If you are already in a terminal and want the real filesystem reflected automatically, the tree command is faster; if you need a diagram that updates with your repo, a script or a docs generator will serve you better than a manual paste. Tree fits the middle case: a one-off, hand-specified structure that has to end up as plain text.