Tree Directory Structure Generator

Feature Overview

The Tree Directory Structure Generator is an online tool that converts Markdown-formatted lists into visualized tree directory structures. This tool is particularly useful for displaying project structures, document directories, and similar hierarchical content.

How to Use

1. Enter a Markdown-formatted list in the left input box
2. Use the Tab key to indent, Shift+Tab to reduce indentation
3. The generated tree structure is displayed in real-time on the right
4. Click the "Copy" button to copy the generated tree structure to the 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:

1. Real-time parsing and formatting of the input Markdown list
2. Handling Tab key events for indentation functionality
3. Using useMemo to optimize performance and avoid unnecessary recalculations
4. Integrating react-hot-toast to provide feedback on successful copying

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

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.