Mermaid Tree View Cheat Sheet

Indentation

The indentation is the hierarchy, and a trailing slash marks a directory.

treeView-beta
    my-project/
        src/
            index.js
        package.json
        README.md

The box-drawing characters work too, and the parser tells the two forms apart on its own.

treeView-beta
├── src/
│   ├── index.ts
│   └── utils.ts
├── package.json
└── README.md

After the name: three hashes marks it, icon() gives it an icon, and two hashes add a note.

treeView-beta
├── src/
│   ├── App.tsx :::highlight icon(logos:react) ## main component
│   └── index.ts ## entry point
├── package.json