DirTreeist

Create a directory Structure Diagram from a markdown lists.

Installation

yarn

yarn add @k4a_l/dirtreeist

npm

npm install @k4a_l/dirtreeist

Demo

https://www.k4a.me/tools/dirtreeist

Example

Basic

Input

- /components
  　- App.tsx
  　- App.css
- config.json
- /utils
  　- converter.ts
  　- parser.ts

Output

├─/components
│　├─App.tsx
│　└─App.css
├─config.json
└─/utils
　　└─converter.ts
　　└─parser.ts

Only one top

Input

- /root
  - /components
    　- App.tsx
    　- App.css
  - config.json
  - /utils
    　- converter.ts
    　- parser.ts

Output

/root
├─/components
│　├─App.tsx
│　└─App.css
├─config.json
└─/utils
　　├─converter.ts
　　└─parser.ts

Sequential listings

Consecutive lists are connected.

Input

- a
  - b
  - c
- d

- 1
  - 2
    - 3
      - 4

Output

├─ a
│ 　 ├─ b
│ 　 └─ c
├─ d
└─ 1
　　 └─ 2
　　　　 └─ 3
　　　　　　 └─ 4

Another element comes in between

If another element is sandwiched in between, a "only" split lists is output.

Input

- a
  - b
  - c
- d

sometext

- 1
  - 2
    - 3
      - 4

Output

├─ a
│　├─ b
│　└─ c
└─ d

└─ 1
　　└─ 2
　　　　└─ 3
　　　　　　└─ 4

How to use

TypeScript

const markdown = `
- /components
　　- App.tsx
　　- App.css
- config.json
- /utils
　　- converter.ts
　　- parser.ts
`

import dirtreeist, { Options } from '@k4a_l/dirtreeist'

const options: Options = {}
const outputs = dirtreeist(markdown, options) // DirTree[] => output[]

console.log(outputs)

or

import { parse, convert, Options } from '@k4a_l/dirtreeist'

const dirTrees = parse(markdown) // markdown => DirTree[]

const options: Options = {}
const outputs = dirTrees.map((dirTree) => convert(dirTree, options)) // DirTree[] => output[]

console.log(outputs)

Type

Structure

type DirNode = {
  name: string
  children: DirNode[]
}

type DirTree = DirNode[]

Options

type Options = {
  treeType?: 'normal' | 'bold' | 'ascii'
  emptyBeforeUpperHierarche?: boolean
  spaceBeforeName?: boolean
  spaceSize?: number
}

Description of options

treeType

default:normal

normal

│
├─
│
└─

bold

┃
┣━
┃
┗━

ascii

|
+
|
+-

emptyLineBeforeUpperHierarchy : boolean

default:false

true

(true)
├─/components
│　├─App.tsx
│　└─App.css
│
├─config.json
└─/utils
　　└─converter.ts
　　└─parser.ts

spaceBeforeName : boolean

default: false

true

├─ /components
│　├─ App.tsx
│　└─ App.css
├─ config.json
└─ /utils
　　└─ converter.ts
　　└─ parser.ts

spaceSize : number

default:2

4

├──/components
│　　├──App.tsx
│　　└──App.css
├──config.json
└──/utils
　　　└──converter.ts
　　　└──parser.ts