File tree diagram

Types of hierarchy chart

When to use a file tree diagram

• Tidy files

  Show which files are inside which folders, the way a computer lists them.

• Explaining

  Put it in instructions so people can see where a file lives, like style.css in the css folder.

• New project

  Sketch a new project's files before you start, so everyone knows where things go.

How to make a file tree diagram

1. 1The project
   my-website/
2. 2Files and folders
   my-website/

   index.html

   about.html

   css/

   js/

   images/
3. 3What is inside
   my-website/

   index.html

   about.html

   css/

   style.css

   js/

   app.js

   images/

   logo.png

   team.jpg

Helpful resources

• Tree (command) on Wikipedia

Questions

Where does the name come from?

Originating in PC- and MS-DOS, it is found in Digital Research FlexOS, IBM/Toshiba 4690 OS, PTS-DOS, FreeDOS, IBM OS/2, Microsoft Windows, and ReactOS.From Wikipedia — Tree (command) — CC BY-SA 4.0

Do I need an account?

No. Press the button and start. It saves in this browser; sign in only if you want it on your other devices too.

Can I print it?

Yes. Print it from the board's settings, or pick “Save as PDF” in the print window to keep a file.