31

I have seen people posting screenshots of their directory structure from a text editor or IDE as shown below:

Screenshot of some unspecified text editor or IDE showing a logical folder structure for a code project

Others display the structure in text format as shown below:

|mysite/
|
|/assets/
|/assets/img/
|/assets/img/me.png
|/assets/css/
|/assets/css/styles.css
|/assets/js/
|/assets/js/scripts.js
|/pages/
|/pages/about/
|/pages/about/index.html
|/pages/contact/
|/pages/contact/index.html
|index.html

And any other format that is probably not listed here.

Let's say you want to add a tree structure for a directory to either a question, answer, or comment, what is the best way to be able to convey the tree diagram in the question and in the comment?

The reason I'm asking is because I have sometimes seen questions and answers posting screenshots of the folder structure getting downvoted because of little description. And the questions with tree structure in text format being treated as it being more descriptive.

3
  • 1
    If you want to use a text format, you'll want to likely put it in a code fence/block; your attempt isn't consumable within the question.
    – Thom A
    Sep 9, 2022 at 9:16
  • 14
    "getting downvoted because of little description" This is exactly accurate, probably, but also probably not what you mean. If someone posts a question with an image and little to no description of the problem, that's downvote-worthy... but not because of the image, necessarily, but because of little to no description. Sometimes you need to use a screenshot to depict something in a post... what matters is that you describe the issue being depicted thoroughly.
    – TylerH
    Sep 9, 2022 at 13:39
  • 2
    It's also possible that the down vote is happening because the screenshot has no alt text or anything describing the image, which makes the post inaccessible to anyone who can't see the image. TylerH's explanation is going to be the case more often but if you have seen a detailed post get a downvote for "little description", they might have meant not having an image description.
    – BSMP
    Sep 10, 2022 at 8:00

8 Answers 8

59

Use the tree command if you're on Linux or Windows, and format using code fences.

I like this because:

  • It’s consistent and reproducible
  • It’s more searchable than images
  • I find it easier to read than most images which can often be too dark, blurry, contain excessive space around the margins, too zoomed in/out etc
tree /boot -L 2
/boot
├── config-3.10.0-1160.45.1.el7.x86_64
├── config-3.10.0-1160.49.1.el7.x86_64
├── config-3.10.0-1160.53.1.el7.x86_64
├── config-3.10.0-1160.62.1.el7.x86_64
├── config-3.10.0-1160.71.1.el7.x86_64
├── efi
│   └── EFI
├── grub
│   └── splash.xpm.gz
├── grub2  [error opening dir]
├── initramfs-0-rescue-e8c1c57d7a5e496786842a8312e34b72.img
├── initramfs-3.10.0-1160.45.1.el7.x86_64.img
├── initramfs-3.10.0-1160.45.1.el7.x86_64kdump.img
├── initramfs-3.10.0-1160.49.1.el7.x86_64.img
├── initramfs-3.10.0-1160.49.1.el7.x86_64kdump.img
├── initramfs-3.10.0-1160.53.1.el7.x86_64.img
├── initramfs-3.10.0-1160.53.1.el7.x86_64kdump.img
├── initramfs-3.10.0-1160.62.1.el7.x86_64.img
├── initramfs-3.10.0-1160.62.1.el7.x86_64kdump.img
├── initramfs-3.10.0-1160.71.1.el7.x86_64.img
├── initramfs-3.10.0-1160.71.1.el7.x86_64kdump.img
├── symvers-3.10.0-1160.45.1.el7.x86_64.gz
├── symvers-3.10.0-1160.49.1.el7.x86_64.gz
├── symvers-3.10.0-1160.53.1.el7.x86_64.gz
├── symvers-3.10.0-1160.62.1.el7.x86_64.gz
├── symvers-3.10.0-1160.71.1.el7.x86_64.gz
├── System.map-3.10.0-1160.45.1.el7.x86_64
├── System.map-3.10.0-1160.49.1.el7.x86_64
├── System.map-3.10.0-1160.53.1.el7.x86_64
├── System.map-3.10.0-1160.62.1.el7.x86_64
├── System.map-3.10.0-1160.71.1.el7.x86_64
├── vmlinuz-0-rescue-e8c1c57d7a5e496786842a8312e34b72
├── vmlinuz-3.10.0-1160.45.1.el7.x86_64
├── vmlinuz-3.10.0-1160.49.1.el7.x86_64
├── vmlinuz-3.10.0-1160.53.1.el7.x86_64
├── vmlinuz-3.10.0-1160.62.1.el7.x86_64
└── vmlinuz-3.10.0-1160.71.1.el7.x86_64

