67

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:

84

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

  • 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
  • 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 at 0:12
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
    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
3

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
  • 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
  • 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
  • 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

You must log in to answer this question.

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