feat: add box-drawing character input for treeView diagrams

[notionparallax]

📑 Summary

Adds an alternative input syntax for treeView-beta diagrams using box-drawing characters (├──, └──, │). This is a follow-up to #7527 and addresses the original request in #7516.

Most file-tree diagrams people encounter already use box-drawing characters, so this allows them to be pasted directly into Mermaid with minimal effort:

treeView-beta
├── src/
│   ├── index.ts
│   └── utils.ts
├── package.json
└── README.md

Simple Box-drawing:

Box-drawing with annotations:

📏 Design Decisions

• Auto-detection: The parser automatically detects box-drawing format by scanning for Unicode box-drawing characters. No config flag or keyword variant needed.
• Preprocessor pattern: A boxDrawingPreprocessor.ts converts box-drawing input to indent-based format before Langium parsing — this keeps the Langium grammar unchanged and avoids parser complexity.
• Error line remapping: Parse errors report line numbers from the user's original input, not the transformed output.
• Tab support: Tabs are normalized to 4 spaces, so copy-pasted content with mixed whitespace works.
• Heavy variants: Both standard (├──, └──, │) and heavy (┣━━, ┗━━, ┃) Unicode box-drawing characters are supported.
• Depth inference: Tree depth is computed from the column position of branch characters, with segment width auto-inferred from the first indented branch.

📋 Tasks

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts.

Files Changed

File	Purpose
boxDrawingPreprocessor.ts	Core preprocessor (~170 lines) — converts box-drawing → indent format
boxDrawingPreprocessor.spec.ts	42 unit tests covering format detection, conversion, edge cases
parser.ts	Integration — wraps parse in try/catch with preprocessor + error remapping
parser.spec.ts	4 AST equivalence integration tests (same tree via both input formats)
demos/treeView.html	2 demo sections for manual visual testing
src/docs/syntax/treeView.md	Documentation for box-drawing input syntax
.changeset/add-treeview-box-drawing-input.md	Changeset (minor)

[changeset-bot]

🦋 Changeset detected

Latest commit: 4f05e82

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	4f05e82
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69fc8528ca6b010008359da3
😎 Deploy Preview	https://deploy-preview-7721--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7721

mermaid

npm i https://pkg.pr.new/mermaid@7721

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7721

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7721

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7721

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7721

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7721

commit: 4f05e82

[codecov]

Codecov Report

❌ Patch coverage is 0.71942% with 138 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.29%. Comparing base (98b3155) to head (4f05e82).
⚠️ Report is 116 commits behind head on develop.

Files with missing lines	Patch %	Lines
...id/src/diagrams/treeView/boxDrawingPreprocessor.ts	0.78%	126 Missing ⚠️
packages/mermaid/src/diagrams/treeView/parser.ts	0.00%	12 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7721      +/-   ##
==========================================
- Coverage     3.30%   3.29%   -0.01%     
==========================================
  Files          560     562       +2     
  Lines        58344   58491     +147     
  Branches       873     874       +1     
==========================================
+ Hits          1928    1929       +1     
- Misses       56416   56562     +146     

Flag	Coverage Δ
unit	3.29% <0.71%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/treeView/parser.ts	0.00% <0.00%> (ø)
...id/src/diagrams/treeView/boxDrawingPreprocessor.ts	0.78% <0.78%> (ø)

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	11 changed	May 7, 2026, 12:40 PM

[ashishjain0512]

[sisyphus-bot]

Lovely PR — paste-and-render of tree-style output is exactly the kind of usability win that scales, and the way you've built it (preprocessor outside the Langium grammar) keeps the risk surface as small as it can be. Thanks especially for the screenshot-rich description and the file-by-file breakdown.

What's working well