4 directories, 33 files
14
  • 10
    'tree' works on Windows as well (though traditionally it was never widely used). Sep 9, 2022 at 10:30
  • 4
    I learned about tree on a DOS system as a child... then I got a Mac and went many years without seeing a command line again. Sep 9, 2022 at 11:12
  • 2
    This is very unclear on VoiceOver. I guess you can assume that hearing "vertical bar vertical bar" before an item means a second level item, but the last second level item doesn't even have two vertical bars — it has a backtick which isn't even pronounced. I also think that I would have trouble determining how many levels deep something is when it gets deeper.
    – Laurel
    Sep 9, 2022 at 15:21
  • @Laurel I chose a bad example with backticks in the name. Unsure if this is any better but I've updated the example.
    – user438383
    Sep 9, 2022 at 15:24
  • No, that's much worse because now I can't even understand the nesting structure at all with VoiceOver. It's the same as another answer.
    – Laurel
    Sep 9, 2022 at 15:30
  • 1
    @Laurel OK. As someone totally unfamiliar with VoiceOver, could you envisage a text-based tree structure that would be more accessible with VoiceOver?
    – user438383
    Sep 9, 2022 at 15:37
  • 12
    Formatting it as a markdown bulleted list works the best. Since that translates to HTML, screen readers have built-in ways to navigate it.
    – Laurel
    Sep 9, 2022 at 15:40
  • 1
    I think you can convert from your format to a bulleted list by replacing anything matching the regex (├|─|└)+ with a hyphen and removing
    – Laurel
    Sep 9, 2022 at 15:46
  • 2
    @StackOverflowTheCompany Automatically performing Laurel's translation in the background for accessibility would be very cool. Is this a huge value-add, Laurel? Sep 9, 2022 at 17:42
  • 1
    This is a technical answer to a procedural question. Yes, using tree you can generate a textual representation of a directory listing. But this answer does not address at all whether that's actually desirable.
    – CodeCaster
    Sep 10, 2022 at 6:52
  • 'tree' is not installed by default on Ubuntu 18.04 (yes, I know, but there was a hardware problem), but it may have been in earlier versions (there tend to be fewer packages installed by default in later versions). Sep 11, 2022 at 2:15
  • tree -F to differentiate between directories and various file types (uses ls -F style), and tree -F -L <maxdepth> to go to desired directory depth.
    – Aeronautix
    Sep 11, 2022 at 12:34
  • 1
    @JosiahYoder Consider posting a Meta Stack Exchange feature request. @⁠StackOverflowTheCompany doesn't do very much.
    – wizzwizz4
    Sep 11, 2022 at 14:05
  • 2
    Doesn't seem to be available by default on OSX. Sep 12, 2022 at 1:20
19

A nested, bulleted list works fine, as does a code block using ASCII characters to simulate a tree.

But this (like all GUI elements) isn't really something that needs to be copy-pasteable or searchable, so I don't know why it would be a problem to include a screenshot.

