This post talks about how to generate folder structure in Markdown.

Markdown is plain text content that is easy to read and converted to HTML.

The directory structure is a tree navigation of Nested folders and file types.

There is no support for directory structure creation for Markdown standard syntax.

The showing Directory structure in Markdown helps users to

  • Helps developers to write documentation or README files in Github.
  • Story or bug comments to include a structure with Markdown syntax in JIRA
  • Slack to include comments as nested folder structure
  • Stackoverflow can have support for including questions and answers with parent and child structure

There are many ways we can generate windows like folder structure

How to show folder structure in markdown files.

You can generate folder structure manually by command

and copy the structure and enclose in three backticks symbols in Markdown

├── src
│   ├── controller
│   │   ├── **/*.css
│   ├── views
│   ├── model
│   ├── index.js
├── public
│   ├── css
│   │   ├── **/*.css
│   ├── images
│   ├── js
│   ├── index.html
├── dist (or build
├── node_modules
├── package.json
├── package-lock.json
└── .gitignore

Tree command to generate nested directory structure with Markdown

The tree is a Unix command that displays the nested folder and files and outputs to the console

First, go to the application root using the cd nodeapp command where nodeapp is a node application. Next, run the tree command

tree

It outputs the colorized(if already configured terminal colors) output

Copy the output to the markdown file and enclose it in three backticks(```bash) and end with three backticks.

Another way is to `pre-tag in HTML which preserves the line breaks and spaces.

HTML tags work in HTML files.

Copied above output the directory structure in

and
tags.

Generate folder structure with npm markdown-notes-tree and copy to the documentation file

This is an NPM package that works in node projects First install markdown-notes-tree using below command

npm install -D markdown-notes-tree

Once you installed the package, you can use the markdown-notes-tree command to generate an application

markdown-notes-tree

With this, You have full flexibility to add more information to a generated folder structure

  • You can add ignored files like node_modules
  • Can add folder or file descriptions and titles
  • Include and exclude any file or folder types
  • Easy to generate directory structure and copy to documentation or README.md

There is another npm library you can also use MD-file-tree which also generates and copies to a markdown file.

Conclusion

You can generate the folder structure with any of the above options and finally copy it to documentation markdown files in GitHub Stack Overflow or Jira or slack markdown.