mermaid-js · lee-treehouse · Mar 13, 2026 · Jul 25, 2024 · Jul 25, 2024 · Jul 26, 2024
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -27,6 +27,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
+  'treeView',
   'architecture',
   'radar',
   'venn',

diff --git a/.changeset/weak-tools-pay.md b/.changeset/weak-tools-pay.md
@@ -0,0 +1,7 @@
+---
+'@mermaid-js/examples': minor
+'mermaid': minor
+'@mermaid-js/parser': minor
+---
+
+add new TreeView diagram
diff --git a/cypress/integration/rendering/treeView.spec.ts b/cypress/integration/rendering/treeView.spec.ts
@@ -0,0 +1,75 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('TreeView Diagram', () => {
+  it('should render a simple treeView diagram', () => {
+    imgSnapshotTest(
+      `treeView-beta
+            "file1.ts"`
+    );
+  });
+
+  it('should render a complex treeView diagram', () => {
+    imgSnapshotTest(
+      `treeView-beta
+            "root"
+                "folder1"
+                    "file1.js"
+                    "file2.ts"
+                "folder2"
+                    "file3.spec.ts"
+                    "folder3"
+                        "file4.ts"
+                        "file5.ts"
+                        "folder4"
+                            "file6.ts"
+                "file7.ts"`
+    );
+  });
+
+  it('should render a complex treeView diagram with multiple roots', () => {
+    imgSnapshotTest(
+      `treeView-beta
+            "folder1"
+                "file1.js"
+                "file2.ts"
+            "folder2"
+                "file3.spec.ts"
+                "folder3"
+                    "file4.ts"
+                    "file5.ts"
+                    "folder4"
+                        "file6.ts"
+            "file7.ts"`
+    );
+  });
+
+  it('should render a treeView diagram with custom config', () => {
+    imgSnapshotTest(
+      `
+---
+config:
+  treeView:
+      rowIndent: 80
+      lineThickness: 3
+  themeVariables:
+      treeView:
+          labelFontSize: '20px'
+          labelColor: '#FF0000'
+          lineColor: '#00FF00'
+---      
+treeView-beta
+      "folder1"
+          "file1.js"
+          "file2.ts"
+      "folder2"
+          "file3.spec.ts"
+          "folder3"
+              "file4.ts"
+              "file5.ts"
+              "folder4"
+                  "file6.ts"
+      "file7.ts"
+    `
+    );
+  });
+});
diff --git a/demos/index.html b/demos/index.html
@@ -1,105 +1,108 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Mermaid quick test and demo pages</h1>
-    <p>
-      Some of these pages have duplicates; some are slow to load because they have so many graphs.
-    </p>
-    <p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
-    <p>
-      If you'd like to clean up one of the pages, please feel free to
-      <a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
-    </p>
-
-    <ul>
-      <li>
-        <h2><a href="./c4context.html">C4 Context</a></h2>
-      </li>
-      <li>
-        <h2><a href="./classchart.html">Class diagrams</a></h2>
-      </li>
-      <li>
-        <h2><a href="./dataflowchart.html">Data flow charts</a></h2>
-      </li>
-      <li>
-        <h2><a href="./er.html">Entity Relation diagram</a></h2>
-      </li>
-      <li>
-        <h2><a href="./flowchart.html">Flow charts</a></h2>
-      </li>
-      <li>
-        <h2><a href="./gantt.html">Gantt</a></h2>
-      </li>
-      <li>
-        <h2><a href="./git.html">Git</a></h2>
-      </li>
-      <li>
-        <h2><a href="./info.html">Info</a></h2>
-      </li>
-      <li>
-        <h2><a href="./journey.html">Journey</a></h2>
-      </li>
-      <li>
-        <h2><a href="./mindmap.html">Mindmap</a></h2>
-      </li>
-      <li>
-        <h2><a href="./ishikawa.html">Ishikawa</a></h2>
-      </li>
-      <li>
-        <h2><a href="./pie.html">Pie</a></h2>
-      </li>
-      <li>
-        <h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
-      </li>
-      <li>
-        <h2><a href="./xychart.html">XY charts</a></h2>
-      </li>
-      <li>
-        <h2><a href="./requirements.html">Requirements</a></h2>
-      </li>
-      <li>
-        <h2><a href="./sequence.html">Sequence</a></h2>
-      </li>
-      <li>
-        <h2><a href="./state.html">State</a></h2>
-      </li>
-      <li>
-        <h2><a href="./timeline.html">Timeline</a></h2>
-      </li>
-      <li>
-        <h2><a href="./zenuml.html">ZenUML</a></h2>
-      </li>
-      <li>
-        <h2><a href="./sankey.html">Sankey</a></h2>
-      </li>
-      <li>
-        <h2><a href="./packet.html">Packet</a></h2>
-      </li>
-      <li>
-        <h2><a href="./block.html">Layered Blocks</a></h2>
-      </li>
-      <li>
-        <h2><a href="./architecture.html">Architecture</a></h2>
-      </li>
-      <li>
-        <h2><a href="./radar.html">Radar</a></h2>
-      </li>
-      <li>
-        <h2><a href="./venn.html">Venn diagram</a></h2>
-      </li>
-    </ul>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Mermaid quick test and demo pages</h1>
+    <p>
+      Some of these pages have duplicates; some are slow to load because they have so many graphs.
+    </p>
+    <p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
+    <p>
+      If you'd like to clean up one of the pages, please feel free to
+      <a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
+    </p>
+
+    <ul>
+      <li>
+        <h2><a href="./c4context.html">C4 Context</a></h2>
+      </li>
+      <li>
+        <h2><a href="./classchart.html">Class diagrams</a></h2>
+      </li>
+      <li>
+        <h2><a href="./dataflowchart.html">Data flow charts</a></h2>
+      </li>
+      <li>
+        <h2><a href="./er.html">Entity Relation diagram</a></h2>
+      </li>
+      <li>
+        <h2><a href="./flowchart.html">Flow charts</a></h2>
+      </li>
+      <li>
+        <h2><a href="./gantt.html">Gantt</a></h2>
+      </li>
+      <li>
+        <h2><a href="./git.html">Git</a></h2>
+      </li>
+      <li>
+        <h2><a href="./info.html">Info</a></h2>
+      </li>
+      <li>
+        <h2><a href="./journey.html">Journey</a></h2>
+      </li>
+      <li>
+        <h2><a href="./mindmap.html">Mindmap</a></h2>
+      </li>
+      <li>
+        <h2><a href="./ishikawa.html">Ishikawa</a></h2>
+      </li>
+      <li>
+        <h2><a href="./pie.html">Pie</a></h2>
+      </li>
+      <li>
+        <h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
+      </li>
+      <li>
+        <h2><a href="./xychart.html">XY charts</a></h2>
+      </li>
+      <li>
+        <h2><a href="./requirements.html">Requirements</a></h2>
+      </li>
+      <li>
+        <h2><a href="./sequence.html">Sequence</a></h2>
+      </li>
+      <li>
+        <h2><a href="./state.html">State</a></h2>
+      </li>
+      <li>
+        <h2><a href="./timeline.html">Timeline</a></h2>
+      </li>
+      <li>
+        <h2><a href="./zenuml.html">ZenUML</a></h2>
+      </li>
+      <li>
+        <h2><a href="./sankey.html">Sankey</a></h2>
+      </li>
+      <li>
+        <h2><a href="./packet.html">Packet</a></h2>
+      </li>
+      <li>
+        <h2><a href="./block.html">Layered Blocks</a></h2>
+      </li>
+      <li>
+        <h2><a href="./architecture.html">Architecture</a></h2>
+      </li>
+      <li>
+        <h2><a href="./radar.html">Radar</a></h2>
+      </li>
+      <li>
+        <h2><a href="./venn.html">Venn diagram</a></h2>
+      </li>
+      <li>
+        <h2><a href="./treeView.html">TreeView</a></h2>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/demos/treeView.html b/demos/treeView.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Mermaid TreeView Diagram Demo</title>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'Montserrat', sans-serif;
+        margin: 0 auto;
+        max-width: 900px;
+        padding: 20px;
+      }
+      .mermaid {
+        margin: 30px 0;
+      }
+      h1,
+      h2 {
+        color: #333;
+      }
+      pre {
+        background-color: #f5f5f5;
+        padding: 15px;
+        border-radius: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>TreeView Diagram Demo</h1>
+
+    <h2>Basic TreeView Example</h2>
+    <pre class="mermaid">
+    treeView-beta
+    "docs"
+        "build"
+        "make.bat"
+        "Makefile"
+        "out"
+        "source"
+            "build"
+            "static"
+                "_templates"
+                "div. Files"
+    </pre>
+
+    <h2>TreeView Config Example</h2>
+    <pre class="mermaid">
+    ---
+    config:
+        treeView:
+            rowIndent: 80
+            lineThickness: 3
+        themeVariables:
+            treeView:
+                labelFontSize: '20px'
+                labelColor: '#FF0000'
+                lineColor: '#00FF00'
+    ---
+    treeView-beta
+    "packages"
+        "mermaid"
+            "src"
+        "parser"
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        logLevel: 1,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md
@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L298)
+Defined in: [packages/mermaid/src/defaultConfig.ts:302](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L302)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,4 +12,4 @@

		> `const` configKeys: `Set`<`string`>

		Defined in: [packages/mermaid/src/defaultConfig.ts:298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L298)
		Defined in: [packages/mermaid/src/defaultConfig.ts:302](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L302)