Simple text trees from arrays using Unicode box-drawing characters. For your terminal and console displays.
array-treeify transforms nested arrays into text trees with proper branching characters. Perfect for CLIs, debug outputs, or anywhere you need to visualize hierarchical data.
treeify([
'Lumon Industries',
[
'Board of Directors',
['Natalie (Representative)'],
'Departments',
[
'Macrodata Refinement (Cobel)',
['Milchick', 'Mark S.', ['Dylan G.', 'Irving B.', 'Helly R.']],
],
'Other Departments',
[
'Optics & Design',
'Wellness Center',
'Mammalians Nurturable',
'Choreography and Merriment',
],
],
])Lumon Industries
├─ Board of Directors
│ └─ Natalie (Representative)
├─ Departments
│ └─ Macrodata Refinement (Cobel)
│ ├─ Milchick
│ └─ Mark S.
│ ├─ Dylan G.
│ ├─ Irving B.
│ └─ Helly R.
└─ Other Departments
├─ Optics & Design
├─ Wellness Center
├─ Mammalians Nurturable
└─ Choreography and Merriment
npm install array-treeifyfunction treeify(input: TreeInput, options?: {
chars?: TreeChars, // Custom characters for the tree
plain?: boolean // Use plain whitespace instead of Unicode box-drawing characters
}): stringarray-treeify accepts a simple, intuitive array structure that's easy to build and manipulate:
import {treeify} from 'array-treeify'
// Basic example
const eagan = [
'Kier Eagan',
[
'...',
[
'...',
'Jame Eagan',
['Helena Eagan']
],
'Ambrose Eagan',
],
]
console.log(treeify(eagan))
/*
Kier Eagan
├─ ...
│ ├─ ...
│ └─ Jame Eagan
│ └─ Helena Eagan
└─ Ambrose Eagan
*/
// Using custom characters
const resultCustomChars = treeify(
eagan,
{ chars: { branch: '├• ', lastBranch: '└• ', pipe: '│ ', space: ' ' },
})
/*
Kier Eagan
├• ...
│ ├• ...
│ └• Jame Eagan
│ └• Helena Eagan
└• Ambrose Eagan
*/
// Using plain whitespace characters
console.log(treeify(eagan, { plain: true }))
/*
Kier Eagan
...
...
Jame Eagan
Helena Eagan
Ambrose Eagan
*/
// Nested example
const orgChart = [
'Lumon Industries',
[
'Board of Directors',
['Natalie (Representative)'],
'Department Heads',
[
'Cobel (MDR)',
['Milchick', 'Mark S.', ['Dylan G.', 'Irving B.', 'Helly R.']]
]
]
]
console.log(treeify(orgChart))
/*
Lumon Industries
├─ Board of Directors
│ └─ Natalie (Representative)
└─ Department Heads
└─ Cobel (MDR)
├─ Milchick
└─ Mark S.
├─ Dylan G.
├─ Irving B.
└─ Helly R.
*/Disclaimer: The exported
TreeInputtype (Array<string | TreeInput>) is intentionally flexible to support dynamic and programmatic tree construction. However, TypeScript cannot enforce at the type level that the first element is a string. This requirement is checked at runtime by thetreeifyfunction, which will throw an error if the first element is not a string. Please ensure your input arrays follow this convention.
The treeify function accepts arrays with the following structure:
- First element must be a string (the root node)
- Subsequent elements can be strings (nodes at same level) or arrays (children of previous node)
- Arrays can be nested to any depth
['root', 'sibling', ['child1', 'child2']] // Root with 2 children
['root', ['child'], 'sibling', ['nephew', 'niece']] // 2 root nodes with children
['root', ['child', ['grandchild']]] // Grandchildrenchars: Custom characters for the tree. Defaults to Unicode box-drawing characters.plain: When true, uses plain whitespace characters instead of Unicode box-drawing characters.
MIT © tbeseda