在线目录树编辑器
导入项目结构、隐藏无关节点、添加对齐注释，并复制或下载可直接用于 README 和技术文档的结果。
正在加载在线工作区
目录树编辑器在你的浏览器中运行，因此无需创建账户也能试用完整工作流。
为什么选择 dir-tree
`tree` 命令适合快速查看目录。用于 README 或技术文档时，可以隐藏 node_modules、构建产物等无关内容，添加对齐注释，再导出可直接粘贴的项目结构。
从真实文件夹、GitHub/GitLab 仓库、ZIP 文件、远程 ZIP URL 或已有树输出开始，不必再手工拼接项目结构说明。
文件夹导入 · 仓库 URL · ZIP · 远程 ZIP · 树输出
之前
README 草稿 - 复制的终端输出 - 旧文件夹列表 - 手动清理备注
之后
my-app/ ├── app/ // 路由 ├── components/ // 可复用 UI └── package.json // 依赖项
从发布视图中移除 node_modules、构建产物、缓存和生成目录，而不修改磁盘上的文件。
深度 · .gitignore · 排除规则 · 隐藏节点
之前
$ tree -L 3 . ├── node_modules/ ├── .next/ ├── dist/ ├── src/ └── package.json
之后
my-app/ ├── src/ // 应用代码 └── package.json // 依赖项
添加手动注释或可选 AI 草稿，然后对齐注释并调整树样式，让输出更容易扫读。
树样式 · 手动注释 · 列对齐
之前
├── auth.ts // auth? ├── api.ts // client └── format.ts // helper
之后
├── auth.ts // sign-in flow ├── api.ts // API client └── format.ts // text formatting
选择适合 README、文档或 Pull Request 的树样式后，复制干净的 ASCII，下载 Markdown 或 TXT，或导出 JSON。
树样式 · Markdown · TXT · JSON
之前
粘贴原始输出 修正间距 包成代码块 下次重复一遍
之后
可直接发布 复制到剪贴板 下载 Markdown 下载 TXT 导出 JSON
工作流
从本地文件夹、GitHub/GitLab 仓库、ZIP 或已有 tree 输出开始，将项目结构导入同一个编辑器，再进行过滤、样式调整、注释和导出。
从本地文件夹、拖入的目录、GitHub/GitLab 仓库、ZIP 文件、远程 ZIP URL 或已有树输出开始。
应用深度限制、.gitignore 规则、排除模式、排序和隐藏节点，而不会修改磁盘上的文件。
选择 Unicode 或纯 ASCII 连接符，调整缩进和注释对齐方式，然后复制输出或下载 Markdown、TXT 和 JSON。
使用场景
为 README 整理项目结构、在 Pull Request 中说明重构、为入门文档绘制仓库地图，或在教学材料中展示文件夹层级。
开源维护者和模板作者
无需逐行手动对齐，就能为 README.md 生成干净的文件夹结构。隐藏构建产物、添加简短说明，并选择匹配仓库文档的树样式。
starter-kit/ ├── app/ // routes and layouts ├── components/ // reusable UI ├── lib/ // shared utilities └── README.md // setup guide
技术写作者和开发者布道师
把项目文件夹转成架构地图，用对齐注释和一致的树样式说明路由、模型、中间件、组件和共享工具。
api-service/ |-- routes/ // HTTP 端点 | |-- auth.ts // JWT 与会话 | `-- users.ts // 用户 CRUD |-- models/ // 数据库 schema `-- middleware/ // 请求管线
评审重构的工程师
在评审者打开 diff 前，先提供一张新结构、可见范围和关键文件夹说明的快速地图。
src/ ├── auth/ // 登录流程 ├── hooks/ // 共享 hooks ├── utils/ // 共享辅助函数 └── README.md // 结构说明
计算机科学讲师和课程创建者
为教程、入门材料和课堂内容创建文件夹层级示例，同时提供可视结构和一致的 ASCII 输出。
lesson-01/ |-- starter/ // student begins here | `-- index.js // entry point `-- solution/ // instructor reference
对比
`tree` 命令适合快速生成目录快照；需要导入真实项目、隐藏生成目录、编辑结构、添加对齐注释并导出文档时，使用 dir-tree。
| 能力 | 终端 `tree` | tree.nathanfriend.com | dir-tree |
|---|---|---|---|
| 读取真实本地目录 | 是 | 否 | 是 |
| 基于浏览器，无需安装 | 否 | 是 | 是 |
| 支持本地和远程 ZIP | 否 | 否 | 是 |
| 导入 GitHub/GitLab 仓库 URL | 否 | 否 | 是 |
| 导入已有 ASCII / JSON / XML 树 | 仅输出 | 有限 | 是 |
| 可视化编辑和隐藏节点 | 否 | 仅编辑 | 是 |
| 树样式自定义 | 命令参数和手动清理 | 基础视觉选项 | 连接符样式、缩进、根路径显示、元数据和注释模板 |
| 注释列对齐 | 否 | 否 | 是 |
| 手动和可选 AI 注释 | 否 | 否 | 是 |
| 可直接用于文档的 Markdown / TXT / JSON 导出 | 原始输出 | 生成 ASCII | 带样式和注释 |
隐私边界
本地文件夹读取、本地 ZIP 解析、目录树编辑、渲染、复制和导出都在浏览器本地完成。只有主动使用 AI 注释时，才会发送选定的目录节点、已有注释、生成设置和提示词。
在浏览器中打开文件夹、解析本地 ZIP 文件、编辑树、渲染 ASCII 并导出结果。
dir-tree 使用名称、层级以及可选显示元数据来生成目录树。
只有当你请求可选 AI 注释时，才会发送你选择的目录节点、已有注释、生成设置和你提供的任何提示词。
可选 AI 数据流
文件内容、源代码、文件大小和修改时间都不会包含在 AI 注释载荷中。
用户评价
开发者、写作者和教育者使用 dir-tree，把文件夹、仓库、ZIP 和已有树输出转成带样式和注释的项目文档。
"README 项目树以前总是我最想避开的部分。现在每次发布后都能更新它，保持样式一致，也不用手动对齐每条注释。"
"我可以导入项目文件夹或仓库、隐藏生成输出、调整树样式，并在文档评审开始前分享一张干净的架构地图。"
"做重构时，带注释的树能让评审者在打开 diff 前快速理解新结构。"
"课堂示例终于能和学生磁盘上看到的文件夹层级一致，也能包含我在练习中需要隐藏的 solution 文件夹。"
"可选 AI 注释能给我们一个有用的初稿，而本地优先边界让内部文档工作流更容易被采用。"
"我们用它把 ZIP 交付物转成可读的文件夹地图，再决定哪些内容应该进入入门文档。"
常见问题
导入本地文件夹、GitHub/GitLab 仓库、ZIP 或已有目录树，隐藏生成目录、添加注释，再选择 Unicode 或纯 ASCII 连接符。完成后可以复制结果或导出 Markdown，整个过程不会修改原文件。
选择或拖入本地文件夹后，浏览器会在本地读取文件和文件夹名称及层级，你可以继续过滤、编辑、添加注释并导出目录结构，文件内容不会上传。
dir-tree 可以导入本地文件夹、GitHub/GitLab 仓库 URL、本地 ZIP、远程 ZIP URL、`tree` 命令输出、JSON、XML、HTML 和 Markdown 列表，并将它们转换成可编辑的目录树。
不会。本地文件夹读取、本地 ZIP 解析、目录树编辑、渲染、复制和导出都在浏览器中完成。可选 AI 注释只发送选定的目录节点、已有注释、设置和提示词，不会发送源代码或文件内容。
终端 `tree` 命令适合快速生成目录快照。dir-tree 提供可编辑的浏览器工作区，可以隐藏生成目录、应用深度和排除规则、自定义树样式、对齐注释，并导出可直接用于文档的结果。
可以。你可以为任意文件或文件夹添加说明，让注释紧随路径显示，或排列成对齐列。对齐排版支持自适应、全局单列和按父目录策略，导出的 ASCII 或 Unicode 目录树会保留所选排版。
Unicode 目录树使用 `├──`、`└──` 等连接符，视觉层级通常更清晰；纯 ASCII 使用基础字符，更适合旧终端或受限文本环境。两种样式都支持注释、复制和导出。
可以。AI 注释是可选功能，每天有 5 次免费请求额度，并按 UTC 日期重置。当你进行 AI 注释时，dir-tree 会发送你选择的目录节点、已有注释、生成设置以及你提供的任何提示词。它不会发送任何源代码、文档正文或文件内容。
可以。你可以限制可见深度、使用 `.gitignore`、应用排除模式、隐藏生成目录、折叠文件夹，并导出用于文档或评审的聚焦目录树。