在线目录树工作区
使用在线工作区导入项目结构、隐藏噪音节点、添加注释、预览 ASCII，并复制或下载可直接用于文档的输出。
正在加载在线工作区
目录树编辑器在你的浏览器中运行，因此无需创建账户也能试用完整工作流。
为什么选择 dir-tree
终端 `tree` 命令很适合快速快照。文档需要隐藏构建产物、识别 .gitignore 的过滤、对齐注释、样式控制，以及在 README、文档和 Pull Request 中保持可读的导出结果。
从真实文件夹、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
工作流
dir-tree 会把本地文件夹、ZIP 归档、远程 URL、粘贴的 ASCII 树、JSON、XML、HTML 和 Markdown 列表标准化为一个带样式的项目结构。
从本地文件夹、拖入的目录、GitHub/GitLab 仓库、ZIP 文件、远程 ZIP URL 或已有树输出开始。
应用深度限制、.gitignore 规则、排除模式、排序和隐藏节点，而不会修改磁盘上的文件。
选择 Unicode 或纯 ASCII 连接符，调整缩进和注释对齐方式，然后复制输出或下载 Markdown、TXT 和 JSON。
使用场景
当项目结构需要被说明、评审、教学或粘贴到开发者文档中时，都可以使用 dir-tree。
开源维护者和模板作者
无需逐行手动对齐，就能为 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 解析、可视化编辑、ASCII 渲染和导出都在客户端运行。可选 AI 注释会发送你选择的目录节点、已有注释、生成设置以及你提供的任何提示词。
在浏览器中打开文件夹、解析本地 ZIP 文件、编辑树、渲染 ASCII 并导出结果。
dir-tree 使用名称、层级以及可选显示元数据来生成目录树。
只有当你请求可选 AI 注释时，才会发送你选择的目录节点、已有注释、生成设置和你提供的任何提示词。
可选 AI 数据流
文件内容、源代码、文件大小和修改时间都不会包含在 AI 注释载荷中。
用户评价
开发者、写作者和教育者使用 dir-tree，把文件夹、仓库、ZIP 和已有树输出转成带样式和注释的项目文档。
"README 项目树以前总是我最想避开的部分。现在每次发布后都能更新它，保持样式一致，也不用手动对齐每条注释。"
"我可以导入项目文件夹或仓库、隐藏生成输出、调整树样式，并在文档评审开始前分享一张干净的架构地图。"
"做重构时，带注释的树能让评审者在打开 diff 前快速理解新结构。"
"课堂示例终于能和学生磁盘上看到的文件夹层级一致，也能包含我在练习中需要隐藏的 solution 文件夹。"
"可选 AI 注释能给我们一个有用的初稿，而本地优先边界让内部文档工作流更容易被采用。"
"我们用它把 ZIP 交付物转成可读的文件夹地图，再决定哪些内容应该进入入门文档。"
常见问题
可以。目录树生成器、编辑器、注释工作流和 ASCII 导出工具都可以在浏览器中免费使用，无需创建账户。
可以。选择或拖入本地文件夹后，浏览器会读取文件夹名称和层级，这样你就可以编辑、注释并导出项目结构。
不会。dir-tree 不会上传文件内容或读取源代码。文件夹读取、ZIP 解析、树编辑、ASCII 渲染、复制和导出都在你的浏览器中运行。
dir-tree 可以导入本地文件夹、GitHub/GitLab 仓库 URL、本地 ZIP 文件、远程 ZIP URL，以及任意平台上的 `tree` 命令输出，包括 ASCII 树文本和可用时的 JSON 或 XML 树输出。它也可以把 JSON 树数据、XML、HTML 和 Markdown 列表结构导入为带样式的目录树。
终端 `tree` 命令适合快速快照。当你需要浏览器工作区来隐藏生成目录、应用深度或排除规则、编辑可见节点、自定义树样式、对齐注释并导出可直接用于文档的结果时，dir-tree 更合适。
可以。在树样式面板中，你可以选择 Unicode 或纯 ASCII 连接符、调整缩进、显示根路径、为目录追加斜杠、显示行号或文件元数据，并控制注释在复制或导出前如何对齐。
可以。注释是附加到目录树节点上的简短说明。在导出的 ASCII 树中，它们会显示为对齐的行注释，例如 `// 路由与布局`，让 README 和文档更容易扫读。
可以。AI 注释是可选功能，每天有 5 次免费请求额度，并按 UTC 日期重置。当你进行 AI 注释时，dir-tree 会发送你选择的目录节点、已有注释、生成设置以及你提供的任何提示词。它不会发送任何源代码、文档正文或文件内容。
可以。清理并注释可见树后，你可以复制 ASCII 输出，或下载用于 README、文档页面和 Pull Request 描述的 Markdown、TXT 和 JSON 导出。
可以。你可以限制可见深度、使用 `.gitignore`、应用排除模式、隐藏生成目录、折叠文件夹，并导出用于文档或评审的聚焦目录树。
dir-tree 在现代桌面浏览器中体验最好。基于 Chromium 的浏览器拥有最强的文件夹选择器支持，Firefox 和 Safari 可以使用拖放或文件选择器兜底方案。