Tree 树形目录可视化生成器
建议反馈
Markdown
ASCII

在左侧编辑Markdown格式，在右侧编辑ASCII格式，内容会自动同步转换

在左侧编辑使用 Tab 键增加缩进，Shift+Tab 减少缩进，每行使用 + 或 - 作为列表项标记；在右侧编辑ASCII树结构时，另一侧会自动转换。

快速尝试:

树形目录结构生成器

功能简介

树形目录结构生成器是一个在线工具，可以在 Markdown 格式的列表和 ASCII 树形结构之间进行双向转换。这个工具特别适用于展示项目结构、文档目录等场景。

使用方法

  1. 双向转换：在左侧编辑 Markdown 格式，在右侧编辑 ASCII 格式，内容会自动同步转换
  2. Markdown 编辑：
    • 在左侧输入框中输入 Markdown 格式的列表
    • 使用 Tab 键进行缩进，Shift+Tab 减少缩进
    • 每行使用 + 或 - 作为列表项标记
  3. ASCII 编辑：
    • 在右侧直接编辑 ASCII 树形结构
    • 修改后左侧会自动更新为对应的 Markdown 格式
  4. 快速复制：点击各侧的"复制"按钮可将对应格式的内容复制到剪贴板

示例

输入以下 Markdown 列表：

+ react-app
  + config
    + webpack.config.js
  + components
    + Modal
    + Form
    + Table
  + pages
    + home
    + app
    + help
  + package.json
  + package-lock.json

将生成如下树形结构：

react-app
├── config
│   └── webpack.config.js
├── components
│   ├── Modal
│   ├── Form
│   └── Table
├── pages
│   ├── home
│   ├── app
│   └── help
├── package.json
└── package-lock.json

技术实现

本工具主要使用 React 和 TypeScript 实现，核心功能包括：

  1. 双向实时转换 Markdown 列表和 ASCII 树形结构
  2. 处理 Tab 键事件实现缩进功能
  3. 使用 useMemo 和 useCallback 优化性能，避免不必要的重复计算
  4. 集成 react-hot-toast 提供复制成功的反馈
  5. 使用 useLocalStorage 持久化存储用户输入，保留上次编辑内容

API

目前本工具不提供 API 接口，仅作为在线工具使用。

注意事项

通过这个简单而强大的工具，您可以轻松创建美观的树形目录结构，提高文档的可读性和项目结构的可视化程度。