Draw ASCII Tree

How to use Draw ASCII Tree

1. 1. Paste your indented outline. Paste a list of items with each nested level indented further than its parent, one item per line, into the input pane.
2. 2. See the branches connected. The tool reads the indentation depth of each line and draws branch connectors like the vertical bar and corner characters to show parent-child relationships.
3. 3. Copy the finished tree. Copy the connected tree and paste it into documentation, a comment or a terminal command's expected output.

When to use Draw ASCII Tree

Draw ASCII Tree turns a simple indented outline into a connected tree diagram using branch characters like the ones the Unix tree command prints for a folder structure. Instead of drawing the vertical bars and corners by hand, indent your items and let the tool wire up the connectors.

• Documenting a project's folder structure. A README wants to show the repository's directory layout the way the tree command would print it, but the project isn't set up locally to run that command. Typing an indented outline here produces the same style of output.
• Sketching a decision tree in plain text. A design document needs a simple hierarchical diagram but doesn't warrant a full diagramming tool. An indented outline of options or roles converts directly into a readable branch diagram.
• Outlining a document's heading structure. You're planning a report or spec and want to visualize how sections nest under each other before writing the actual content. Converting your outline into a tree makes the hierarchy easier to check at a glance.
• Recreating a directory listing for a tutorial. A tutorial or blog post references a specific file structure that readers should recreate, but a screenshot of an actual terminal isn't practical. Typing the structure as an outline generates matching tree art for the post.

Examples

src
  index.ts
  lib
    math.ts

src
├── index.ts
└── lib
    └── math.ts

About the Draw ASCII Tree tool

Frequently asked questions