diff --git a/.changeset/enhance-treeview-filetree.md b/.changeset/enhance-treeview-filetree.md
new file mode 100644
index 00000000000..3867fbde6c5
--- /dev/null
+++ b/.changeset/enhance-treeview-filetree.md
@@ -0,0 +1,17 @@
+---
+'mermaid': minor
+'@mermaid-js/parser': minor
+---
+
+Enhance treeView-beta with file tree features
+
+Extends the existing treeView-beta diagram with features useful for representing file/directory structures:
+
+- **Bare labels**: Node names no longer require quotes (`src/` instead of `"src/"`)
+- **Auto-detected file icons**: 30+ file type icons (TypeScript, Python, Docker, etc.) resolved from filename/extension
+- **Icon overrides**: `icon(docker)` syntax to manually specify an icon
+- **CSS class annotations**: `:::highlight` syntax for styling individual nodes
+- **Descriptions**: `## description text` appended after a node label for additional context
+- **Comment support**: `%%` line comments within the tree body
+- **Directory detection**: Trailing `/` on a label auto-sets the node type to directory with folder icon
+- **New theme variables**: `iconColor` and `descriptionColor` for styling icons and descriptions
diff --git a/.prettierignore b/.prettierignore
index c700804260b..77c2aa9a84b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,6 @@
dist
+# Symlink to packages/mermaid/CHANGELOG.md — prettier must not add a trailing newline
+CHANGELOG.md
cypress/platform/xss3.html
.cache
.pnpm-store
diff --git a/cypress/integration/rendering/treeView/treeView.spec.ts b/cypress/integration/rendering/treeView/treeView.spec.ts
index 5e6901964fb..6d0e8847388 100644
--- a/cypress/integration/rendering/treeView/treeView.spec.ts
+++ b/cypress/integration/rendering/treeView/treeView.spec.ts
@@ -1,14 +1,14 @@
import { imgSnapshotTest } from '../../../helpers/util';
describe('TreeView Diagram', () => {
- it('should render a simple treeView diagram', () => {
+ it('should render a simple treeView diagram with quoted labels', () => {
imgSnapshotTest(
`treeView-beta
"file1.ts"`
);
});
- it('should render a complex treeView diagram', () => {
+ it('should render a complex treeView diagram with quoted labels', () => {
imgSnapshotTest(
`treeView-beta
"root"
@@ -26,7 +26,7 @@ describe('TreeView Diagram', () => {
);
});
- it('should render a complex treeView diagram with multiple roots', () => {
+ it('should render with multiple roots and quoted labels', () => {
imgSnapshotTest(
`treeView-beta
"folder1"
@@ -43,7 +43,7 @@ describe('TreeView Diagram', () => {
);
});
- it('should render a treeView diagram with custom config', () => {
+ it('should render with custom config and quoted labels', () => {
imgSnapshotTest(
`
---
@@ -72,4 +72,70 @@ treeView-beta
`
);
});
+
+ it('should render bare (unquoted) labels with icons', () => {
+ imgSnapshotTest(
+ `treeView-beta
+ my-project/
+ src/
+ components/
+ Button.tsx
+ Header.tsx
+ App.tsx
+ index.js
+ .gitignore
+ package.json
+ README.md`
+ );
+ });
+
+ it('should render :::class annotations for highlighting', () => {
+ imgSnapshotTest(
+ `treeView-beta
+ src/
+ components/
+ Button.tsx :::highlight
+ Header.tsx
+ App.tsx :::highlight
+ index.js
+ package.json`
+ );
+ });
+
+ it('should render ## descriptions', () => {
+ imgSnapshotTest(
+ `treeView-beta
+ src/
+ index.js ## app entry point
+ config.ts ## runtime configuration
+ utils/ ## shared helpers
+ package.json ## project manifest
+ README.md`
+ );
+ });
+
+ it('should render icon() overrides', () => {
+ imgSnapshotTest(
+ `treeView-beta
+ data/
+ model.bin icon(database)
+ weights.h5 icon(database)
+ src/
+ index.js`
+ );
+ });
+
+ it('should render combined annotations', () => {
+ imgSnapshotTest(
+ `treeView-beta
+ my-project/
+ src/
+ App.tsx :::highlight icon(react) ## main component
+ index.js ## entry point
+ styles.css
+ .env ## environment variables
+ Dockerfile
+ package.json`
+ );
+ });
});
diff --git a/demos/treeView.html b/demos/treeView.html
index 174830fa102..054862c4e54 100644
--- a/demos/treeView.html
+++ b/demos/treeView.html
@@ -9,62 +9,181 @@
body {
font-family: 'Montserrat', sans-serif;
margin: 0 auto;
- max-width: 900px;
+ max-width: 1200px;
padding: 20px;
}
- .mermaid {
- margin: 30px 0;
- }
+
h1,
h2 {
color: #333;
}
- pre {
- background-color: #f5f5f5;
- padding: 15px;
- border-radius: 5px;
+
+ .demo {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ margin-bottom: 32px;
+ align-items: start;
+ }
+
+ .demo .source {
+ background: #fff;
+ color: #333;
+ border: 1px solid #e0e0e0;
+ padding: 16px;
+ border-radius: 6px;
+ font-family: 'Consolas', 'Monaco', monospace;
+ font-size: 13px;
+ line-height: 1.5;
+ overflow-x: auto;
+ white-space: pre;
+ margin: 0;
+ }
+
+ .demo .rendered {
+ background: #fff;
+ border: 1px solid #e0e0e0;
+ border-radius: 6px;
+ padding: 16px;
+ min-height: 80px;
+ }
+
+ .demo .rendered .mermaid {
+ margin: 0;
}
+
TreeView Diagram Demo
+
+ Each example shows the input syntax (left) alongside the
+ rendered output (right).
+
- Basic TreeView Example
-
- treeView-beta
- "docs"
+ Basic TreeView (quoted labels)
+
+
+
+
+treeView-beta
+"docs"
+ "build"
+ "make.bat"
+ "Makefile"
+ "out"
+ "source"
"build"
- "make.bat"
- "Makefile"
- "out"
- "source"
- "build"
- "static"
- "_templates"
- "div. Files"
-
+ "static"
+ "_templates"
+ "div. Files"
+
+
+
Bare Labels with Icons
+
+
+
+
+treeView-beta
+my-project/
+ src/
+ components/
+ Button.tsx
+ Header.tsx
+ App.tsx
+ index.js
+ .gitignore
+ package.json
+ README.md
+
+
+
TreeView Config Example
-
- ---
- config:
+ Annotations: :::class, icon(), ##
+
+
+
+
+treeView-beta
+my-project/
+ src/
+ App.tsx :::highlight icon(react) ## main component
+ index.js ## entry point
+ styles.css
+ data/
+ model.bin icon(database)
+ .env ## environment variables
+ Dockerfile
+ package.json
+
+
+
Folder Names with Spaces
+
+
+
+
+treeView-beta
+My Project/
+ Source Files/
+ App.tsx :::highlight ## main component
+ index.js ## entry point
+ My Documents/
+ meeting notes.md
+ project plan.md ## Q3 roadmap
+ .gitignore
+ README.md
+
+
+
Custom Config
+
+
+
+
+---
+config:
+ treeView:
+ rowIndent: 80
+ lineThickness: 3
+ themeVariables:
treeView:
- rowIndent: 80
- lineThickness: 3
- themeVariables:
- treeView:
- labelFontSize: '20px'
- labelColor: '#FF0000'
- lineColor: '#00FF00'
- ---
- treeView-beta
- "packages"
- "mermaid"
- "src"
- "parser"
-
+ labelFontSize: '20px'
+ labelColor: '#FF0000'
+ lineColor: '#00FF00'
+---
+treeView-beta
+"packages"
+ "mermaid"
+ "src"
+ "parser"
+
+
+