feat: add box-drawing character input for treeView diagrams

.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 42 unit tests and 4 AST equivalence integration tests.

demos/treeView.html

@@ -140,6 +140,44 @@ <h2>Folder Names with Spaces</h2>
       </div>
     </div>
 
+    <h2>Box-Drawing Input</h2>
+    <div class="demo">
+      <pre class="source"></pre>
+      <div class="rendered">
+        <pre class="mermaid">
+treeView-beta
+├── src/
+│   ├── components/
+│   │   ├── Button.tsx
+│   │   └── Modal.tsx
+│   ├── utils/
+│   │   └── helpers.ts
+│   └── index.js
+├── docs/
+│   └── README.md
+├── package.json
+└── .gitignore
+        </pre>
+      </div>
+    </div>
+
+    <h2>Box-Drawing with Annotations</h2>
+    <div class="demo">
+      <pre class="source"></pre>
+      <div class="rendered">
+        <pre class="mermaid">
+treeView-beta
+├── src/
+│   ├── App.tsx :::highlight ## main component
+│   ├── index.js ## entry point
+│   └── config.ts
+├── docs/
+│   └── guide.md ## user guide
+└── package.json
+        </pre>
+      </div>
+    </div>
+
     <h2>Custom Config</h2>
     <div class="demo">
       <pre class="source"></pre>

docs/syntax/treeView.md

@@ -36,6 +36,82 @@ 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 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
+```
+
+```mermaid
+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
+```
+
+```mermaid
+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
+```
+
+```mermaid
+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