Open source software | custom output using a visual interface annotated project file tree structure

Scanning directories, analyzing file structure and statistics, adding comments to arbitrary files, exporting annotated tree text and a variety of other data formats make writing technical documents much easier.

If you need it, you’ll love it. If you don’t need it, you probably never will.

Making: folder – explorer
Yards cloud: folder – explorer

The original intention of developing this software is to facilitate me to write my project documents. According to the feedback from users, part of the content needs to show the functions of the important directories of the project in detail.

I looked around and found that there are two kinds of projects that can export this kind of tree structure text: scripts shared on the web and online tools that can read information from open source repositories.

My general requirements are 1 scan directory 2 edit comments 3 export nice structure 4 can hide files I wish to ignore. None of the existing solutions were convenient, so I took a break to make this software.

download

macOS | windows | Linux

releases

function

Scans the specified directory (support for drag and drop) and scans again the specified directory in the current result
Display tree statistics of file structure, support to add comments, and hide the contents of a single file or folder
File Type Statistics
File volume distribution statistics
Export text formed tree structure chart, support annotation and automatic alignment, support custom content format
Export JSON files and XML files for use by other software or programs
Export xMIND structure diagrams to support content formatting of custom nodes, labels, and comments
Custom export file name preset
Annotation information memory function
Backup and import of personalized Settings
Other rich Settings options

Usage scenarios

Project documentation, along with file structure and comments, makes it easier for others to get started on the project
Present the course table of contents. If you are a lecturer, you can present all chapters of your course in a tree structure in one sitting
Measure the size distribution of files in a resource folder, such as analyzing your photos folder or seeing how much space each movie occupies on your disk

Technical solution

The base project generated by VUE-CLI3 is converted into a desktop project that can be packed using electron using vue-CLI-plugin-electric-Builder.

Detailed Functions

All demos are based on the following directory structure:

├─.ds_Store ├─.Browserslistrc ├─.gitignore ├─ Readme.md ├─ Bass.config.js ├─ Package.json ├─ Postcss.config.js ├─public │ ├ ─ the favicon. Ico │ └ ─ index. The HTML ├ ─ SRC │ ├ ─ App. Vue │ ├ ─ assets │ │ └ ─ sys │ │ └ ─ logo │ │ └ ─ w200. PNG │ ├ ─ components │ │ └ ─ the HelloWorld. Vue │ ├ ─ layout │ │ └ ─ headerAside │ │ ├ ─ components │ │ │ ├ ─ value │ │ │ │ ├ ─ index. The vue │ │ │ │ └ ─ style.css. SCSS │ │ │ └ ─ the header │ │ │ ├ ─ index. The vue │ │ │ └ ─ style.css. SCSS │ │ └ ─ index. The vue │ └ ─ main. Js └ ─ yarn. The lockCopy the code

The editor

Expand and collapse nodes

Remove node

Add comments

Exported results:

├ ─ README. Md -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / introduce ├ ─ Babel. Config. Js ├ ─ package. The json ├ ─ postcss. Config. Js ├ ─ public -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / Public resources │ ├ ─ the favicon. Ico │ └ ─ index. The HTML ├ ─ SRC │ ├ ─ App. Vue -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / root component │ ├ ─ assets │ │ └ ─ sys │ │ └ ─ logo │ │ └ ─ w200. PNG │ ├ ─ components │ │ └ ─ the HelloWorld. Vue │ ├ ─ layout │ │ └ ─ headerAside │ │ ├ ─ components │ │ │ ├ ─ value │ │ │ │ ├ ─ index. Vue │ │ │ │ └ ─ style.css. SCSS │ │ │ └ ─ the header │ │ │ ├ ─ index. The vue │ │ │ └ ─ style.css. SCSS │ │ └ ─ index. The vue │ └ ─ main. Js └ ─ yarn. The lockCopy the code

Files or directories that are collapsed and hidden are not exported, and the tree structure is recalculated based on the collapsed state.
Remarks have the memory function. For example, if a comment is added after the/A directory is scanned, the first comment is automatically restored after the/B directory is scanned again.