feature/2645: add TreeView Diagram by lee-treehouse · Pull Request #7396 · mermaid-js/mermaid

lee-treehouse · 2026-02-16T01:00:20Z

📑 Summary

This 2024 PR #5665 introduced TreeView diagram and went through a thorough review process including updates to use Langium parser, docs, tests etc. The new diagram addressed issue #2645

That PR was almost merge ready. This PR branches off the original PR and addresses the following:

add tests for langium parser
parser bug impacting the ability to add title and accessibility title & description
add example to examples package
update development demos page to modern formatting (like https://github.com/mermaid-js/mermaid/blob/develop/demos/treemap.html)
address merge conflicts
address first round feedback
- support for spaces in input
- support to customize label colour (as well as existing customisations for label font size and line colour)
- correct changeset

I am happy to address any other changes required (or reinvolve @Vikrantpalle)

📋 Tasks

Make sure you

📖 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. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

…add_tree_view_diagram_update # Conflicts: # .build/jsonSchema.ts # demos/index.html # docs/config/setup/interfaces/mermaid.MermaidConfig.md # docs/config/setup/modules/defaultConfig.md # packages/mermaid/src/config.type.ts # packages/mermaid/src/defaultConfig.ts # packages/mermaid/src/diagram-api/diagram-orchestration.ts # packages/mermaid/src/docs/.vitepress/config.ts # packages/mermaid/src/mermaidAPI.spec.ts # packages/mermaid/src/schemas/config.schema.yaml # packages/mermaid/src/styles.spec.ts # packages/parser/langium-config.json # packages/parser/src/language/index.ts # packages/parser/src/parse.ts

netlify · 2026-02-16T01:00:26Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`cba0761`
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69b335be542e850008ab18ed
😎 Deploy Preview	https://deploy-preview-7396--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

changeset-bot · 2026-02-16T01:00:26Z

🦋 Changeset detected

Latest commit: cba0761

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

This PR includes changesets to release 3 packages

Name	Type
@mermaid-js/examples	Minor
mermaid	Minor
@mermaid-js/parser	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

pkg-pr-new · 2026-02-16T01:01:45Z

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 12f192b

argos-ci · 2026-02-16T01:08:50Z

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	4 added	Mar 12, 2026, 10:02 PM

lee-treehouse · 2026-02-16T02:41:32Z

There is a unit test failure relating to accessibility that I am investigating
Passing accTitle: and accDescr: are not understood to be keywords and instead incorporated in the diagram, so they fail these assertions

We would expect those accessibility keywords to result in nodes added to the svg as per this example:

This is a issue with the grammar, easier to understand the behaviour from the langium playground. You can observe that all the words in the title, accessible title and description become nodes for the tree diagram.
I will find out what is needed to fix it.

Update: fixed, but I found the whitespace / indent handling to be very fragile. Seems we observed this with treemap already and updating to langium v4

…re clearly

jasonkolodziej · 2026-03-08T02:26:06Z

#2645/issuecomment-3975419901

…add_tree_view_diagram_update # Conflicts: # packages/mermaid/src/docs/.vitepress/config.ts

lee-treehouse · 2026-03-11T21:01:31Z

@knsv all blocking feedback and fresh merge conflicts addressed, I'm hoping this one is good to go after a few contributors trying to finish it off the last couple of years 🤞

knsv

Great Work!

All three blocking issues are resolved:

✅ Parser test file now included — packages/parser/tests/treeView.test.ts is in the PR with 7 test cases, including the new multi-word test ("Multi Word Root"). Well done.
✅ Changeset is now minor — .changeset/weak-tools-pay.md correctly bumps all three packages as minor.
✅ Multi-word node names — The grammar was redesigned to use quoted strings (STRING2: /"[^"]"|'[^']'/), with the valueConverter stripping quotes. This is a clean solution. The demo no longer has broken node
names.

Also fixed:

✅ Cypress tests now have 4 cases including a custom config test that exercises labelColor, lineColor, and rowIndent. Nice addition. 🎉

lee-treehouse · 2026-03-12T22:02:35Z

The PR was removed from the merge queue due to a unit test failure. The cause is a new unit test that was merged earlier today via #7410. I've pushed a commit to make the new test aware of this new diagram and the unit tests are now passing, ready for another stab at the merge queue if possible @knsv 🙏

@lee-treehouse

…tions, highlights Extends treeView-beta (PR mermaid-js#7396 by @lee-treehouse and @Vikrantpalle) with file-tree-specific features: - Bare (unquoted) labels: src/, index.js, .gitignore - 30+ auto-detected file-type icons (JS, TS, Python, Docker, etc.) - :::class annotations (e.g. :::highlight for yellow background) - icon(name) overrides for custom icons - ## inline descriptions, column-aligned across all nodes - Directory auto-detection via trailing slash - Folder names with spaces (unquoted) - Two-pass rendering for description column alignment - Diagram-scoped icon symbol IDs (no duplicates on multi-diagram pages) - Side-by-side demo page showing input syntax next to rendered output - 26 new parseNodeContent unit tests + 8 new Langium parser tests - 5 new Cypress E2E tests - Comprehensive docs rewrite with all new features Grammar: NODE_CONTENT terminal captures rest-of-line; detailed annotation parsing (:::class, icon(), ##) delegated to TypeScript parseNodeContent(). Closes mermaid-js#7516

D1no · 2026-04-20T12:34:22Z

Its probably too late, but one of the most use cases for a tree file view in ascii is to add comments or descriptions behind the file - folder. AI uses that extensively like below.

Was searching if mermaid could do that natively and landed here.

.
├── readme.md                          ← you are here: top-level index
├── CLAUDE.md                          ← Claude Code session bootstrap + hard rules
├── Taskfile.yml                       ← root task runner: `task --list`
├── lefthook.yml                       ← declarative git-hook manager
├── docs/                              ← per-model state-of-play + convention indexes
│   ├── gemma4.md                        (overview + HANDOFF + full matrix + phases)
│   ├── qwen36.md                        (early; research-only until first scout lands)
│   ├── conventions.md                   (human-readable index of .claude/memory rules)
│   ├── handoff-procedure.md             (end-of-session handoff ritual + next-session bootstrap)
│   └── fresh-eyes-review-2026-04-20.md  (dated navigation review, Tier A/B/C findings)
├── scripts/                           ← repo-wide helpers (DX + Modal log analysis)
...

pbrolin47 · 2026-04-21T11:47:01Z

@D1no Thanks for the suggestion!
May I ask you to create an issue labeled Type: Enhancement targeting TreeView diagrams. Maybe someone in the community will pick-up the proposed enhancement

D1no · 2026-04-21T11:48:07Z

👍 will do

D1no · 2026-04-21T12:59:18Z

@pbrolin47 done
#7640 (comment)

Vikrantpalle and others added 13 commits July 26, 2024 00:39

add treeView diagram

3b398cc

change text regex match

99dde50

move parser to langium

bd8242c

change TreeViewDb to TreeViewDB

f7ebf29

use ImperativeState

18f206e

remove fontFamily style

99406da

add integration test

8591460

add diagram to tests

7bae205

add docs

353a208

fix typo introduced when addressing merge conflicts

c1ec573

fix more typos introduced while addressing merge conflict

c8c664e

fix demo index

48ea9c7

change order of docs in nav bar so new diagram is at the bottom

4135ff3

lee-treehouse added 5 commits February 16, 2026 12:13

add an example

caf340c

use example from issue to improve examples

387baff

make treeview demo page consistent with treemap demo page (it's fancier)

a2acdde

add changeset

c6139b7

fix examples failing test

4947e57

lee-treehouse and others added 6 commits February 16, 2026 14:16

add failing parser tests for treeview

781da8c

wip understanding parser

613e1d3

parser WIP

adf46fb

Merge branch 'develop' into 2645_add_tree_view_diagram_update

4aa705f

fix naming conflict

251d440

handle null case

2093999

lee-treehouse added 2 commits March 7, 2026 15:44

make custom formatting examples more exaggerated to convey meaning mo…

12a3c15

…re clearly

new changeset

714c7dd

lee-treehouse requested a review from knsv March 7, 2026 04:58

lee-treehouse mentioned this pull request Mar 7, 2026

Update sidebar syntax to link to the newly added Ishikawa diagram #7460

Merged

4 tasks

remove redundant change sets

e37f4cd

Merge branch 'develop' of github.com:lee-treehouse/mermaid into 2645_…

08db651

…add_tree_view_diagram_update # Conflicts: # packages/mermaid/src/docs/.vitepress/config.ts

knsv approved these changes Mar 12, 2026

View reviewed changes

knsv added this pull request to the merge queue Mar 12, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Mar 12, 2026

knsv added this pull request to the merge queue Mar 12, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Mar 12, 2026

lee-treehouse and others added 2 commits March 13, 2026 07:44

Merge branch 'develop' into 2645_add_tree_view_diagram_update

dbce824

add spec

cba0761

lee-treehouse added this pull request to the merge queue Mar 13, 2026

Merged via the queue into mermaid-js:develop with commit b681756 Mar 13, 2026
21 of 22 checks passed

lee-treehouse deleted the 2645_add_tree_view_diagram_update branch March 13, 2026 21:14

This was referenced Mar 14, 2026

Hope to have a file tree mermaid diagram type #6133

Closed

Add FileTree Diagram (PR #5665) #6231

Closed

lee-treehouse mentioned this pull request Mar 24, 2026

New diagram type: filetree — directory trees with icons and connector lines #7516

Closed

notionparallax mentioned this pull request Mar 26, 2026

feat(treeView): enhance treeView-beta with icons, bare labels, annotations & highlights #7527

Merged

4 tasks

D1no mentioned this pull request Apr 21, 2026

TreeView (File Tree) Enhancement: Ability to add Comments or Descriptions next to Files #7640

Open

Uh oh!

Conversation

lee-treehouse commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📑 Summary

📋 Tasks

Uh oh!

netlify Bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

changeset-bot Bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new Bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

argos-ci Bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lee-treehouse commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jasonkolodziej commented Mar 8, 2026

Uh oh!

lee-treehouse commented Mar 11, 2026

Uh oh!

knsv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lee-treehouse commented Mar 12, 2026

Uh oh!

Uh oh!

D1no commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pbrolin47 commented Apr 21, 2026

Uh oh!

D1no commented Apr 21, 2026

Uh oh!

D1no commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

lee-treehouse commented Feb 16, 2026 •

edited

Loading

netlify Bot commented Feb 16, 2026 •

edited

Loading

changeset-bot Bot commented Feb 16, 2026 •

edited

Loading

pkg-pr-new Bot commented Feb 16, 2026 •

edited

Loading

argos-ci Bot commented Feb 16, 2026 •

edited

Loading

lee-treehouse commented Feb 16, 2026 •

edited

Loading

D1no commented Apr 20, 2026 •

edited

Loading