Add TreeView Diagram

[Vikrantpalle]

📑 Summary

This PR introduces a new diagram named TreeView which displays hierarchical directory-like structures.

Resolves #2645

📷 Example

💻 Code

treeView-beta
  packages
    mermaid
      dist
      diagrams
        block
        fold
          parser
            parser.jison
  dist

📏 Design Decisions

The features of the diagram focus on user flexibility and ease of use.

• Simple Syntax: The structure of the tree depends only on the indentation of rows.
• User Flexibility: Users have the flexibility to change most aspects of the diagram including font size, padding, line thickness, etc.
• Dynamic Layout: The rows and lines are laid out dynamically based on the changing size of labels.

📋 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.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	353a208
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66a41565d04b2d00080a0f56
😎 Deploy Preview	https://deploy-preview-5665--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 site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 1.03359% with 383 lines in your changes missing coverage. Please review.

Project coverage is 5.81%. Comparing base (c91dc7d) to head (353a208).
Report is 1718 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/treeView/renderer.ts	0.00%	126 Missing ⚠️
packages/mermaid/src/diagrams/treeView/db.ts	0.00%	79 Missing ⚠️
packages/parser/src/language/treeView/module.ts	0.00%	77 Missing ⚠️
packages/mermaid/src/diagrams/treeView/styles.ts	0.00%	26 Missing ⚠️
packages/mermaid/src/diagrams/treeView/detector.ts	0.00%	21 Missing ⚠️
packages/mermaid/src/diagrams/treeView/parser.ts	0.00%	18 Missing ⚠️
packages/mermaid/src/diagrams/treeView/diagram.ts	0.00%	12 Missing ⚠️
packages/parser/src/parse.ts	0.00%	8 Missing ⚠️
...kages/parser/src/language/treeView/tokenBuilder.ts	0.00%	7 Missing ⚠️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00%	3 Missing ⚠️
... and 4 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5665      +/-   ##
==========================================
- Coverage     5.85%   5.81%   -0.05%     
==========================================
  Files          274     282       +8     
  Lines        41112   41485     +373     
  Branches       488     521      +33     
==========================================
+ Hits          2408    2412       +4     
- Misses       38704   39073     +369     

Flag	Coverage Δ
unit	5.81% <1.03%> (-0.05%)	⬇️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/defaultConfig.ts	47.14% <100.00%> (+0.76%)	⬆️
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/mermaid/src/docs/.vitepress/config.ts	0.00% <0.00%> (ø)
packages/parser/src/language/treeView/index.ts	0.00% <0.00%> (ø)
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00% <0.00%> (ø)
packages/parser/src/language/index.ts	0.00% <0.00%> (ø)
...kages/parser/src/language/treeView/tokenBuilder.ts	0.00% <0.00%> (ø)
packages/parser/src/parse.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/treeView/diagram.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/treeView/parser.ts	0.00% <0.00%> (ø)
... and 5 more

... 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 detected (Review)	3 added	Jul 26, 2024, 9:40 PM

[sidharthv96]

Great work @Vikrantpalle !!
Just some convention issues, and the langium change.

[sidharthv96]

Wonderful!!
All we need is some documentation and tests.

Existing tests can be found in cypress/integration/rendering
Documentation needs to be added in packages/mermaid/src/docs/syntax

[sidharthv96]

@Vikrantpalle looks great to me! I'd say this PR is feature complete. 🚀

But treeView is a bit generic name to use for this diagram, as there are other issues/requests which could also be named a treeView.

What are your thoughts on renaming this to something more specific?
Few suggestions, fileTree, fileStructure, fileSystem. Open to more suggestions.

[george-gca]

Maybe hierarchicalTree, since this can be used to more than just files and directories. For example, one could use to display a list of dependencies to a library and its subdependencies.

[Vikrantpalle]

I feel like hierarchichalTree might be a bit too verbose. What about listTree or treeList? As the tree is being represented by a hierarchical list.

[george-gca]

I think listTree is not clear enough as a name. By reading hierarchicalTree you can have a better sense of what to expect. Also it is not that verbose. What about hierarchyTree? It's 5 chars longer than listTree.

[sgaechter]

I would suggest TreeList. Because this is the purpose of it.

[sidharthv96]

I'm also leaning towards treeList, as it's a tree that's represented as a list.

"Hierarchical Tree" is a tautology because "tree" already implies a hierarchical structure. So either hierarchy or tree can be used, in which we can pick tree, as it's simpler. As it's represented as a list, treeList is a suitable option.

The only issue I'm thinking is, if someone tries to write a file system diagram, they might not know what a treeList is. But I guess we can handle that in the documentation and the sample buttons in live editor?

[Vikrantpalle]

I think documentation and examples is the way to go too.

I think the only other way to solve the problem is explicitly mention file or directory in the name. But suppose we name it as fileTree then the name isn't indicating that the diagram is a list and can be interpreted as a flowchart diagram with file names as nodes. Alternatively, fileList can be interpreted as a list of files without the hierarchical structure.

Since both list and tree are key to give context to the diagram I feel like treeList might be the way to go while sacrificing some brevity.

[aromeronavia]

Throwing out an idea name, what about FileStructure, FileHierarchy? fileTree sounds very intuitive if we think about code editors, that's basically how industry calls the sidebar.

[Austin-Fulbright]

Hey quick comment on the langium file I saw that you were pasting the code from the common.langium into your file as opposed to importing it. If this is because it does not parse the TitleAndAccessabilities tokens correctly, I ran into the same problem and am currently working on figuring out why this happens.

[Vikrantpalle]

I actually didn’t import the common file as whitespace is a hidden terminal in the common file, but is necessary to track indentation for the syntax.

[Austin-Fulbright]

That makes sense. I feel like maybe the common should be separated out a bit. So if you import common/common it will give you the ability to use the TitleAndAccessabilities but leave out the terminals not related to it. And then you can have a seperate file called like common/terminals if you want to use all the terminals. Just so we can reuse the code that is written for the TitleAndAccesabilities.

[becky-intelletive]

So exciting to see this nearing completion! Is there anything remaining? I'd love to use it 😉

[gancena]

@Vikrantpalle looks great to me! I'd say this PR is feature complete. 🚀

But treeView is a bit generic name to use for this diagram, as there are other issues/requests which could also be named a treeView.

What are your thoughts on renaming this to something more specific? Few suggestions, fileTree, fileStructure, fileSystem. Open to more suggestions.

+1 for fileTree

[Surrogard]

Hi, I don't want to sound ungrateful, but what is left to do here? Anything we can help with?

[dwing73]

I cant wait for this to be feature complete as fed up with building ascii text folder structures!

Also leaning towards treeList, if the name has not been chosen yet.
EDIT: Just seen you have gone with treeView in the code that also works for me!

[Alexandre-SCHOEPP]

Hi !

I see that the latest update was more than a year ago. Is there any news concerning this ?

[lee-treehouse]

Conflicts have been resolved, and minor issues addressed, in this version

[dwing73]

Great to see this has traction again. Fantastic work @lee-treehouse