diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts index 08367011dc..092e60ef2d 100644 --- a/.build/jsonSchema.ts +++ b/.build/jsonSchema.ts @@ -25,7 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'sankey', 'block', 'packet', - 'treeView', + 'fileTree', ] as const; /** diff --git a/cypress/integration/rendering/treeView.spec.ts b/cypress/integration/rendering/fileTree.spec.ts similarity index 74% rename from cypress/integration/rendering/treeView.spec.ts rename to cypress/integration/rendering/fileTree.spec.ts index dcb1b20556..9143fb2a88 100644 --- a/cypress/integration/rendering/treeView.spec.ts +++ b/cypress/integration/rendering/fileTree.spec.ts @@ -1,16 +1,16 @@ import { imgSnapshotTest } from '../../helpers/util'; -describe('TreeView Diagram', () => { - it('should render a simple treeView diagram', () => { +describe('FileTree Diagram', () => { + it('should render a simple fileTree diagram', () => { imgSnapshotTest( - `treeView-beta + `fileTree-beta file1.ts` ); }); - it('should render a complex treeView diagram', () => { + it('should render a complex fileTree diagram', () => { imgSnapshotTest( - `treeView-beta + `fileTree-beta root folder1 file1.js @@ -26,9 +26,9 @@ describe('TreeView Diagram', () => { ); }); - it('should render a complex treeView diagram with multiple roots', () => { + it('should render a complex fileTree diagram with multiple roots', () => { imgSnapshotTest( - `treeView-beta + `fileTree-beta folder1 file1.js file2.ts diff --git a/demos/treeView.html b/demos/fileTree.html similarity index 90% rename from demos/treeView.html rename to demos/fileTree.html index 08f877c65c..c03ee62deb 100644 --- a/demos/treeView.html +++ b/demos/fileTree.html @@ -13,11 +13,11 @@ -

TreeView Diagram Demo

+

FileTree Diagram Demo

-        treeView-beta
+        fileTree-beta
             packages
                 mermaid
                     src
@@ -28,14 +28,14 @@ 
TreeView Diagram Demo

       
         ---
         config:
-            treeView:
+            fileTree:
                 rowIndent: 40
                 lineThickness: 2
             themeVariables:
-                treeView:
+                fileTree:
                     fontSize: '30px'
         ---
-        treeView-beta
+        fileTree-beta
             packages
                 mermaid
                     src
diff --git a/demos/index.html b/demos/index.html
index 6673864330..5969e10f08 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -89,7 +89,7 @@ 
Packet

         
Layered Blocks

       
       
  • 
-        
    TreeView
    
+        
    FileTree
    
       
    • 
     
   
diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
index 2407cb2c87..a719ee2042 100644
--- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md
+++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -448,9 +448,9 @@ You may also use `themeCSS` to override this value.
 
 ---
 
-### treeView
+### fileTree
 
-• `Optional` **treeView**: `TreeViewDiagramConfig`
+• `Optional` **fileTree**: `FileTreeDiagramConfig`
 
 #### Defined in
 
diff --git a/docs/syntax/treeView.md b/docs/syntax/fileTree.md
similarity index 82%
rename from docs/syntax/treeView.md
rename to docs/syntax/fileTree.md
index 19dd5b15cc..3a139f1778 100644
--- a/docs/syntax/treeView.md
+++ b/docs/syntax/fileTree.md
@@ -2,20 +2,20 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/fileTree.md](../../packages/mermaid/src/docs/syntax/fileTree.md).
 
-# TreeView Diagram (v\+)
+# FileTree Diagram (v\+)
 
 ## Introduction
 
-A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.
+A FileTree diagram is used to represent hierarchical data in the form of a directory-like structure.
 
 ## Syntax
 
 The structure of the tree depends only on indentation.
 
 ```
-treeView-beta
+fileTree-beta
     
         
         
@@ -26,7 +26,7 @@ treeView-beta
 ## Examples
 
 ```mermaid-example
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
@@ -34,7 +34,7 @@ treeView-beta
 ```
 
 ```mermaid
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
@@ -44,13 +44,13 @@ treeView-beta
 ```mermaid-example
 ---
 config:
-    treeView:
+    fileTree:
         rowIndent: 5
     themeVariables:
-        treeView:
+        fileTree:
             fontSize: '20px'
 ---
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
@@ -60,13 +60,13 @@ treeView-beta
 ```mermaid
 ---
 config:
-    treeView:
+    fileTree:
         rowIndent: 5
     themeVariables:
-        treeView:
+        fileTree:
             fontSize: '20px'
 ---
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index f4489b1f4f..cf39b84ac1 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -160,7 +160,7 @@ export interface MermaidConfig {
   sankey?: SankeyDiagramConfig;
   packet?: PacketDiagramConfig;
   block?: BlockDiagramConfig;
-  treeView?: TreeViewDiagramConfig;
+  fileTree?: FileTreeDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
@@ -1462,12 +1462,12 @@ export interface BlockDiagramConfig extends BaseDiagramConfig {
   padding?: number;
 }
 /**
- * The object containing configurations specific for treeView diagrams.
+ * The object containing configurations specific for fileTree diagrams.
  *
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
- * via the `definition` "TreeViewDiagramConfig".
+ * via the `definition` "FileTreeDiagramConfig".
  */
