feat: add tab support, documentation, and changeset

- Tabs are now expanded to spaces instead of being rejected

- Added Box-Drawing Input section to treeView documentation

- Created changeset for changelog entry

Author: notionparallax

.changeset/add-treeview-box-drawing-input.md

@@ -0,0 +1,7 @@
+---
+'mermaid': minor
+---
+
+feat: add box-drawing character input support for treeView diagrams
+
+Adds an alternative input syntax for treeView-beta diagrams using box-drawing characters (├──, └──, │). The parser auto-detects box-drawing format and converts it to the standard indent-based representation before parsing. Error messages remap line numbers back to the original input. Includes 41 unit tests and 4 AST equivalence integration tests.

packages/mermaid/src/diagrams/treeView/boxDrawingPreprocessor.spec.ts

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 import {
-  isBoxDrawingFormat,
-  preprocessBoxDrawing,
-  remapErrorLines,
+    isBoxDrawingFormat,
+    preprocessBoxDrawing,
+    remapErrorLines,
 } from './boxDrawingPreprocessor.js';
 
 describe('boxDrawingPreprocessor', () => {
@@ -384,12 +384,24 @@ describe('boxDrawingPreprocessor', () => {
         );
       });
 
-      it('should throw on tab characters', () => {
+      it('should normalize tabs to spaces', () => {
         const input = ['treeView-beta', '├──\tfile.txt'].join('\n');
+        const { text } = preprocessBoxDrawing(input);
+        const lines = text.split('\n');
+        expect(lines[1]).toBe('    file.txt');
+      });
 
-        expect(() => preprocessBoxDrawing(input)).toThrow(
-          'Line 2: Box-drawing format does not support tab characters'
+      it('should handle tab-indented box-drawing lines', () => {
+        // Tab expands to 4 spaces, so `\t├──` puts the branch at column 4 → depth 2
+        const input = ['treeView-beta', '├── src/', '\t├── index.ts', '\t└── utils.ts'].join(
+          '\n'
         );
+        const { text } = preprocessBoxDrawing(input);
+        const lines = text.split('\n');
+        expect(lines[1]).toBe('    src/');
+        // depth 2 = 8 spaces of indent
+        expect(lines[2]).toBe('        index.ts');
+        expect(lines[3]).toBe('        utils.ts');
       });
 
       it('should throw on indented line without box chars in box mode', () => {

packages/mermaid/src/diagrams/treeView/boxDrawingPreprocessor.ts

@@ -93,7 +93,8 @@ export function preprocessBoxDrawing(input: string): PreprocessResult {
     if (DECORATION_ONLY.test(line)) {
       continue;
     }
-    contentLineTexts.push(line);
+    // Normalize tabs early so segment-width inference uses consistent column positions
+    contentLineTexts.push(line.replace(/\t/g, '    '));
   }
 
   // If no box-drawing characters found → return unchanged
@@ -150,13 +151,11 @@ export function preprocessBoxDrawing(input: string): PreprocessResult {
       continue;
     }
 
-    // Reject tabs in box-drawing mode
-    if (line.includes('\t')) {
-      throw new Error(`Line ${origLineNo}: Box-drawing format does not support tab characters`);
-    }
+    // Normalize tabs to spaces for consistent column-position math
+    const normalized = line.replace(/\t/g, '    ');
 
     // Find branch character (├, └, ┣, ┗)
-    const branchMatch = BRANCH_CHAR.exec(line);
+    const branchMatch = BRANCH_CHAR.exec(normalized);
 
     if (branchMatch?.index !== undefined) {
       // Has branch char → compute depth from column position
@@ -165,13 +164,13 @@ export function preprocessBoxDrawing(input: string): PreprocessResult {
 
       // Extract content: skip branch char, then dashes, then spaces
       let pos = branchCol + 1;
-      while (pos < line.length && DASH_CHAR.test(line[pos])) {
+      while (pos < normalized.length && DASH_CHAR.test(normalized[pos])) {
         pos++;
       }
-      while (pos < line.length && line[pos] === ' ') {
+      while (pos < normalized.length && normalized[pos] === ' ') {
         pos++;
       }
-      const content = line.slice(pos).trimEnd();
+      const content = normalized.slice(pos).trimEnd();
 
       if (!content) {
         throw new Error(
@@ -183,10 +182,10 @@ export function preprocessBoxDrawing(input: string): PreprocessResult {
       outputLines.push(indent + content);
       outLineNo++;
       lineMap.set(outLineNo, origLineNo);
-    } else if (ALL_BOX_CHARS.test(line)) {
+    } else if (ALL_BOX_CHARS.test(normalized)) {
       // Has box chars but no branch char — decorative, skip
       continue;
-    } else if (/^\s+/.test(line)) {
+    } else if (/^\s+/.test(normalized)) {
       // Leading whitespace without box chars in box mode → likely mixed format
       throw new Error(
         `Line ${origLineNo}: Unexpected indentation without box-drawing characters. ` +

packages/mermaid/src/docs/syntax/treeView.md

@@ -30,6 +30,50 @@ treeView-beta
             "file.js"
 ```
 
+## Box-Drawing Input
+
+As an alternative to indentation, you can use box-drawing characters to define the tree structure. The parser auto-detects the format — no extra keyword or config is needed. This is how most file tree diagrams are drawn already, so you can turn those into diagrams into Mermaid diagrams with very little effort.
+
+Both standard (`├──`, `└──`, `│`) and heavy (`┣━━`, `┗━━`, `┃`) Unicode variants are supported.
+
+```mermaid-example
+treeView-beta
+├── src/
+│   ├── index.ts
+│   └── utils.ts
+├── package.json
+└── README.md
+```
+
+All annotations work the same way — just append them after the label:
+
+```mermaid-example
+treeView-beta
+├── src/
+│   ├── App.tsx :::highlight icon(react) ## main component
+│   └── index.ts ## entry point
+├── .env ## environment variables
+├── Dockerfile
+└── package.json
+```
+
+Depth is inferred from the column position of the branch character, so deeper nesting works naturally:
+
+```mermaid-example
+treeView-beta
+├── packages/
+│   ├── mermaid/
+│   │   ├── src/
+│   │   │   ├── parser.ts
+│   │   │   └── renderer.ts
+│   │   └── package.json
+│   └── parser/
+│       └── src/
+└── README.md
+```
+
+> **Note:** If a parse error occurs, line numbers in the error message refer to your original input. Tab characters are automatically expanded to spaces.
+
 ## Annotations
 
 ### Highlighting with :::class