How does npm draw the dependency tree?

Question

npm does a nifty job of drawing a package's dependency hierarchy as a tree in the console:

$ npm ls
[email protected]
├── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└── [email protected]

How does npm do this?

Answer 1

npm uses the Unicode box drawing characters (U+2500-2800) to draw the pretty lines of the tree.

To draw a similar tree in your own application, the best route is probably to use the same module that npm itself uses – archy.

var archy = require('archy');
var s = archy({
  label : 'beep',
  nodes : [
    'ity',
    {
      label : 'boop',
      nodes : [
        {
          label : 'o_O',
          nodes : [
            {
              label : 'oh',
              nodes : [ 'hello', 'puny' ]
            },
            'human'
          ]
        },
        'party\ntime!'
      ]
    }
  ]
});
console.log(s);

Outputs

beep
├── ity
└─┬ boop
  ├─┬ o_O
  │ ├─┬ oh
  │ │ ├── hello
  │ │ └── puny
  │ └── human
  └── party
      time!

Answer 2

For list your folders and files you can use tree-cli:

https://www.npmjs.com/package/tree-cli

Just install:

npm install -g tree-cli

And use inside your folder:

tree -L 2, -d

Answer 3

You could also use console2 which does almost the same thing as archy does, but gives you useful additional features like improved stack traces, object inspection and more:

Feature screenshot

^{Full disclosure: I'm the author of the repository}