ContextQMD
Back to Mermaid

TreeView Diagram (v+)

docs/syntax/treeView.md

11.0.02.1 KB
Original Source

Warning

THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.

Please edit the corresponding file in /packages/mermaid/src/docs/syntax/treeView.md.

TreeView Diagram (v<MERMAID_RELEASE_VERSION>+)

Introduction

A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.

Syntax

The structure of the tree depends only on indentation.

treeView-beta
    "<folder name>"
        "<file name>"
        "<folder name>"
            "<file name>"
    "<file-name>"

Examples

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

Config Variables

PropertyDescriptionDefault Value
rowIndentIndentation for each row10
paddingXHorizontal padding of row5
paddingYVertical padding of row5
lineThicknessThickness of the line1

Theme Variables

PropertyDescriptionDefault Value
labelFontSizeFont size of the label'16px'
labelColorColor of the label'black'
lineColorColor of the line'black'