Text to Tree

Outline in, tree out

This input:

project
  src
    index.js
  package.json

becomes this output, instantly:

project
├── src
│   └── index.js
└── package.json

Indentation is the whole syntax: two spaces or one Tab per level. Editing the outline beats hand-typing box-drawing characters — insert a file in the middle of a deep structure and every │ and └── below it is redrawn correctly. Your text autosaves in the browser, and Share link encodes the whole tree in the URL so a teammate can edit their own copy without any account.

Where ASCII trees beat images

• READMEs and wikis — a directory structure in a fenced code block is diffable, greppable, and renders everywhere GitHub-flavored markdown does.
• Code comments — document a module layout right next to the code it describes.
• Issues, chat, and terminals — paste anywhere monospace text lives; no image hosting, no broken links.
• Docs that get maintained — future editors update a text block instead of hunting down whoever has the original diagram file.

Round-trip with the visual modes

Text mode shares its outline with every other mode on this site. Draft a directory structure here, then flip to the visual tree diagram view for a slide-ready PNG — or sketch an org chart visually and copy it out as text. Probability and branch labels survive the round trip too: (0.5) and [yes] prefixes show up in the text output the same way you typed them. See the examples for both kinds of starting points.

Frequently asked questions