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

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

Directory structure is a tree navigation of Nested folders and files types.

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

Showing Directory structure in markdown helps users to

  • Helps developers to write a documentation or README files in Github.
  • Story or bug comments to include structure with markdown syntax in JIRA
  • Slack to include comments as nested folder structure
  • Stackoverflow can have a support for include question 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 generates folder structure manually command

and copy 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 markdonw

Tree is an unix command which displays the nested folder and files and outputs to console

First go to application root using cd nodeapp command where nodeapp is an node application. Next run tree command $ tree

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

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

And another ways is to pre tag in html which preserves the line breaks and spaces.

Html tags works in html files.

Copied above output the directory strurcture in and tags.

Generate folder structure with npm markdown-notes-tree and copy to 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 markdown-notes-tree command to generate in an application

markdown-notes-tree

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

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

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

Conclusion

You can geenrate the folder strucutre with any of the above options and finally copy to documentation markdown files in Github or stackoverflow or jira or slack markdown