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:
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 :)
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 😉
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
...
I made a node module to automate this task: mddir
node mddir "../relative/path/"
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.
|-- .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 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
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
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
@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.