Folder tree generator: vẽ sơ đồ cây thư mục cho README trong vài giây
Folder tree generator online này tạo sơ đồ cây thư mục dạng ├── └── để dán vào README, tài liệu kỹ thuật, báo cáo bàn giao hay câu hỏi trên diễn đàn. Bạn dán danh sách đường dẫn, văn bản thụt lề, hoặc chọn thẳng một thư mục trên máy; công cụ sắp xếp, bỏ qua node_modules, .git theo mẫu glob, giới hạn độ sâu và có thể hiện dung lượng. Thư mục chỉ được đọc trong trình duyệt, không file nào được tải lên.
Tính năng nổi bật
- Ba cách nhập: mỗi dòng một đường dẫn (kết quả find . hay git ls-files), văn bản thụt lề bằng dấu cách hoặc tab, hoặc dán lại một cây ASCII có sẵn để chỉnh
- Chọn thư mục trên máy bằng hộp chọn của trình duyệt, đọc tên và dung lượng file mà không tải nội dung lên đâu
- Bốn kiểu kết quả: cây ├── └── │, ASCII thuần |-- `-- cho môi trường không hiển thị được Unicode, danh sách Markdown lồng nhau, thụt lề thuần
- Sắp xếp thư mục trước rồi theo tên, so sánh số tự nhiên (file2 trước file10) và đúng thứ tự chữ tiếng Việt
- Bỏ qua theo mẫu glob: node_modules, .git, dist, *.log, docs/**/*.png; tùy chọn vẫn hiện tên mục bị bỏ qua
- Giới hạn độ sâu, dấu / sau tên thư mục, hiện dung lượng file và tổng dung lượng thư mục
- Giữ ghi chú sau dấu # trên từng dòng, ví dụ index.tsx # trang chủ
- Sao chép, tải file .txt hoặc .md (tự bọc khối ```text), xử lý mượt hàng chục nghìn mục
Vì sao không vẽ cây thư mục bằng tay
Vẽ tay một cây thư mục trong README nghĩa là gõ từng ký tự ├── và │, canh từng khoảng trắng, và mỗi lần thêm hay đổi tên một file lại phải canh lại cả nhánh. Lệnh tree có sẵn trên Linux nhưng không có mặc định trên Windows và macOS, còn khi có thì liệt kê cả node_modules hàng nghìn dòng nếu quên thêm tham số lọc. Công cụ này nhận đầu vào ở dạng bạn đang có (danh sách đường dẫn, dàn ý thụt lề, hoặc thư mục thật), lọc bỏ thư mục không cần, sắp xếp nhất quán và cho ra cây đúng định dạng ngay lập tức, nên bạn có thể cập nhật sơ đồ mỗi khi cấu trúc dự án thay đổi.
Lợi ích khi sử dụng
- README và tài liệu bàn giao có sơ đồ cấu trúc dự án rõ ràng, người mới đọc hiểu nhanh
- Cập nhật sơ đồ trong vài giây khi dự án thay đổi, không canh lại khoảng trắng
- Không liệt kê nhầm hàng nghìn file trong node_modules hay .git
- Dùng được trên mọi hệ điều hành, không cần cài lệnh tree
- Tên file tiếng Việt từ macOS được chuẩn hóa về dạng NFC, hiển thị và tìm kiếm đúng
- Thư mục riêng tư được đọc ngay trên máy, không có file nào rời khỏi trình duyệt
Cách tạo cây thư mục
- 1Dán danh sách vào ô Đầu vào: mỗi dòng một đường dẫn như src/app/page.tsx, hoặc dàn ý thụt lề mỗi cấp 2 hay 4 dấu cách; hoặc bấm Chọn thư mục trên máy.
- 2Kiểm tra dòng Kiểu văn bản để chắc công cụ hiểu đúng dạng đầu vào, đổi thủ công nếu cần.
- 3Sửa danh sách Bỏ qua (mỗi dòng một mẫu) để loại node_modules, .git, thư mục build hay file tạm.
- 4Chọn kiểu cây, cách sắp xếp, độ sâu tối đa và các tùy chọn như dấu / sau thư mục, dung lượng.
- 5Bấm Sao chép rồi dán vào README, hoặc Tải .md để có sẵn khối code Markdown.
Ba dạng đầu vào công cụ hiểu được
Dạng đường dẫn: mỗi dòng là một đường dẫn tương đối, phân cách bằng / hoặc \, có thể có ./ ở đầu như kết quả của find . hay git ls-files; thư mục trung gian được tự tạo, dòng kết thúc bằng / là thư mục rỗng. Dạng thụt lề: mỗi cấp lùi vào 2 hoặc 4 dấu cách hay một tab, có thể có gạch đầu dòng -, * như dàn ý Markdown; mục có mục con tự được hiểu là thư mục. Dạng cây ASCII: dán lại kết quả của lệnh tree hoặc của chính công cụ này để sắp xếp lại, lọc bớt hay đổi kiểu. Chế độ Tự nhận diện chọn dạng phù hợp dựa trên nội dung và cho biết đang hiểu là dạng nào.
Ví dụ kết quả
Với bốn dòng src/app/page.tsx, src/app/layout.tsx, src/lib/utils.ts và package.json, kiểu cây mặc định cho ra dòng gốc là dấu chấm, bên dưới là ├── src/ chứa │ ├── app/ (gồm layout.tsx và page.tsx) và │ └── lib/ (gồm utils.ts), cuối cùng là └── package.json. Thư mục đứng trước file, các mục cùng cấp xếp theo tên nên layout.tsx đứng trước page.tsx dù nhập sau. Chuyển sang Danh sách Markdown, cùng dữ liệu thành các gạch đầu dòng lồng nhau mỗi cấp lùi 2 dấu cách, hiển thị được cả ở những nơi không dùng phông chữ đơn cách.
Mẫu bỏ qua hoạt động thế nào
Mỗi dòng trong ô Bỏ qua là một mẫu theo kiểu .gitignore rút gọn. Mẫu không có dấu / như node_modules hay *.log so với tên của từng mục ở mọi cấp. Mẫu có dấu / như docs/**/*.png hay /secret.txt so với đường dẫn tính từ gốc. Dấu * khớp mọi ký tự trừ /, ** khớp qua nhiều cấp thư mục, ? khớp đúng một ký tự. Mẫu kết thúc bằng / như build/ chỉ áp dụng cho thư mục. So khớp không phân biệt chữ hoa thường. Khi một thư mục bị bỏ qua, toàn bộ nội dung bên trong cũng bị bỏ và được tính vào số mục bỏ qua; bật Vẫn hiện tên mục bị bỏ qua nếu muốn người đọc biết thư mục đó tồn tại. Mẫu phủ định bắt đầu bằng ! của .gitignore chưa được hỗ trợ.
Chọn thư mục trên máy: những gì trình duyệt cho phép
Nút Chọn thư mục dùng hộp chọn thư mục chuẩn của trình duyệt. Trình duyệt giao cho trang danh sách file kèm đường dẫn tương đối và dung lượng, công cụ chỉ đọc hai thông tin đó, không mở nội dung file và không gửi gì lên máy chủ. Một số trình duyệt hỏi xác nhận trước khi cho trang xem danh sách file. Hạn chế cần biết: thư mục rỗng không xuất hiện vì trình duyệt chỉ liệt kê file; trình duyệt vẫn liệt kê cả node_modules, .git trước khi công cụ lọc, nên chọn thư mục dự án lớn có thể mất vài giây. Với dự án rất lớn, nhanh hơn là chạy git ls-files trong terminal rồi dán kết quả vào.
Dán cây thư mục vào README đúng cách
Cây dùng ký tự ├── │ └── cần hiển thị bằng phông chữ đơn cách mới thẳng hàng, nên trong Markdown hãy đặt trong khối code ba dấu backtick. Bật tùy chọn Bọc trong khối ``` hoặc dùng nút Tải .md, công cụ tự thêm ```text ở đầu và ``` ở cuối. Kiểu ASCII thuần |-- `-- dùng khi nơi nhận không hiển thị đúng ký tự vẽ khung Unicode, ví dụ một số terminal cũ hay email văn bản thuần. Kiểu danh sách Markdown phù hợp với wiki, Notion, Confluence vốn hiển thị danh sách lồng nhau đẹp hơn khối code.
Giới hạn của công cụ
Dung lượng chỉ có khi chọn thư mục trên máy; văn bản dán vào không chứa kích thước file. Dung lượng thư mục là tổng các file được liệt kê, không tính file bị bỏ qua. Thư mục rỗng trong thư mục đã chọn không hiện ra. Mẫu bỏ qua là bản rút gọn của .gitignore, không hỗ trợ phủ định ! và không tự đọc file .gitignore của dự án. Với dạng thụt lề, dòng lùi sâu hơn dòng trước quá một cấp được đưa về cấp liền kề và có cảnh báo. Tên file có ký tự # theo sau bởi dấu cách sẽ bị hiểu là bắt đầu ghi chú. Độ sâu tối đa giới hạn ở 50 cấp.
Câu hỏi thường gặp (FAQ)
Folder tree generator là gì?
Là công cụ tạo sơ đồ cây thư mục dạng văn bản với các ký tự ├── └── │, thường dùng trong README, tài liệu kỹ thuật và câu hỏi trên diễn đàn để mô tả cấu trúc dự án.
Chọn thư mục trên máy có tải file lên không?
Không. Trình duyệt chỉ đưa cho trang danh sách tên file, đường dẫn tương đối và dung lượng. Công cụ không đọc nội dung file và không gửi dữ liệu lên máy chủ.
Vì sao thư mục rỗng không hiện khi chọn thư mục?
Hộp chọn thư mục của trình duyệt chỉ liệt kê file, nên thư mục không chứa file nào không có trong danh sách. Bạn có thể thêm thư mục rỗng bằng cách dán dạng văn bản với dấu / ở cuối tên.
Làm sao lấy danh sách file của dự án để dán vào?
Trong thư mục dự án có Git, chạy git ls-files để lấy mọi file đang được theo dõi (đã tự loại những gì trong .gitignore). Trên Linux, macOS có thể dùng find . -type f; trên Windows PowerShell dùng Get-ChildItem -Recurse -Name.
Làm sao bỏ qua node_modules và .git?
Hai mục này có sẵn trong ô Bỏ qua cùng dist, .next, .DS_Store. Bạn thêm mẫu khác mỗi dòng một mẫu, ví dụ *.log, coverage, build/.
Mẫu bỏ qua có giống .gitignore không?
Gần giống: hỗ trợ *, **, ?, mẫu có / so với đường dẫn từ gốc, mẫu kết thúc bằng / chỉ áp dụng cho thư mục. Chưa hỗ trợ mẫu phủ định bắt đầu bằng !.
Có hiện dung lượng file được không?
Có khi bạn chọn thư mục trên máy: bật Hiện dung lượng để thấy kích thước từng file và tổng của từng thư mục. Văn bản dán vào không có thông tin dung lượng.
Dán cây vào README bị lệch hàng thì sửa thế nào?
Đặt cây trong khối code ``` để hiển thị bằng phông chữ đơn cách. Bật Bọc trong khối ``` hoặc tải file .md, công cụ tự thêm phần bọc này.
Có tạo cây kiểu ASCII thuần không dùng ký tự đặc biệt không?
Có, chọn kiểu ASCII thuần để dùng |-- và `-- thay cho ├── và └──, phù hợp với nơi không hiển thị được ký tự vẽ khung.
Tôi có thể chỉnh lại một cây thư mục đã có không?
Có. Dán cây có sẵn (từ lệnh tree hoặc từ README) vào ô nhập, công cụ đọc lại cấu trúc để bạn sắp xếp lại, lọc bớt, giới hạn độ sâu hay đổi sang kiểu khác.
Thư mục có hàng chục nghìn file thì sao?
Công cụ xử lý được hàng chục nghìn mục trong chưa tới một giây trên máy tính thông thường. Phần chậm nhất thường là trình duyệt liệt kê file khi chọn thư mục lớn; hãy dùng mẫu bỏ qua và giới hạn độ sâu để kết quả gọn.
Ghi chú bên cạnh tên file có được giữ không?
Có. Viết ghi chú sau dấu # (có dấu cách phía trước), ví dụ index.tsx # trang chủ. Tắt tùy chọn Giữ ghi chú # nếu không muốn hiện.
Tên file tiếng Việt có bị lỗi dấu không?
Không. macOS lưu tên file tiếng Việt ở dạng dấu tách rời (NFD); công cụ chuẩn hóa về NFC để hiển thị, sắp xếp và sao chép đúng như chữ gõ thông thường.
Từ khóa liên quan
- folder tree generator online
- folder tree generator
- tạo cây thư mục
- sơ đồ cây thư mục
- directory tree generator
- ascii tree generator
- project structure readme
- cấu trúc thư mục dự án
- tree command online
- file tree markdown
- vẽ cây thư mục cho readme
- folder structure diagram
- git ls-files tree
- ignore node_modules tree
- tree ascii ├── └──
- directory structure markdown
- liệt kê file trong thư mục
- tạo sơ đồ thư mục online
