Skip to content

Instantly share code, notes, and snippets.

@GeorgeHernandez
Last active December 10, 2022 18:20
Show Gist options
  • Save GeorgeHernandez/10dcbb5fd6ca8b087d169d5a44d72cd2 to your computer and use it in GitHub Desktop.
Save GeorgeHernandez/10dcbb5fd6ca8b087d169d5a44d72cd2 to your computer and use it in GitHub Desktop.
Characters used to represent trees like directories and files.

Tree Characters

No, I'm not talking about Treebeard. Rather, I'm talking about characters that can be used to represent tree structures, especially directories and files in directory structures.

In graph theory, a tree graph a tree is an undirected graph in which any two vertices (nodes like directories and files) are connected by exactly one (1..1) path, or equivalently a connnected acyclic undirected graph. The connections are edges (aka links or lines).

The examples below will represent the following tree (listed in alphabetical order):

root/
root/ape/
root/bat/
root/cat/cat.html
root/cat/cat.md
root/cat/cat.txt
root/dog/dog.html
root/dog/dog.md
root/dog/dog.txt
root/dog/elf/elf.html
root/dog/elf/elf.md
root/dog/elf/elf.txt
root/README.md

Unicode Characters

There are characters from the Unicode Box-Drawing Characters Block which are also good for representing trees. Of the 3 variants on this page, this variant looks the best.

Branch Connector        ├   U+251C: BOX DRAWINGS LIGHT VERTICAL AND RIGHT
Leaf Connector          └   U+2514: BOX DRAWINGS LIGHT UP AND RIGHT
Horizontal Connector    ─   U+2500: BOX DRAWINGS LIGHT HORIZONTAL
Vertical Connector      │   U+2502: BOX DRAWINGS LIGHT VERTICAL

root/
├── ape/
├── bat/
├── cat/
│   ├── cat.html
│   ├── cat.md
│   └── cat.txt
├── dog/
│   ├── elf/
│   │   ├── elf.html
│   │   ├── elf.md
│   │   └── elf.txt
│   ├── dog.html
│   ├── dog.md
│   └── dog.txt
└── README.md

ASCII Characters

ASCII has characters that approximate the Unicode Box-Drawing Characters, but are more easily available on most keyboards.

Branch Connector        +   U+002B: PLUS SIGN
Leaf Connector          `   U+0600: GRAVE ACCENT
Horizontal Connector    -   U+002D: HYPHEN MINUS
Vertical Connector      |   U+007C: VERTICAL LINE

root/
+-- ape/
+-- bat/
+-- cat/
|   +-- cat.html
|   +-- cat.md
|   `-- cat.txt
+-- dog/
|   +-- elf/
|   |   +-- elf.html
|   |   +-- elf.md
|   |   `-- elf.txt
|   +-- dog.html
|   +-- dog.md
|   `-- dog.txt
`-- README.md

This variant replaces Leaf Connectors with Branch Connectors. Of the 3 variants on this page, this variant uses the fewest characters.

Branch Connector        +   U+002B: PLUS SIGN
Horizontal Connector    -   U+002D: HYPHEN MINUS
Vertical Connector      |   U+007C: VERTICAL LINE

root/
+-- ape/
+-- bat/
+-- cat/
|   +-- cat.html
|   +-- cat.md
|   +-- cat.txt
+-- dog/
|   +-- elf/
|   |   +-- elf.html
|   |   +-- elf.md
|   |   +-- elf.txt
|   +-- dog.html
|   +-- dog.md
|   +-- dog.txt
+-- README.md

Directories or Files First?

Some systems default to listing directories then files:

root/
+-- ape/
+-- bat/
+-- cat/
|   +-- cat.html
|   +-- cat.md
|   +-- cat.txt
+-- dog/
|   +-- elf/
|   |   +-- elf.html
|   |   +-- elf.md
|   |   +-- elf.txt
|   +-- dog.html
|   +-- dog.md
|   +-- dog.txt
+-- README.md

However, it takes fewer visible characters if you present the files before the directories. The example below has 10 fewer visible characters than the example above:

root/
+-- README.md
+-- ape/
+-- bat/
+-- cat/
|   +-- cat.html
|   +-- cat.md
|   +-- cat.txt
+-- dog/
    +-- dog.html
    +-- dog.md
    +-- dog.txt
    +-- elf/
        +-- elf.html
        +-- elf.md
        +-- elf.txt

Of course, you may have reasons for sorting otherwise.

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment