85

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:

102

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 :)

| improve this answer | |
  • 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 ! – Jean-Rémy Revy Sep 18 '12 at 10:11
  • 1
    FWIW tree is also present on windows – Alex K Sep 18 '12 at 10:28
  • @AlexK aha! It is indeed. Answer update. Thanks. – Shawn Chin Sep 18 '12 at 10:30
  • WOW ! tree is now my new prefered command ! :D – Jean-Rémy Revy Sep 18 '12 at 10:39
  • 1
    @Jean-RémyRevy I've scratched together a rather n00bish prototype. See updates. – Shawn Chin Sep 18 '12 at 11:58
  • 1
    @ShawnChin Wow ! Really really great ! Tested with succes :stackoverflow.com/questions/12475220/… – Jean-Rémy Revy Sep 18 '12 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 '12 at 14:16
  • 1
    Or even: jsfiddle.net/WjAk9/14/embedded/result !!! – sebastien Mar 30 '14 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. – Andreas Reiff Aug 28 '15 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 '19 at 0:12
  • @ShawnChin thanks - this tool is great! – Matthew Fedak Oct 11 '19 at 8:43
  • 3
    Check out tree.nathanfriend.io. Disclaimer: I'm the author :) – Nathan Friend Dec 10 '19 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
 ...
| improve this answer | |
  • 1
    Great. I'll wait some other ideas, but this one seems to be really good (undertanstable, and commonly used) – Jean-Rémy Revy Sep 18 '12 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
| improve this answer | |
  • I like the look of this one. Thanks. – dlink Jan 24 '18 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
| improve this answer | |
  • 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 '12 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 ! – Jean-Rémy Revy Sep 18 '12 at 8:03
  • @gnat don't hesitate to post (even copying my proposal) and adding your recommandation. I'd prefer accept your own answer :) – Jean-Rémy Revy Sep 18 '12 at 8:44
1

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
| improve this answer | |
  • That's what I usually do, too. – Jason C Apr 26 '17 at 13:46
  • yeah, the problem begins when you want to put this in code and you have comments formatter :) – Line Feb 2 '18 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 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 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 at 16:21

You must log in to answer this question.

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