From 4df98bb2727209f3dc3701c6b3dbcff2bc5ae343 Mon Sep 17 00:00:00 2001 From: Bettaieb Mohamed Date: Thu, 23 Apr 2026 18:24:15 +0100 Subject: [PATCH 1/3] feat(treeView): add configurable root node via config.treeView.root --- .../rendering/treeView/treeView.spec.ts | 41 +++++++++++++++++++ packages/mermaid/src/config.type.ts | 8 ++++ packages/mermaid/src/diagrams/treeView/db.ts | 21 +++++++--- .../mermaid/src/diagrams/treeView/renderer.ts | 8 ++++ .../mermaid/src/diagrams/treeView/types.ts | 1 + .../mermaid/src/schemas/config.schema.yaml | 8 ++++ 6 files changed, 81 insertions(+), 6 deletions(-) diff --git a/cypress/integration/rendering/treeView/treeView.spec.ts b/cypress/integration/rendering/treeView/treeView.spec.ts index 5e6901964fb..9c9e3782600 100644 --- a/cypress/integration/rendering/treeView/treeView.spec.ts +++ b/cypress/integration/rendering/treeView/treeView.spec.ts @@ -72,4 +72,45 @@ treeView-beta ` ); }); + + it('should render treeView with default root "/" when no config is provided', () => { + imgSnapshotTest( + `treeView-beta + "file1.ts"` + ); + }); + + it('should render treeView with custom root label', () => { + imgSnapshotTest( + ` +--- +config: + treeView: + root: "My Project" +--- +treeView-beta + "folder1" + "file1.js" + "file2.ts" + "file7.ts" + ` + ); + }); + + it('should render treeView without root node when root is false', () => { + imgSnapshotTest( + ` +--- +config: + treeView: + root: false +--- +treeView-beta + "folder1" + "file1.js" + "file2.ts" + "file7.ts" + ` + ); + }); }); diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 242be718371..873f61de713 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1713,6 +1713,14 @@ export interface TreeViewDiagramConfig extends BaseDiagramConfig { * Thickness of the line */ lineThickness?: number; + /** + * Root node configuration for treeView diagrams. + * - string: Custom label for the root node + * - false: Hide the root node completely + * - undefined: Show default root node "/" + * + */ + root?: string | boolean | null; } /** * The object containing configurations specific for radar diagrams. diff --git a/packages/mermaid/src/diagrams/treeView/db.ts b/packages/mermaid/src/diagrams/treeView/db.ts index db18b948c5d..9624c0eb588 100644 --- a/packages/mermaid/src/diagrams/treeView/db.ts +++ b/packages/mermaid/src/diagrams/treeView/db.ts @@ -3,7 +3,6 @@ import type { TreeViewDB, Node } from './types.js'; import { getConfig as getCommonConfig } from '../../config.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; import { - clear as commonClear, getAccDescription, getAccTitle, getDiagramTitle, @@ -31,9 +30,15 @@ const state = new ImperativeState(() => ({ ], })); -const clear = () => { - state.reset(); - commonClear(); +const updateRootName = (config: Required) => { + const root = state.records.stack[0]; + if (config.root === false) { + root.name = ''; + } else if (typeof config.root === 'string') { + root.name = config.root; + } else { + root.name = '/'; + } }; const getRoot = () => { @@ -45,7 +50,9 @@ const getCount = () => state.records.cnt; const defaultConfig: Required = DEFAULT_CONFIG.treeView; const getConfig = (): Required => { - return cleanAndMerge(defaultConfig, getCommonConfig().treeView); + const config = cleanAndMerge(defaultConfig, getCommonConfig().treeView); + updateRootName(config); + return config; }; const addNode = (level: number, name: string) => { @@ -63,10 +70,12 @@ const addNode = (level: number, name: string) => { }; const db: TreeViewDB = { - clear, addNode, getRoot, getCount, + clear: () => { + state.reset(); + }, getConfig, getAccTitle, getAccDescription, diff --git a/packages/mermaid/src/diagrams/treeView/renderer.ts b/packages/mermaid/src/diagrams/treeView/renderer.ts index 150f765b763..af9c72b5446 100644 --- a/packages/mermaid/src/diagrams/treeView/renderer.ts +++ b/packages/mermaid/src/diagrams/treeView/renderer.ts @@ -79,6 +79,14 @@ const drawTree = ( }; const processNode = (node: Node, depth = 0) => { + // Skip rendering root node if root is false or name is empty + if (depth === 0 && (config.root === false || node.name === '')) { + node.children.forEach((child) => { + processNode(child, depth); + }); + return; + } + drawNode(elem, node, config, depth); node.children.forEach((child) => { processNode(child, depth + 1); diff --git a/packages/mermaid/src/diagrams/treeView/types.ts b/packages/mermaid/src/diagrams/treeView/types.ts index 43a7f4e6da3..09498deb939 100644 --- a/packages/mermaid/src/diagrams/treeView/types.ts +++ b/packages/mermaid/src/diagrams/treeView/types.ts @@ -21,6 +21,7 @@ export interface TreeViewDB extends DiagramDBBase { addNode: (level: number, name: string) => void; getRoot: () => Node; getCount: () => number; + clear: () => void; } export interface TreeViewDiagramStyles { diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 1dfffca8aab..04bee6c4d48 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -2420,6 +2420,14 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) type: number minimum: 0 default: 1 + root: + description: | + Root node configuration for treeView diagrams. + - string: Custom label for the root node + - false: Hide the root node completely + - undefined: Show default root node "/" + type: [string, boolean, 'null'] + default: 'null' RadarDiagramConfig: title: Radar Diagram Config From 51d473754b664452cad3d12d5d485aed7584efd7 Mon Sep 17 00:00:00 2001 From: Bettaieb Mohamed Date: Tue, 28 Apr 2026 17:54:56 +0100 Subject: [PATCH 2/3] added changeset, after adding treeview-root --- .changeset/configurable-treeview-root.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .changeset/configurable-treeview-root.md diff --git a/.changeset/configurable-treeview-root.md b/.changeset/configurable-treeview-root.md new file mode 100644 index 00000000000..916d4b3fd11 --- /dev/null +++ b/.changeset/configurable-treeview-root.md @@ -0,0 +1,10 @@ +--- +"@mermaid-js/mermaid": minor +--- + +feat: add configurable root node for treeView diagrams + +Added `config.treeView.root` option to control treeView root node behavior: +- Default: Shows "/" root node +- String: Custom label for root node +- false: Hides root node completely From 0c954e57e31dc750aa3c4824feac59579542bd35 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 1 May 2026 13:44:52 +0000 Subject: [PATCH 3/3] [autofix.ci] apply automated fixes --- .changeset/configurable-treeview-root.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.changeset/configurable-treeview-root.md b/.changeset/configurable-treeview-root.md index 916d4b3fd11..488c72fec8a 100644 --- a/.changeset/configurable-treeview-root.md +++ b/.changeset/configurable-treeview-root.md @@ -1,10 +1,11 @@ --- -"@mermaid-js/mermaid": minor +'@mermaid-js/mermaid': minor --- feat: add configurable root node for treeView diagrams Added `config.treeView.root` option to control treeView root node behavior: + - Default: Shows "/" root node -- String: Custom label for root node +- String: Custom label for root node - false: Hides root node completely