File trees#

A filetree fence turns a directory listing into a navigable tree with folder and file icons. Paste the output of tree, or write the structure with plain indentation.

```filetree
my-docs/
├── docs/                 # Markdown sources
│   ├── index.md
│   ├── guide/
│   │   ├── install.md
│   │   └── usage.md
│   └── assets/
│       └── logo.svg
├── overrides/            # Template overrides (optional)
│   └── main.html
├── pyproject.toml
└── mkdocs.yml            # Site configuration
```

my-docs/
- docs/Markdown sources
  - index.md
  - guide/
    install.md
    usage.md
  - assets/
    logo.svg
- overrides/Template overrides (optional)
  - main.html
- pyproject.toml
- mkdocs.ymlSite configuration

Rules#

A name ending in /, or a name with children, is a folder. Click a folder to fold it.
Text after # is a comment and is aligned in a column.
File icons follow the extension: code, text, configuration, data, images and archives.
Indentation by spaces works as well as box-drawing characters.

Plain indentation#

```filetree title="Package layout"
src/
  mkdocs_sumi/
    plugin.py      # The MkDocs plugin
    theme/         # Jinja templates and assets
tests/
```

Package layout

src/
- mkdocs_sumi/
  - plugin.pyThe MkDocs plugin
  - theme/Jinja templates and assets
tests/

The tree is built at build time from plain HTML <details> elements, so it needs no JavaScript and prints fully expanded.