19
  • 9
    Because people, often beginners, post horrible screenshots which are low-res / too zoomed in/out with dark mode or in various other ways which make it very hard to read. Formatted text is always formatted text.
    – user438383
    Sep 9, 2022 at 9:35
  • 27
    But beginners also, in my experience, tend to post horribly unformatted and completely unreadable text, so I don't really see why that's an argument in favor of doing either thing. The important thing is making sure that your post is readable and clear. Sep 9, 2022 at 9:51
  • 5
    If you write tests for your solution and the folder structure is part of the problem, it is much easier to have it provided as text. Sep 9, 2022 at 9:57
  • 4
    The folder path could be a crucial part of making a search engine query sufficiently specific to return more than false positives. Sep 9, 2022 at 10:35
  • 8
    It's nice to be able to copy and paste out of the tree output in order to write answers that use filenames that match the example in the question. Sep 9, 2022 at 11:13
  • 4
    @CodyGray at least text is fixable, usually by adding code fences, esp if they use tree then it should be easy to fix. Bad screenshots are unfixable.
    – user438383
    Sep 9, 2022 at 13:47
  • 6
    My favorite is when someone posts a picture they took of their screen with a phone. :}}
    – Mark
    Sep 9, 2022 at 16:32
  • 1
    @user438383 I'd argue the opposite with people posting light mode screenshots burning out my retinas so I can barely read the rest of the post, haha. As you say though, text is correctable and it also defaults to the theme of the reader, not the poster.
    – T1960CT
    Sep 9, 2022 at 16:49
  • 3
    It is content that can be given by text, it should be text.
    – philipxy
    Sep 9, 2022 at 17:51
  • 4
    It's a problem to include it as a screenshot for pretty much all of the reasons in Why should I not upload images of code/data/errors when asking a question?
    – ggorlen
    Sep 10, 2022 at 1:55
  • 3
    @ggorlen almost none of that applies to directory listing. The answer also ends with "Images should only be used to illustrate problems that can't be made clear in any other way, such as to provide screenshots of a user interface", which is pretty much on point here.
    – CodeCaster
    Sep 10, 2022 at 8:40
  • 2
    @CodeCaster If the problem is with the UI, then a screenshot of the UI is appropriate. If the problem is with the files and directories, then a screenshot of the UI showing them is not appropriate, but the actual structure should be given as text.
    – Polygnome
    Sep 10, 2022 at 8:57
  • 2
    @Polygnome "should be" - says who? That's exactly what we're discussing here, you can't pose that as truth without arguments. My arguments for a screenshot are in my answer.
    – CodeCaster
    Sep 10, 2022 at 9:56
  • 2
    @Codecaster Accessibility problems for users with screen readers, lack of copy-paste, inability to detect Unicode/invisible characters to verify a path, difficulty reading the text on certain devices, data costs for mobile users, lack of searchability, potential for broken URLs, inability to improve formatting by editors, waste of bandwidth, dark theme all seem to apply.
    – ggorlen
    Sep 10, 2022 at 15:46
  • 4
    @CodeCaster Directories are critical to reproduce "my build or fopen is failing with file not found, why?" In my experience, users are more likely to bungle a screenshot (showing the wrong directories, collapsed directories, lack of path to the root folder, etc) than they are with tree. But if the user has enough experience to automatically reach for tree, their baseline technical sophistication predisposes them to writing a good question anyway. Directory screenshots can be done correctly but are the tool of choice of the can't-be-bothered. I agree that including both can't hurt though.
    – ggorlen
    Sep 10, 2022 at 18:37
14

One option is to use a bulleted list:

  • assets/
    • css/
      • styles.css
    • img/
      • me.png
    • js/
      • scripts.js
  • pages/
    • about/
      • index.html
    • contact/
      • index.html
  • index.html

While it takes more space to display than a traditional output from a command like tree, it has the benefit of not using a code block to present visual information.

This allows you screen readers to have some hope of parsing the information. It also makes it easier for you to add custom formatting.
For instance, I've called out a particular file, so everyone know which index.html the rest of my pretend comment is about.

Not that it's hard to create such a list by hand, but I have this little Python snippet floating around that I use for such lists for Stack Overflow and other Markdown uses:

import os
def show_dir(dn, level=0):
    files = []
    for cur in sorted(os.listdir(dn)):
        if os.path.isdir(os.path.join(dn, cur)):
            print(" " * (level * 4) + "* " + cur + "/")
            show_dir(os.path.join(dn, cur), level + 1)
        else:
            files.append(" " * (level * 4) + "* " + cur)
    for file in files:
        print(file)
show_dir(".")
7

Benefits of a screenshot from an IDE:

  • It's more concise
  • Less relevant folders can be collapsed
  • IDEs use colors and icons to indicate directory characteristics

Drawbacks of screenshots:

  • You can't search or copy text from them.
  • Some people don't know how snapping/snipping/PrtScr works, so they take pictures of their screen. That of course could be taken as a learning moment of how to do so.

Benefits of ASCII art:

  • It's text, so it can be:
    • Read by users who can't or won't read images
    • Ctrl/Cmd+F'd and Ctrl/Cmd+C'd
    • Better indexed by search engines

Drawbacks of ASCII art:

  • Inconsistent, depends on the command used to generate it.
  • You have to hand-edit it to "collapse" less relevant directories.
  • Some people don't know how markdown works, but that as well should be taken as a learning moment.

But frankly, when is a directory listing relevant to a question or answer?

So all in all: it depends. If the post in question is related to the IDE or to a directory structure that's required for some kind of framework, then a picture might give answerers a quicker overview (because they're familiar with what it should look like) than text.

When it's about a handful of directories, I'd say: use ASCII art (but sparingly, and remove all irrelevant files and folders) unless, again, it's IDE-specific.

I'm not a fan of nested bulleted lists as they take up too much space, but again, you probably don't need to list all your files and folders anyway.

