Как создать дерево файлов для README на GitHub

Дерево файлов — небольшая ASCII-схема папок и файлов вашего проекта — делает README гораздо удобнее для чтения. В этом руководстве показаны три надёжных способа его создать и как вставить его, чтобы ветви правильно выравнивались на GitHub.

Самый быстрый способ: онлайн-генератор ASCII-дерева

Без командной строки и установки. Постройте структуру папок визуально, переключайтесь между коннекторами Unicode и простыми ASCII и копируйте аккуратную схему в один клик.

Открыть генератор ASCII-дерева

Способ 1 — Команда tree

В каждой крупной операционной системе есть (или можно установить) команда tree, которая выводит структуру каталога в виде текста.

В macOS или Linux установите её при необходимости (brew install tree или sudo apt install tree) и запустите в папке проекта. Используйте -I, чтобы игнорировать лишние папки:

В Windows команда встроена. Запустите её в папке, которую хотите задокументировать:

Скопируйте вывод из терминала и перейдите к разделу «Чтобы всё отображалось на GitHub» ниже.

macOS / Linux
tree -I 'node_modules|.git|dist'

Способ 2 — Онлайн-генератор ASCII-дерева

Если вы не хотите работать с командной строкой или документируете структуру, которой ещё нет на диске, онлайн-генератор — самый простой вариант.

Вы добавляете папки и файлы в визуальном редакторе, меняете их порядок перетаскиванием, выбираете коннекторы Unicode (├──) или простые ASCII (|--) и копируете результат. Ничего не загружается — всё работает в браузере.

Способ 3 — Расширение VS Code

Несколько расширений VS Code (ищите «file tree to text») добавляют по правому клику на папке действие «Сгенерировать дерево файлов» с выводом в Markdown.

Это удобно, когда вы работаете в редакторе, хотя контроля над тем, какие папки исключать, меньше, чем у команды tree или специализированного генератора.

Чтобы всё отображалось на GitHub

Как бы вы ни создали дерево, GitHub сохранит выравнивание ветвей только при использовании моноширинного шрифта. Оберните дерево в блок кода — три обратные кавычки на отдельной строке до и после:

Без ограждений кода GitHub отрисовывает текст пропорциональным шрифтом, и символы │ и ├── сбиваются с выравнивания.

В вашем README.md
```
my-project
├── src
│   └── index.ts
└── README.md
```

Коннекторы Unicode и ASCII

Коннекторы Unicode (├──, │, └──) выглядят аккуратнее и отображаются на GitHub и в современных редакторах нативно — используйте их по умолчанию.

Простые ASCII-коннекторы (|--, |, \--) используют только базовые символы. Выбирайте их для старых терминалов, писем в виде обычного текста или сред без надёжной поддержки Unicode.

Пример вывода
my-project
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md

Часто задаваемые вопросы

Как исключить node_modules из дерева?
В команде tree передайте -I для игнорирования шаблонов, например tree -I "node_modules|.git|dist". В онлайн-генераторе просто не добавляйте эти папки.
Почему моё дерево файлов сбито на GitHub?
Почти всегда это потому, что дерево не находится внутри блока кода. Оберните его в три обратные кавычки, чтобы GitHub использовал моноширинный шрифт.
Можно ли создать дерево файлов, ничего не устанавливая?
Да — используйте бесплатный онлайн-генератор ASCII-дерева, работающий полностью в браузере. Вы строите структуру визуально и копируете результат.