Tree Structure Visualization Generator

Feedback

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

1. Bidirectional Conversion: Edit Markdown format on the left, ASCII format on the right. Content automatically syncs between formats.
2. 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
3. ASCII Editing:
   • Edit the ASCII tree structure directly on the right side
   • Changes will automatically update to corresponding Markdown format on the left
4. 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:

1. Bidirectional real-time conversion between Markdown lists and ASCII tree structures
2. Handling Tab key events for indentation functionality
3. Using useMemo and useCallback to optimize performance and avoid unnecessary recalculations
4. Integrating react-hot-toast to provide feedback on successful copying
5. 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.