A TreeView diagram displays hierarchical data as a directory-style tree — the kind of structure you see in a file browser or a table of contents sidebar. Parent nodes appear above their children; children are indented to show they belong to the parent above them.

TreeView diagrams are useful for showing folder structures, website navigation hierarchies, category trees, organisational charts, and any nested structure where parent–child relationships are the main point of interest.

This diagram type is experimental and requires Mermaid v11.14 or later.

treeView-beta
    "Travel Blog"
        "Europe"
            "Italy"
                "Rome"
                "Florence"
                "Amalfi Coast"
            "France"
                "Paris"
                "Provence"
        "Asia"
            "Japan"
                "Tokyo"
                "Kyoto"
            "Thailand"
                "Bangkok"
                "Chiang Mai"
        "About"
            "My Story"
            "Contact"

Hierarchy is controlled entirely by indentation — each additional level of indentation creates a deeper branch in the tree. All node labels must be wrapped in double quotes.

```mermaid
treeView-beta
    "Travel Blog"
        "Europe"
            "Italy"
                "Rome"
                "Florence"
                "Amalfi Coast"
            "France"
                "Paris"
                "Provence"
        "Asia"
            "Japan"
                "Tokyo"
                "Kyoto"
            "Thailand"
                "Bangkok"
                "Chiang Mai"
        "About"
            "My Story"
            "Contact"
```

For more TreeView diagram syntax see the TreeView diagram documentation at mermaid.js.org