Tree 树形目录可视化生成器

目录树生成器是什么？

目录树生成器（亦称 Markdown 树、文件夹树）将带缩进的 Markdown 列表与 ASCII 目录树（├──、└──、│）双向互转。输出风格与 GNU tree 及 macOS 终端 tree 命令一致，适合写入 README、技术文档与项目结构说明。

功能简介

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

使用方法

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

注意事项

• 输入的 Markdown 列表不应以空格开头
• 使用 Tab 键可以方便地调整缩进级别
• 生成的树形结构会自动忽略空行
• 可以从任意一侧进行编辑，另一侧会自动更新

常见问题（精选）

目录树生成器是什么？

它将缩进 Markdown 列表渲染为 ASCII 文件夹树，或反向把树形文本转回列表；依据 CommonMark 列表项 的嵌套规则识别层级。

是否免费？数据会上传吗？

完全免费；编辑与转换均在浏览器本地完成，目录内容不会上传到服务器。

输出风格与 tree 命令一致吗？

是。使用 ├──、└──、│ 等字符，与 GNU tree 及常见终端输出兼容，可直接粘贴到 Markdown 或 README。

技术实现

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

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

API

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

常见问题

Q: 目录树生成器是什么？

目录树生成器将带缩进的 Markdown 列表渲染为 ASCII 文件夹树（├──、└──、│），也支持从树形文本反向生成列表。层级由缩进深度决定，无需手写连接线字符。

Q: 是否免费？数据会上传服务器吗？

完全免费。编辑与转换均在浏览器本地完成，你输入的目录名称与结构不会上传到任何服务器。

Q: 支持什么风格的树形输出？

工具支持经典的 ASCII 树形风格，使用 ├──、└──、│ 等字符绘制连接线，与 Linux/macOS 系统中 GNU tree 命令的输出格式一致。这种格式兼容所有文本编辑器和终端，适合粘贴到 Markdown 文档、README 文件或代码注释中。

Q: 如何快速创建多层嵌套结构？

你可以通过缩进来表示层级关系，每增加一级缩进就代表子节点深入一层。在编辑区域输入文件和文件夹名称，使用 Tab 键或空格控制缩进层级即可快速构建出多层嵌套的目录结构。工具会自动识别缩进深度并生成对应的树形连接线。

Q: 可以从已有的项目目录导入吗？

目前工具主要支持手动编辑方式创建树形结构。如果你需要从已有项目目录生成树形图，可以先在终端中执行 tree 命令（如 tree -I node_modules）获取目录结构输出，然后将结果粘贴到右侧 ASCII 编辑区继续调整。本工具更适合从零开始设计和规划目录结构。