95

I'm always looking for the best way to represent a file structure on my posts.

I generally use this one:

Project
 |
 +-- file 1
 |    
 +-- dir 2
 |  |  
 |  +-- file 2.1
 |    
 +-- dir 3
 |  |  
 |  +-- file 3.1
 |  +-- file 3.2
 |    
 +-- dir 4
 |  |  
 +  |-- dir 4.1

Is there a real convention for those representations? Is there any script (Windows, Linux or web app service) that provide formatting?

Any advice / tool / recommendation / ISO ( ? ;) ) would be appreciated.

Some examples:

0

5 Answers 5

115

Is there any script (windows, linux or webapp service) that provide formatting ?

There's the tree command (exists in both Windows and unix/linux) which does it rather nicely. For example, here's a small portion of the dir structure for Python-2.7.3:

[me@home]$ tree Python-2.7.3 | head -n 11
Python-2.7.3
├── configure
├── configure.in
├── Demo
│   ├── cgi
│   │   ├── cgi0.sh
│   │   ├── cgi1.py
│   │   ├── cgi2.py
│   │   ├── cgi3.py
│   │   ├── README
│   │   └── wiki.py

[me@home]$ tree Python-2.7.3 --charset ascii | head -n 11  # ASCII only
Python-2.7.3
|-- configure
|-- configure.in
|-- Demo
|   |-- cgi
|   |   |-- cgi0.sh
|   |   |-- cgi1.py
|   |   |-- cgi2.py
|   |   |-- cgi3.py
|   |   |-- README
|   |   `-- wiki.py

This of course depends on you having access to the command and an existing directory structure.

A web app I'd like to see is one that takes unordered lists defined using HTML/markdown/textile/etc and spits out an ASCII tree. Better yet, a userscript that converts an in-post markdown list to a such a tree (indented as code). Any takers?


update: Just to get the ball rolling, here's my rather crude attempt at an interactive tree builder: http://jsfiddle.net/WjAk9/7/embedded/result/

I'm pretty sure others can do a lot better.

The gauntlet is thrown :)

12
  • if I have time, it would be a great web/app tool :) ... but don't promise anything (well ... hum ... father/couple life, possible trouble with my wife, etc ... ;) ). Nevermind, thanks for your great reply ! Sep 18, 2012 at 10:11
  • 1
    FWIW tree is also present on windows
    – Alex K
    Sep 18, 2012 at 10:28
  • @AlexK aha! It is indeed. Answer update. Thanks.
    – Shawn Chin
    Sep 18, 2012 at 10:30
  • WOW ! tree is now my new prefered command ! :D Sep 18, 2012 at 10:39
  • 1
    @Jean-RémyRevy I've scratched together a rather n00bish prototype. See updates.
    – Shawn Chin
    Sep 18, 2012 at 11:58
  • 1
    @ShawnChin Wow ! Really really great ! Tested with succes :stackoverflow.com/questions/12475220/… Sep 18, 2012 at 12:36
  • I'm glad you like it. It was a fun distraction :) p.s. just posted an update to tweak the UI. Still ugly, but slightly more usable now.
    – Shawn Chin
    Sep 18, 2012 at 14:16
  • 1
    Or even: jsfiddle.net/WjAk9/14/embedded/result !!!
    – sebastien
    Mar 30, 2014 at 0:07
  • Very useful! For Windows tree command, use tree /F /A folder > out.txt to get all files as well, in ASCII, into file out.txt. Aug 28, 2015 at 10:53
  • 1
    If you're on Mac you may need to do a brew install tree first (if you have Homebrew for Mac). I found it easiest to just mock up the folder structure in your OS and then run tree to generate it for whatever use you need 😉
    – CTS_AE
    Mar 7, 2019 at 0:12
  • @ShawnChin thanks - this tool is great! Oct 11, 2019 at 8:43
  • 3
    Check out tree.nathanfriend.io. Disclaimer: I'm the author :) Dec 10, 2019 at 16:53
6

Pseudo-graphics like below is based on how maven shows the output of dependency:tree command.

In my experience it has been easy to read and type. It naturally matches tree-like file structure:

Project
 |
 +-- file 1
 |    
 +-- dir 2
 |  |  
 |  \-- file 2.1
 |    
 +-- dir 3
 |  |  
 |  +-- file 3.1
 |  \-- file 3.2
 |    
 +-- dir 4
 |  |  
 +  |-- dir 4.1
 ...
1
  • 1
    Great. I'll wait some other ideas, but this one seems to be really good (undertanstable, and commonly used) Sep 18, 2012 at 9:03
4

I made a node module to automate this task: mddir

Usage

node mddir "../relative/path/"

Example

Open the terminal or command prompt and cd into the mddir/src folder.

Usage instructions:

```
$ cd ~/Documents/demo-project
$ pwd
Users/username/Documents/demo-project
$ npm install mddir --save
$ cd node_modules/mddir/src
$ pwd
Users/username/Documents/node_modules/mddir/src
$ ls
mddir.js
$ node mddir "../../../"
// Exports 'directoryList.md' in mddir/src folder
```

If no path is specified mddir will default to three folders above the mddir/src folder (assumes that mddir is installed in project/node_modules/mddir/src).

Currently ignores node_modules, and .git folders.

Example generated markdown file structure 'directoryList.md'

    |-- .bowerrc
    |-- .jshintrc
    |-- .jshintrc2
    |-- Gruntfile.js
    |-- README.md
    |-- bower.json
    |-- karma.conf.js
    |-- package.json
    |-- app
        |-- app.js
        |-- db.js
        |-- directoryList.md
        |-- index.html
        |-- mddir.js
        |-- routing.js
        |-- server.js
        |-- _api
            |-- api.groups.js
            |-- api.posts.js
            |-- api.users.js
            |-- api.widgets.js
        |-- _components
            |-- directives
                |-- directives.module.js
                |-- vendor
                    |-- directive.draganddrop.js
            |-- helpers
                |-- helpers.module.js
                |-- proprietary
                    |-- factory.actionDispatcher.js
            |-- services
                |-- services.cardTemplates.js
                |-- services.cards.js
                |-- services.groups.js
                |-- services.posts.js
                |-- services.users.js
                |-- services.widgets.js
        |-- _mocks
            |-- mocks.groups.js
            |-- mocks.posts.js
            |-- mocks.users.js
            |-- mocks.widgets.js
1
  • I like the look of this one. Thanks.
    – dlink
    Jan 24, 2018 at 20:16
3

I post my own representation, in order to promote it (and even to be voted up if it's clean), but don't hesitate to show your own one.

Project
 |
 +-- file 1
 |    
 +-- dir 2
 |  |  
 |  +-- file 2.1
 |    
 +-- dir 3
 |  |  
 |  +-- file 3.1
 |  +-- file 3.2
 |    
 +-- dir 4
 |  |  
 +  |-- dir 4.1
3
  • 1
    "last leaves" like file 2.1 and 3.2 would likely better use slash instead of plus: \-- file 3.2 - I've seen maven using this style pseudo-graphics to represent dependency tree
    – gnat
    Sep 18, 2012 at 8:01
  • 1
    Yeah, your right ! I'm often working on maven tags, and reply to this kind of posts ! My exemple is even related to Maven .. and I don't thought to look to that ! Sep 18, 2012 at 8:03
  • @gnat don't hesitate to post (even copying my proposal) and adding your recommandation. I'd prefer accept your own answer :) Sep 18, 2012 at 8:44
0

A simple solution for lazy people like me is to use tabs (blanks) only. This can be easily created and changed

/
    etc
        fstab
        passwd
    usr
    opt
5
  • That's what I usually do, too.
    – Jason C
    Apr 26, 2017 at 13:46
  • yeah, the problem begins when you want to put this in code and you have comments formatter :)
    – Line
    Feb 2, 2018 at 12:39
  • @Line I really don't think you should be putting this kind of thing in code. If you want it in docs for your repo you're better off documenting it in markdown or something and linking to it.
    – Thor84no
    May 13, 2020 at 11:44
  • @Thor84no I don't know much about markdown. I was looking for a way to represent it in Javadoc.
    – Line
    May 13, 2020 at 11:49
  • It's better for bulk text, but you can use whatever you want. It's just really noisy to put something like this in Javadoc in my opinion. I think it's much better to add something like @see <a href="<page generated by markdown>#file-structure">File structure</a> than dump a whole file structure like this in code. Personal preference though I suppose.
    – Thor84no
    May 13, 2020 at 16:21

You must log in to answer this question.

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