To build the structure, we combine the characters together. These characters are considered box-drawing characters, and they go back a long time. │ (not the same as the pipe character: |).The visualization above uses four key characters to represent structure: Ultimately, I decided to follow inspiration from Linux's tree command, and went with this approach: my-project/ I'd seen fancier versions of tree structures around, so I decided to dig in. I wanted to look back on it and think, Gosh, that's the best stale doc that ever existed! When I was writing this latest set of documentation, I really wanted it to shine. It's an image (not text), so readers can't copy the contents but would have to retype.Anyone who wants to adjust the documentation in the future needs to take a new screenshot, which means they must also have the files on their computer.The problems with the screenshot approach are twofold: It gets the point across and is really quick to throw together. I've also taken the approach of simply sharing a screenshot, as I did above. But it's not great to read - I get lost when nested a few levels deep. It's good in a pinch because it's easy to move quickly. I've also done something similar but made it look more official by putting it in a code block: - package.json

Here's an example, pulling from the screenshot above: The very first way I learned to represent file structure was by using bullet points. As I wrote the doc, I considered the ways in which I have achieved this type of visualization in the past.

Create folder structure diagram in word