• 🎉 [praise] Architecture is exactly right. Preprocessing box-drawing input into the existing indent format, instead of teaching the Langium grammar a second syntax, isolates the entire change to one file with no grammar regen, no risk to the indent-format parse path, and a single integration point in parser.ts:51-62. This is the kind of change other diagram types should crib from when they want to add alternate input forms.
• 🎉 [praise] The AST-equivalence test pattern in parser.spec.ts:932 is gold. Asserting that box-drawing input produces the same collectNodes snapshot as the equivalent indent input is the cleanest possible proof of correctness — and you cover flat lists, nested directories, annotations, and 4-level nesting with both formats. Beautiful.
• 🎉 [praise] Comprehensive preprocessor coverage. 42-ish unit tests in boxDrawingPreprocessor.spec.ts covering format detection, depth inference, heavy Unicode variants (┣━━/┗━━/┃), :::class / icon() / ## annotation passthrough, comments, blank lines, accessibility metadata, decoration-only lines, line-mapping, error cases, and real tree command output. Plenty of tree-shaped corner cases got thought through.
• 🎉 [praise] Thoughtful UX details. Auto-detection (no flag/keyword variant required), parse-error line remapping back to the user's original input, tab→4-space normalization, the helpful error message on mixed format ("In box-drawing format, use ├── or └── prefixes for indented nodes.") — these are all the small things that make the difference between "works" and "feels good to use."
• 🎉 [praise] Both source and generated docs updated. packages/mermaid/src/docs/syntax/treeView.md and the generated docs/syntax/treeView.md are in sync, demo HTML at demos/treeView.html:142-181 adds two examples, changeset is present with the right minor bump and feat: prefix.
• 🎉 [praise] Clean changeset narrative. Describing the preprocessor, error remapping, and test count up front makes the release notes actually useful.

Nits

• 🟢 [nit] Silent drop of unrecognized box-character lines. In boxDrawingPreprocessor.ts:860-862, once box-drawing format is detected, any line that contains box-drawing characters but no branch character (├└┣┗) hits the continue branch and is silently dropped. The intent is clearly "skip vertical-bar decoration lines like │ │" — but it would also drop a user's top-level node name that happens to contain a horizontal line character (e.g., "Section ─ A.txt"). This is an exotic case, but silent drops are a particularly nasty failure mode because the user has no way to know their content was lost. Worth considering: only continue if the line consists entirely of box characters and whitespace (i.e., the existing DECORATION_ONLY test, but extended to include ─/━), and otherwise fall through to passthrough or a clearer error.
• 🟢 [nit] Small typo in the docs: packages/mermaid/src/docs/syntax/treeView.md:32 has "you can turn those into diagrams into Mermaid diagrams" — the second "into" is duplicated. The same line appears in the generated docs/syntax/treeView.md so a docs rebuild after the source fix will pick it up automatically.
• 🟢 [nit] Test-count drift between changeset and PR description. The changeset says "Includes 41 unit tests and 4 AST equivalence integration tests"; the PR description's file table says "42 unit tests." Whichever is correct — they should match.

Suggestions

• 💡 [suggestion] Inconsistent-indent guard. inferSegmentWidth picks the column of the first indented branch char and uses it as the divisor for every line. If a user happens to mix 2-space and 4-space indentation in the same input (more likely than you'd think with tools like eza --tree and lsd --tree that pick different defaults), depth inference will round to the wrong level for the off-rhythm rows. Worth considering a follow-up that either (a) checks each branch column is actually a multiple of segmentWidth and surfaces a friendly error, or (b) tracks the most-common gap between consecutive indented rows. Definitely out of scope for this PR — just a thought for a follow-up if real-world inputs surface it.

Security

No XSS or injection concerns. The preprocessor is purely text-in / text-out: splits on \n, regex-tests for box characters, builds an indent string with INDENT_UNIT.repeat(depth), and hands the result to the existing Langium parser. Final output continues to flow through the established sanitizeText() boundary in populate(). No new DOM sinks, no HTML/SVG concatenation.

---

This is in great shape — feel free to land it whenever you're happy. The nits are all small enough to fix in this PR or follow up in a separate one. Thanks again for picking this up! 🙌

[notionparallax]

@ashishjain0512 could you take a look at the argos check please? I can't see anything in it that blocks this from being merged.