Tree Directory Structure Generator
Feature Overview
The Tree Directory Structure Generator is an online tool that enables bidirectional conversion between Markdown-formatted lists and ASCII tree structures. This tool is particularly useful for displaying project structures, document directories, and similar hierarchical content.
How to Use
- Bidirectional Conversion: Edit Markdown format on the left, ASCII format on the right. Content automatically syncs between formats.
- Markdown Editing:
- Enter a Markdown-formatted list in the left input box
- Use Tab to indent, Shift+Tab to reduce indentation
- Use + or - as list item markers for each line
- ASCII Editing:
- Edit the ASCII tree structure directly on the right side
- Changes will automatically update to corresponding Markdown format on the left
- Quick Copy: Click the "Copy" button on either side to copy the content in the respective format to your clipboard
Example
Input the following Markdown list:
+ react-app
+ config
+ webpack.config.js
+ components
+ Modal
+ Form
+ Table
+ pages
+ home
+ app
+ help
+ package.json
+ package-lock.json
It will generate the following tree structure:
react-app
├── config
│ └── webpack.config.js
├── components
│ ├── Modal
│ ├── Form
│ └── Table
├── pages
│ ├── home
│ ├── app
│ └── help
├── package.json
└── package-lock.json
Technical Implementation
This tool is primarily implemented using React and TypeScript. Core functionalities include:
- Bidirectional real-time conversion between Markdown lists and ASCII tree structures
- Handling Tab key events for indentation functionality
- Using
useMemo
anduseCallback
to optimize performance and avoid unnecessary recalculations - Integrating
react-hot-toast
to provide feedback on successful copying - Utilizing
useLocalStorage
to persist user input and retain previous content
API
Currently, this tool does not provide an API interface and is only available as an online tool.
Notes
- The input Markdown list should not start with spaces
- Use the Tab key to easily adjust indentation levels
- The generated tree structure automatically ignores empty lines
- You can edit from either side, and the other side will update automatically
With this simple yet powerful tool, you can easily create beautiful tree directory structures, improving the readability of your documents and the visualization of your project structures.