-export interface TreeViewDiagramConfig extends BaseDiagramConfig {
+export interface FileTreeDiagramConfig extends BaseDiagramConfig {
   /**
    * Horizontal distance between rows differing by one level
    */
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 6018e3d4ae..d07f74af33 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -260,8 +260,8 @@ const config: RequiredDeep = {
   packet: {
     ...defaultConfigJson.packet,
   },
-  treeView: {
-    ...defaultConfigJson.treeView,
+  fileTree: {
+    ...defaultConfigJson.fileTree,
     useWidth: undefined,
   },
 };
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 0eec1b435c..fbd39ec66f 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -22,7 +22,7 @@ import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { packet } from '../diagrams/packet/detector.js';
 import block from '../diagrams/block/blockDetector.js';
-import treeView from '../diagrams/treeView/detector.js';
+import fileTree from '../diagrams/fileTree/detector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -92,6 +92,6 @@ export const addDiagrams = () => {
     packet,
     xychart,
     block,
-    treeView
+    fileTree
   );
 };
diff --git a/packages/mermaid/src/diagrams/treeView/db.ts b/packages/mermaid/src/diagrams/treeView/db.ts
index db18b948c5..c8678fc9ec 100644
--- a/packages/mermaid/src/diagrams/treeView/db.ts
+++ b/packages/mermaid/src/diagrams/treeView/db.ts
@@ -1,5 +1,5 @@
-import type { TreeViewDiagramConfig } from '../../config.type.js';
-import type { TreeViewDB, Node } from './types.js';
+import type { FileTreeDiagramConfig } from '../../config.type.js';
+import type { FileTreeDB, Node } from './types.js';
 import { getConfig as getCommonConfig } from '../../config.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
 import {
@@ -14,12 +14,12 @@ import {
 import { cleanAndMerge } from '../../utils.js';
 import { ImperativeState } from '../../utils/imperativeState.js';
 
-interface TreeViewState {
+interface FileTreeState {
   cnt: number;
   stack: Node[];
 }
 
-const state = new ImperativeState(() => ({
+const state = new ImperativeState(() => ({
   cnt: 1,
   stack: [
     {
@@ -42,10 +42,10 @@ const getRoot = () => {
 
 const getCount = () => state.records.cnt;
 
-const defaultConfig: Required = DEFAULT_CONFIG.treeView;
+const defaultConfig: Required = DEFAULT_CONFIG.fileTree;
 
-const getConfig = (): Required => {
-  return cleanAndMerge(defaultConfig, getCommonConfig().treeView);
+const getConfig = (): Required => {
+  return cleanAndMerge(defaultConfig, getCommonConfig().fileTree);
 };
 
 const addNode = (level: number, name: string) => {
@@ -62,7 +62,7 @@ const addNode = (level: number, name: string) => {
   state.records.stack.push(node);
 };
 
-const db: TreeViewDB = {
+const db: FileTreeDB = {
   clear,
   addNode,
   getRoot,
diff --git a/packages/mermaid/src/diagrams/treeView/detector.ts b/packages/mermaid/src/diagrams/treeView/detector.ts
index ef4d84e44e..34d7798622 100644
--- a/packages/mermaid/src/diagrams/treeView/detector.ts
+++ b/packages/mermaid/src/diagrams/treeView/detector.ts
@@ -1,10 +1,10 @@
 import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js';
 import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
-const id = 'treeView';
+const id = 'fileTree';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*treeView-beta/.test(txt);
+  return /^\s*fileTree-beta/.test(txt);
 };
 
 const loader: DiagramLoader = async () => {
diff --git a/packages/mermaid/src/diagrams/treeView/parser.ts b/packages/mermaid/src/diagrams/treeView/parser.ts
index 7d3668b85a..58974a2b57 100644
--- a/packages/mermaid/src/diagrams/treeView/parser.ts
+++ b/packages/mermaid/src/diagrams/treeView/parser.ts
@@ -2,16 +2,16 @@ import type { ParserDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { populateCommonDb } from '../common/populateCommonDb.js';
 import db from './db.js';
-import { parse, type TreeView } from '@mermaid-js/parser';
+import { parse, type FileTree } from '@mermaid-js/parser';
 
-const populate = (ast: TreeView) => {
+const populate = (ast: FileTree) => {
   populateCommonDb(ast, db);
   ast.nodes.map((node) => db.addNode(node.indent.length, node.name));
 };
 
 export const parser: ParserDefinition = {
   parse: async (input: string): Promise => {
-    const ast = await parse('treeView', input);
+    const ast = await parse('fileTree', input);
     log.debug(ast);
     populate(ast);
   },
diff --git a/packages/mermaid/src/diagrams/treeView/renderer.ts b/packages/mermaid/src/diagrams/treeView/renderer.ts
index 150f765b76..9c03be95f2 100644
--- a/packages/mermaid/src/diagrams/treeView/renderer.ts
+++ b/packages/mermaid/src/diagrams/treeView/renderer.ts
@@ -1,9 +1,9 @@
 import type { DiagramRenderer, DrawDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import type { D3SVGElement, TreeViewDB } from './types.js';
+import type { D3SVGElement, FileTreeDB } from './types.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { TreeViewDiagramConfig } from '../../config.type.js';
+import type { FileTreeDiagramConfig } from '../../config.type.js';
 import type { Node } from './types.js';
 
 const positionLabel = (
@@ -11,13 +11,13 @@ const positionLabel = (
   y: number,
   node: Node,
   domElem: D3SVGElement,
-  config: Required
+  config: Required
 ) => {
   const label = domElem
     .append('text')
     .text(node.name)
     .attr('dominant-baseline', 'middle')
-    .attr('class', 'treeView-node-label');
+    .attr('class', 'fileTree-node-label');
   const { height: labelHeight, width: labelWidth } = label.node()!.getBBox();
   const height = labelHeight + config.paddingY * 2;
   const width = labelWidth + config.paddingX * 2;
@@ -46,20 +46,20 @@ const positionLine = (
     .attr('x2', x2)
     .attr('y2', y2)
     .attr('stroke-width', lineThickness)
-    .attr('class', 'treeView-node-line');
+    .attr('class', 'fileTree-node-line');
 };
 
 const drawTree = (
   elem: D3SVGElement,
   root: Node,
-  config: Required
+  config: Required
 ) => {
   let totalHeight = 0;
   let totalWidth = 0;
   const drawNode = (
     elem: D3SVGElement,
     node: Node,
-    config: Required,
+    config: Required,
     depth: number
   ) => {
     const indent = depth * (config.rowIndent + config.paddingX);
@@ -102,9 +102,9 @@ const drawTree = (
 };
 
 const draw: DrawDefinition = (text, id, _ver, diagObj) => {
-  log.debug('Rendering treeView diagram\n' + text);
+  log.debug('Rendering fileTree diagram\n' + text);
 
-  const db = diagObj.db as TreeViewDB;
+  const db = diagObj.db as FileTreeDB;
   const root = db.getRoot();
   const config = db.getConfig();
 
diff --git a/packages/mermaid/src/diagrams/treeView/styles.ts b/packages/mermaid/src/diagrams/treeView/styles.ts
index 19c04a175d..a6ed41da88 100644
--- a/packages/mermaid/src/diagrams/treeView/styles.ts
+++ b/packages/mermaid/src/diagrams/treeView/styles.ts
@@ -1,23 +1,23 @@
 import type { DiagramStylesProvider } from '../../diagram-api/types.js';
 import { cleanAndMerge } from '../../utils.js';
-import type { TreeViewDiagramStyles } from './types.js';
+import type { FileTreeDiagramStyles } from './types.js';
 
-const defaultTreeViewDiagramStyles: Required = {
+const defaultFileTreeDiagramStyles: Required = {
   fontSize: '16px',
   lineColor: 'black',
 };
 
 const styles: DiagramStylesProvider = ({
-  treeView,
+  fileTree,
 }: {
-  treeView?: TreeViewDiagramStyles;
+  fileTree?: FileTreeDiagramStyles;
 }): string => {
-  const { fontSize, lineColor } = cleanAndMerge(defaultTreeViewDiagramStyles, treeView);
+  const { fontSize, lineColor } = cleanAndMerge(defaultFileTreeDiagramStyles, fileTree);
   return `
-    .treeView-node-label {
+    .fileTree-node-label {
         font-size: ${fontSize};
     }
-    .treeView-node-line {
+    .fileTree-node-line {
         stroke: ${lineColor};
     }
     `;
diff --git a/packages/mermaid/src/diagrams/treeView/types.ts b/packages/mermaid/src/diagrams/treeView/types.ts
index 2cccec3860..1ce9133783 100644
--- a/packages/mermaid/src/diagrams/treeView/types.ts
+++ b/packages/mermaid/src/diagrams/treeView/types.ts
@@ -1,4 +1,4 @@
-import type { TreeViewDiagramConfig } from '../../config.type.js';
+import type { FileTreeDiagramConfig } from '../../config.type.js';
 import type { DiagramDBBase } from '../../diagram-api/types.js';
 import type { Selection } from 'd3-selection';
 
@@ -17,13 +17,13 @@ export interface Node {
   children: Node[];
 }
 
-export interface TreeViewDB extends DiagramDBBase {
+export interface FileTreeDB extends DiagramDBBase {
   addNode: (level: number, name: string) => void;
   getRoot: () => Node;
   getCount: () => number;
 }
 
-export interface TreeViewDiagramStyles {
+export interface FileTreeDiagramStyles {
   fontSize?: string;
   lineColor?: string;
 }
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 7d1ee24c58..1f7e7adecb 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -157,7 +157,7 @@ function sidebarSyntax() {
         { text: 'XY Chart 🔥', link: '/syntax/xyChart' },
         { text: 'Block Diagram 🔥', link: '/syntax/block' },
         { text: 'Packet 🔥', link: '/syntax/packet' },
-        { text: 'TreeView 🔥', link: '/syntax/treeView' },
+        { text: 'FileTree 🔥', link: '/syntax/fileTree' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },
diff --git a/packages/mermaid/src/docs/syntax/treeView.md b/packages/mermaid/src/docs/syntax/fileTree.md
similarity index 85%
rename from packages/mermaid/src/docs/syntax/treeView.md
rename to packages/mermaid/src/docs/syntax/fileTree.md
index 030d3032cd..20d319b961 100644
--- a/packages/mermaid/src/docs/syntax/treeView.md
+++ b/packages/mermaid/src/docs/syntax/fileTree.md
@@ -1,15 +1,15 @@
-# TreeView Diagram (v+)
+# FileTree Diagram (v+)
 
 ## Introduction
 
-A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.
+A FileTree diagram is used to represent hierarchical data in the form of a directory-like structure.
 
 ## Syntax
 
 The structure of the tree depends only on indentation.
 
 ```
-treeView-beta
+fileTree-beta
     
         
         
@@ -20,7 +20,7 @@ treeView-beta
 ## Examples
 
 ```mermaid-example
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
@@ -30,13 +30,13 @@ treeView-beta
 ```mermaid-example
 ---
 config:
-    treeView:
+    fileTree:
         rowIndent: 5
     themeVariables:
-        treeView:
+        fileTree:
             fontSize: '20px'
 ---
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index adcb2f678d..12c391cc1e 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -31,7 +31,7 @@ vi.mock('./diagrams/xychart/xychartRenderer.js');
 vi.mock('./diagrams/requirement/requirementRenderer.js');
 vi.mock('./diagrams/sequence/sequenceRenderer.js');
 vi.mock('./diagrams/state/stateRenderer-v2.js');
-vi.mock('./diagrams/treeView/renderer.js');
+vi.mock('./diagrams/fileTree/renderer.js');
 
 // -------------------------------------
 
@@ -734,7 +734,7 @@ describe('mermaidAPI', () => {
       { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
       { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
       { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
-      { textDiagramType: 'treeView-beta', expectedType: 'treeView' },
+      { textDiagramType: 'fileTree-beta', expectedType: 'fileTree' },
     ];
 
     describe('accessibility', () => {
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index bfaf5e04ae..5f79784162 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -52,7 +52,7 @@ required:
   - sankey
   - packet
   - block
-  - treeView
+  - fileTree
 properties:
   theme:
     description: |
@@ -238,8 +238,8 @@ properties:
     $ref: '#/$defs/PacketDiagramConfig'
   block:
     $ref: '#/$defs/BlockDiagramConfig'
-  treeView:
-    $ref: '#/$defs/TreeViewDiagramConfig'
+  fileTree:
+    $ref: '#/$defs/FileTreeDiagramConfig'
   dompurifyConfig:
     title: DOM Purify Configuration
     description: Configuration options to pass to the `dompurify` library.
@@ -2096,10 +2096,10 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         minimum: 0
         default: 8
 
-  TreeViewDiagramConfig:
-    title: TreeView Diagram Config
+  FileTreeDiagramConfig:
+    title: FileTree Diagram Config
     allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
-    description: The object containing configurations specific for treeView diagrams.
+    description: The object containing configurations specific for fileTree diagrams.
     type: object
     unevaluatedProperties: false
     properties:
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 963ee22213..a436e8d231 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -29,7 +29,7 @@ import timeline from './diagrams/timeline/styles.js';
 import mindmap from './diagrams/mindmap/styles.js';
 import packet from './diagrams/packet/styles.js';
 import block from './diagrams/block/styles.js';
-import treeView from './diagrams/treeView/styles.js';
+import fileTree from './diagrams/fileTree/styles.js';
 import themes from './themes/index.js';
 
 function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -100,7 +100,7 @@ describe('styles', () => {
         block,
         timeline,
         packet,
-        treeView,
+        fileTree,
       })) {
         test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
           const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
diff --git a/packages/parser/langium-config.json b/packages/parser/langium-config.json
index b7b8ba117b..5735fda9f8 100644
--- a/packages/parser/langium-config.json
+++ b/packages/parser/langium-config.json
@@ -17,8 +17,8 @@
       "fileExtensions": [".mmd", ".mermaid"]
     },
     {
-      "id": "treeView",
-      "grammar": "src/language/treeView/treeView.langium",
+      "id": "fileTree",
+      "grammar": "src/language/fileTree/fileTree.langium",
       "fileExtensions": [".mmd", ".mermaid"]
     }
   ],
diff --git a/packages/parser/src/language/index.ts b/packages/parser/src/language/index.ts
index 7299c30c92..2212242ead 100644
--- a/packages/parser/src/language/index.ts
+++ b/packages/parser/src/language/index.ts
@@ -11,7 +11,7 @@ export {
   isPacketBlock,
   isPie,
   isPieSection,
-  TreeView,
+  FileTree,
   TreeNode,
 } from './generated/ast.js';
 export {
@@ -25,4 +25,4 @@ export * from './common/index.js';
 export * from './info/index.js';
 export * from './packet/index.js';
 export * from './pie/index.js';
-export * from './treeView/index.js';
+export * from './fileTree/index.js';
diff --git a/packages/parser/src/language/treeView/treeView.langium b/packages/parser/src/language/treeView/fileTree.langium
similarity index 92%
rename from packages/parser/src/language/treeView/treeView.langium
rename to packages/parser/src/language/treeView/fileTree.langium
index f574c3312b..e7107b2434 100644
--- a/packages/parser/src/language/treeView/treeView.langium
+++ b/packages/parser/src/language/treeView/fileTree.langium
@@ -1,8 +1,8 @@
-grammar TreeView
+grammar FileTree
 
-entry TreeView:
+entry FileTree:
     SPACELIST?
-    "treeView-beta"
+    "fileTree-beta"
     TitleAndAccessibilities?
     nodes+=TreeNode*
     SPACELIST?
diff --git a/packages/parser/src/language/treeView/module.ts b/packages/parser/src/language/treeView/module.ts
index b1cb3146cd..fd0eba80f3 100644
--- a/packages/parser/src/language/treeView/module.ts
+++ b/packages/parser/src/language/treeView/module.ts
@@ -13,34 +13,34 @@ import {
 } from 'langium';
 
 import { CommonValueConverter } from '../common/valueConverter.js';
-import { MermaidGeneratedSharedModule, TreeViewGeneratedModule } from '../generated/module.js';
-import { TreeViewTokenBuilder } from './tokenBuilder.js';
+import { MermaidGeneratedSharedModule, FileTreeGeneratedModule } from '../generated/module.js';
+import { FileTreeTokenBuilder } from './tokenBuilder.js';
 
 /**
- * Declaration of `TreeView` services.
+ * Declaration of `FileTree` services.
  */
-interface TreeViewAddedServices {
+interface FileTreeAddedServices {
   parser: {
-    TokenBuilder: TreeViewTokenBuilder;
+    TokenBuilder: FileTreeTokenBuilder;
     ValueConverter: CommonValueConverter;
   };
 }
 
 /**
- * Union of Langium default services and `TreeView` services.
+ * Union of Langium default services and `FileTree` services.
  */
-export type TreeViewServices = LangiumCoreServices & TreeViewAddedServices;
+export type FileTreeServices = LangiumCoreServices & FileTreeAddedServices;
 
 /**
  * Dependency injection module that overrides Langium default services and
- * contributes the declared `TreeView` services.
+ * contributes the declared `FileTree` services.
  */
-export const TreeViewModule: Module<
-  TreeViewServices,
-  PartialLangiumCoreServices & TreeViewAddedServices
+export const FileTreeModule: Module<
+  FileTreeServices,
+  PartialLangiumCoreServices & FileTreeAddedServices
 > = {
   parser: {
-    TokenBuilder: () => new TreeViewTokenBuilder(),
+    TokenBuilder: () => new FileTreeTokenBuilder(),
     ValueConverter: () => new CommonValueConverter(),
   },
 };
@@ -59,19 +59,19 @@ export const TreeViewModule: Module<
  * @param context - Optional module context with the LSP connection
  * @returns An object wrapping the shared services and the language-specific services
  */
-export function createTreeViewServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): {
+export function createFileTreeServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): {
   shared: LangiumSharedCoreServices;
-  TreeView: TreeViewServices;
+  FileTree: FileTreeServices;
 } {
   const shared: LangiumSharedCoreServices = inject(
     createDefaultSharedCoreModule(context),
     MermaidGeneratedSharedModule
   );
-  const TreeView: TreeViewServices = inject(
+  const FileTree: FileTreeServices = inject(
     createDefaultCoreModule({ shared }),
-    TreeViewGeneratedModule,
-    TreeViewModule
+    FileTreeGeneratedModule,
+    FileTreeModule
   );
-  shared.ServiceRegistry.register(TreeView);
-  return { shared, TreeView };
+  shared.ServiceRegistry.register(FileTree);
+  return { shared, FileTree };
 }
diff --git a/packages/parser/src/language/treeView/tokenBuilder.ts b/packages/parser/src/language/treeView/tokenBuilder.ts
index 5aacc5f903..c38b93447c 100644
--- a/packages/parser/src/language/treeView/tokenBuilder.ts
+++ b/packages/parser/src/language/treeView/tokenBuilder.ts
@@ -1,7 +1,7 @@
 import { AbstractMermaidTokenBuilder } from '../common/index.js';
 
-export class TreeViewTokenBuilder extends AbstractMermaidTokenBuilder {
+export class FileTreeTokenBuilder extends AbstractMermaidTokenBuilder {
   public constructor() {
-    super(['treeView-beta']);
+    super(['fileTree-beta']);
   }
 }
diff --git a/packages/parser/src/parse.ts b/packages/parser/src/parse.ts
index 0c6852b6f1..f3b7864e7c 100644
--- a/packages/parser/src/parse.ts
+++ b/packages/parser/src/parse.ts
@@ -1,8 +1,8 @@
 import type { LangiumParser, ParseResult } from 'langium';
 
-import type { Info, Packet, Pie, TreeView } from './index.js';
+import type { Info, Packet, Pie, FileTree } from './index.js';
 
-export type DiagramAST = Info | Packet | Pie | TreeView;
+export type DiagramAST = Info | Packet | Pie | FileTree;
 
 const parsers: Record = {};
 const initializers = {
@@ -21,17 +21,17 @@ const initializers = {
     const parser = createPieServices().Pie.parser.LangiumParser;
     parsers.pie = parser;
   },
-  treeView: async () => {
-    const { createTreeViewServices } = await import('./language/treeView/index.js');
-    const parser = createTreeViewServices().TreeView.parser.LangiumParser;
-    parsers.treeView = parser;
+  fileTree: async () => {
+    const { createFileTreeServices } = await import('./language/fileTree/index.js');
+    const parser = createFileTreeServices().FileTree.parser.LangiumParser;
+    parsers.fileTree = parser;
   },
 } as const;
 
 export async function parse(diagramType: 'info', text: string): Promise;
 export async function parse(diagramType: 'packet', text: string): Promise;
 export async function parse(diagramType: 'pie', text: string): Promise;
-export async function parse(diagramType: 'treeView', text: string): Promise;
+export async function parse(diagramType: 'fileTree', text: string): Promise;
 export async function parse(
   diagramType: keyof typeof initializers,
   text: string