13
  • 7
    A further benefit of a screen shot over text representation is that it is far more likely to be an accurate representation of the structure. Fiddling with a text presentation is a more error prone process. I see that with the presentation of code snippets all the time. Also, the directory structure can be crucial in resolving IDE/framework issues ("I built my web app, but it won't deploy to the server"), and in those cases you could (should?) present it in both forms.
    – skomisa
    Sep 9, 2022 at 13:50
  • I think a benefit from ASCII art is that if the tree is very long (often it can be), you just place it in a scrollable code block and if somebody doesn't really need to see it, it doesn't get in the way Sep 9, 2022 at 18:10
  • 3
    @Marc if you need a scrollable directory listing, I think chances are it's not a minimal example.
    – CodeCaster
    Sep 9, 2022 at 18:40
  • It is text, it should be in the post as text.
    – philipxy
    Sep 11, 2022 at 9:10
  • A UI is also composed of text, so no more screenshots of websites or phone or desktop apps then @philipxy? A screenshot can give additional details that text can't, such as colors and icons. Like I said in my answer. You're basically stating my answer is wrong, without properly explaining why.
    – CodeCaster
    Sep 11, 2022 at 10:23
  • @CodeCaster The FAQ is clear, if the image is what is being addressed then an image is appropriate and if the text content is what is being addressed then it should be given as text--maybe both. By definition "(text-)additional details" are an appropriate reason for an image--your criticism is vacuous. What can be given in text & is relevant should be given as text. The part of your question I am saying is wrong is the part I am saying is wrong. Your sarcasm is unnice & inappropriate.
    – philipxy
    Sep 11, 2022 at 10:49
  • @phil my point is that when the question pertains to directory structure or representation thereof in an IDE, a screenshot may be clearer than a code block. Your disregard for the arguments posed in my answer and pointing to a blanket statement that was obviously written about code is unnice and unnecessary. But again, I'm beginning to question the relevance of this whole discussion, I have read tens of thousands of questions on various subjects and have never encountered this issue.
    – CodeCaster
    Sep 11, 2022 at 11:09
  • "when the question pertains to directory structure or representation thereof in an IDE, a screenshot may be clearer than a code block." Again: Names & structure can & should be expressed as text. If the specifics of the question are re "representation" in pixels/graphics then an image would (also) be appropriate. I have been clear: "if the image is what is being addressed then an image is appropriate and if the text content is what is being addressed then it should be given as text--maybe both". My comments have been neutral, relevant, helpful. Also nice & yours was purposefully not. I'm done.
    – philipxy
    Sep 11, 2022 at 11:12
  • PS For context: The question: "posting screenshots of their directory structure" "showing a logical folder structure" "Let's say you want to add a tree structure for a directory to either a question, answer, or comment, what is the best way to be able to convey the tree diagram in the question and in the comment?" At issue is the (names & tree) structure.
    – philipxy
    Sep 11, 2022 at 11:29
  • @philip my answer is "it depends" and I'm going to leave it at that. You're acting like I'm saying someone should never even mention their paths as text in their question and that everyone should use screenshots instead of text, and that's just absurd and offensive, hence my reactions. I'm not entirely pro one or the other. They're supplementary. I'm not sure what more I can tell about this discussion that's getting more and more abstract and absurd. I'm saying one hardly ever needs an entire directory listing in a question or answer anyway, and I'm also saying text is just fine.
    – CodeCaster
    Sep 11, 2022 at 11:37
  • @philip I'm also saying a screenshot can offer additional details that text can't. I'm not going to comment any further unless someone comes up with a concrete example. If there's a question like "why does my tool complain it can't find the assets folder while it's right there", a screenshot of a file explorer or IDE is just fine, in addition to quoting the error as text, naming the relevant paths as text, and so on.
    – CodeCaster
    Sep 11, 2022 at 11:37
  • 2
    To address your question whether a directory structure is relevant to a question: Yes it can be. There are frameworks out there that expect certain files being in certain folders for it to work properly. For example, in Spring Boot template files have to go in the templates-folder, and code has to be in a subfolder of the main class. So to answer questions why things don't work, I need to know where those files are located. From my personal experience, the easiest way to get that information is by asking for a directory listing. Sep 12, 2022 at 6:22
  • @g00glen00b I know about frameworks expecting files to be in certain locations. In my experience, an IDE screenshot is clearer there, because it shows the folders in a familiar environment. And sure, there are dozens of IDEs all with their own UI, and text is universal and whatnot...
    – CodeCaster
    Sep 13, 2022 at 8:01
6

Sometimes we don't care about the actual structure of the directory tree or the file and directory names it uses, so it doesn't matter much how it's presented. I think that's the scenario that Cody Gray's answer addresses.

