What kind of output does Tree generate for folder structures?

Updated

Tree (tree.nathanfriend.com) generates plain-text ASCII tree diagrams of folders and files. The output is text you can copy and paste into documentation, README files, or code comments. It is not an image export — the diagram is built from ordinary characters such as branch lines and indentation to show hierarchy.

What the output looks like

An ASCII tree uses characters to draw the nesting of folders and files. A typical result resembles this:

my-project/
├── src/
│   ├── index.ts
│   └── utils/
│       └── helpers.ts
├── package.json
└── README.md

Each level of nesting is shown by a vertical line and a branch character (├── for a middle item, └── for the last item in a group). The top entry is the root folder, and everything below it is indented to show what it contains.

Why the output is plain text

Because the diagram is made of characters rather than pixels, it works anywhere monospaced text is displayed:

  • README files and docs — paste it into Markdown or plain-text documentation to show a project layout.
  • Code comments — describe a directory structure inside a source file without attaching an image.
  • Terminal output and chat — it renders correctly in any environment that uses a fixed-width font.

There is no indication on the site that Tree exports images (PNG, SVG, and similar). The deliverable is the text diagram itself.

What this means for your use case

If you need a folder-structure diagram for a README, a wiki page, or a comment block, the text output is directly usable — no conversion step is required. If you instead need a graphic to place in a slide deck or a design tool, you would have to render the text yourself in a monospaced font, since the tool does not appear to produce an image file.

One practical note: the site is a JavaScript app, so the page requires JavaScript enabled in your browser to run.