TreeView Diagram Demo

Each example shows the input syntax (left) alongside the rendered output (right).

Basic TreeView (quoted labels)

treeView-beta
"docs"
    "build"
    "make.bat"
    "Makefile"
    "out"
    "source"
        "build"
        "static"
            "_templates"
            "div. Files"

Bare Labels with Icons

treeView-beta
my-project/
    src/
        components/
            Button.tsx
            Header.tsx
        App.tsx
        index.js
    .gitignore
    package.json
    README.md

Annotations: :::class, icon(), ##

treeView-beta
my-project/
    src/
        App.tsx :::highlight icon(react) ## main component
        index.js ## entry point
        styles.css
    data/
        model.bin icon(database)
    .env ## environment variables
    Dockerfile
    package.json

Folder Names with Spaces

treeView-beta
My Project/
    Source Files/
        App.tsx :::highlight ## main component
        index.js ## entry point
    My Documents/
        meeting notes.md
        project plan.md ## Q3 roadmap
    .gitignore
    README.md

Box-Drawing Input

treeView-beta
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Modal.tsx
│   ├── utils/
│   │   └── helpers.ts
│   └── index.js
├── docs/
│   └── README.md
├── package.json
└── .gitignore

Box-Drawing with Annotations

treeView-beta
├── src/
│   ├── App.tsx :::highlight ## main component
│   ├── index.js ## entry point
│   └── config.ts
├── docs/
│   └── guide.md ## user guide
└── package.json

Custom Config

---
config:
    treeView:
        rowIndent: 80
        lineThickness: 3
    themeVariables:
        treeView:
            labelFontSize: '20px'
            labelColor: '#FF0000'
            lineColor: '#00FF00'
---
treeView-beta
"packages"
    "mermaid"
        "src"
    "parser"