But if the question is actually about processing a directory tree, we might as well use the tree provided by the OP. And in that case, the directory tree should be treated as input data, and pasted into a code block, so that answerers (and future readers) can easily recreate the directory structure on their own machines.

IMHO, such directory tree listings should be as simple as possible, just using indentation to indicate nesting. Line drawing chars may look cute, but they can make the processing more complex than it needs to be (but I guess they can usually be cleaned up by a simple search & replace step). And as Laurel mentions, they don't work well on screen readers.


FWIW, I have old Python code in this answer which creates a directory tree from such a listing. ;)

5

For Windows in PowerShell, you can do tree /F and copy-paste the output in code blocks. You can also ignore folders with the -I flag.

> tree /F
Folder PATH listing for volume DATA
Volume serial number is 6A90-4345
D:.
│   db.sqlite3
│   manage.py
│
├───.vscode
│       settings.json
│
├───chat
│   │   urls.py
│   │   views.py
│   │   __init__.py
│   │
│   ├───templates
│   │   └───chat
│   │           index.html
│   │           room.html
│   │
│   └───__pycache__
│           urls.cpython-39.pyc
│           views.cpython-39.pyc
│           __init__.cpython-39.pyc
│
└───mysite
    │   asgi.py
    │   settings.py
    │   urls.py
    │   wsgi.py
    │   __init__.py
    │
    └───__pycache__
            asgi.cpython-39.pyc
            settings.cpython-39.pyc
            urls.cpython-39.pyc
            wsgi.cpython-39.pyc
            __init__.cpython-39.pyc

4
  • 1
    Way too much whitespace.
    – CodeCaster
    Sep 9, 2022 at 13:03
  • 7
    Matter of preference; I think the whitespace used here is excellent for readability. That being said, this more or less repeats user438383's answer (use tree).
    – TylerH
    Sep 9, 2022 at 13:40
  • 2
    @TylerH of course it's a matter of preference, but a listing of a handful of files and directories should not take up that many screen space nor require a scroll bar. It is fancy to look at, but not practical.
    – CodeCaster
    Sep 9, 2022 at 14:35
  • 6
    This is especially bad on VoiceOver. I can't even understand what it's doing; I think it says something in a foreign language for then switches back to English to say the file names. Needless to say, I cannot understand the nesting structure at all when I'm using VoiceOver on your answer.
    – Laurel
    Sep 9, 2022 at 15:27
2

On my Windows computer, I have a Ubuntu WSL app. The tree command does not work and I don't manage installing new software:

Prompt> tree
Command 'tree' not found, but can be installed with:

sudo apt install tree

Prompt> sudo apt install tree
[sudo] password for scampsd:
Reading package lists... Done
Building dependency tree
Reading state information... Done
E: Unable to locate package tree

For this particular case I would suggest the following command:

Prompt> find . -type d

With following result:

.
./test1
./test1/test1.1
./test1/test1.2
./test2
./test2/test2.1
./test3

If you are interested in absolute directory names, you might replace . by the environment variable $PWD, with following result:

/mnt/c/Temp_Folder/a
/mnt/c/Temp_Folder/a/test1
/mnt/c/Temp_Folder/a/test1/test1.1
/mnt/c/Temp_Folder/a/test1/test1.2
/mnt/c/Temp_Folder/a/test2
/mnt/c/Temp_Folder/a/test2/test2.1
/mnt/c/Temp_Folder/a/test3
1
-2

Forcing askers to drop down to the command-line to run commands and copy-paste the output into code fences, just so they can provide context that it would take them a handful of seconds to obtain using their OS's built-in screenshot tools, strikes me as an unnecessarily onerous proposition.

Regarding the argument posited in the comments on another answer, that "bad screenshots cannot be fixed but text can be"... I will, once again, remind the community at large that it is neither our role nor responsibility as curators to attempt to panel-beat a close-worthy question into a good one. If a question is bad enough to warrant closure because it contains little more than an image, then for Heaven's sake just close it and move on with your life. Don't waste everyone's time trying to derive meaning from someone else's poor attempt, because you're more likely than not to make an edit that completely misses what the asker actually intended - and that's not helpful to anyone.

3
  • 3
    To my understanding, this isn't about establishing policy or quality thresholds; this is about guiding someone who wanted to ask as high quality of a question as possible. Sep 11, 2022 at 5:44
  • 2
    It is text, it should be in the post as text.
    – philipxy
    Sep 11, 2022 at 9:10
  • 3
    @philipxy By that "argument" every GUI in existence, no matter how complex, should be represented as text.
    – Ian Kemp
    Sep 11, 2022 at 20:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .