TreeView Diagram

TreeView diagrams display hierarchical data as an indented tree, similar to a file browser. Each node is a quoted string, and indentation alone determines parent-child relationships. TreeView is a beta diagram type and requires Mermaid 11.14.0 or later (bundled with Mermaid Studio 2026.2.2+).

Syntax Highlighting

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.

Armada Dark

Islands Dark

Islands Light

Quick Syntax Reference

treeView-beta
title Project Structure
"root"
  "src"
      "main"
          "index.ts"
          "app.ts"
          "utils.ts"
      "test"
          "app.test.ts"
          "utils.test.ts"
  "docs"
      "README.md"
      "CONTRIBUTING.md"
  "package.json"
  "tsconfig.json"

Key elements:

• Start with treeView-beta
• Optionally include title, accTitle, and accDescr metadata before any node rows
• Every node name must be a quoted string (double or single quotes)
• Indentation determines hierarchy - nested nodes are children of the less-indented node above

IDE Support

Mermaid Studio provides basic (beta) support for TreeView diagrams:

• Syntax highlighting for keywords, node names, and comments
• Code folding to collapse parent nodes with children, and to collapse multi-line accDescr { ... } blocks
• Smart quote handling that inserts the matching closing quote when you type an opening " or '
• Comment toggling with %% line comments (bound to the standard Comment with Line Comment action)
• Markdown code fence support - TreeView is recognized inside mermaid / mmd fenced code blocks in Markdown files, with full syntax highlighting and validation
• Validation annotators for the two most common mistakes upstream Mermaid rejects

Validation Rules

Two annotators flag invalid TreeView syntax in the editor:

• Unquoted node names are flagged as errors. Upstream Mermaid requires all node names to be quoted strings. A quick-fix named Wrap node name in double quotes is offered to convert unquoted text into a valid node:

  treeView-beta
  "root"
      src     %% ERROR: node names must be quoted

  Invoking the quick-fix on src rewrites it to "src".

• Metadata after the first node row is flagged as an error. The title, accTitle, and accDescr statements must appear before any node content:

  treeView-beta
  "root"
      "src"
  title Project Structure   %% ERROR: 'title' must appear before any node rows

Theme Variables

TreeView exposes a dedicated treeView object under themeVariables for customizing node labels and connecting lines:

Variable	Description	Example
labelFontSize	Font size for node labels	"16px"
labelColor	Text color for node labels (CSS color)	"#333"
lineColor	Color of connecting lines (CSS color)	"#888"

Set them in the YAML frontmatter:

---
config:
  themeVariables:
    treeView:
      labelFontSize: '"14px"'
      labelColor: '"#fbbf24"'
      lineColor: '"#60a5fa"'
---
treeView-beta
"root"
  "src"
      "main.ts"
  "docs"

Mermaid Studio validates these keys against the TreeView JSON schema, so you get completion and type checking inside the frontmatter block.

Beta feature

TreeView is a beta diagram type in both Mermaid.js and Mermaid Studio. Syntax and theme variables may evolve in upstream releases.

For complete syntax details, see the Mermaid TreeView documentation.