We can create a nice representation of a file tree structure in markdown by combining a few characters in particular ways. This is sometimes useful when writing documentation where emphasizing file structure is important and we don't want to use screenshots. Screenshots just don't age well and are a hassle to update.
Introducing the Characters
─(U+2500): box drawings light horizontal (not a hyphen!)├(U+251C): box drawings light vertical and right└(U+2514): box drawings light up and right│(U+2502): box drawings light vertical▶(U+25B6): black right-pointing triangle (to represent collapsed directories, alternatively a+can be used)▼(U+25BC): black down-pointing triangle (optionally to represent expanded directories, or-can be used too).(U+002E): a good ol' space (to indicate the root directory or three consecutive ones to indicate intentional omission)/(U+002F): a good ol' forward slash (to represent directories)
When adjacent, the box drawing characters will appear connected (no kerning) or very close to it, meaning there wont be large gaps in between like with other characters. This is the main reason why the above characters work so well visually.
A Brief Demo
Here's how a file structure can be created and look good:
.
├── projects/
│ ├── acme.md
│ ├── ideas.doc
│ ├── presentation.pdf
│ ├── ▶stuff/
│ ├── assets/
│ │ ├── back_flip.gif
│ │ └── B034543543.jpg
│ ├── web/
│ │ ├── index.html
│ │ └── contact.html
│ ├── journal/
│ │ ├── my-thoughts-on-candy.md
│ │ └── how-to-make-one-million-dollars.md
│ └── vacations/
│ └── yosemite.jpg
├── hello.txt
└── secrets.txt
File Structure Text Generation
If manually doing this seems like a lot of work, of course you can just look for online tools that do that for you. But the main point is that you can just use a combination of a few Unicode characters to accomplish this yourself. You could even make a file structure tree generator with them yourself.
Some nice online generators that I've seen out there are: